/* ========================================================================= SouthCode — feuille de style Aucune couleur littérale : tout passe par les variables de tokens.css, ce qui rend le contrôle de contraste automatique réellement exhaustif. ========================================================================= */ /* Angle partagé des halos lumineux. L'enregistrement CSS laisse le navigateur interpoler l'angle sans boucle JavaScript ; les composants gardent leur rendu plat si @property ou conic-gradient n'est pas disponible. */ @property --a { syntax: ""; inherits: false; initial-value: 0deg; } /* --- Typographie --------------------------------------------------------- Deux fontes auto-hébergées, la limite du projet. Bricolage Grotesque porte les titres — elle a du caractère sans être décorative, et ses axes variables (graisse, chasse, taille optique) évitent d'embarquer plusieurs fichiers. JetBrains Mono porte les chiffres, les étiquettes et les métadonnées : c'est elle qui tient le ton « quelqu'un qui construit ». Les échelles sont fluides. Une échelle fixe imposerait des points de rupture typographiques en plus de ceux de la mise en page ; clamp() n'en impose aucun. */ :root { --titre: 'Bricolage Grotesque', 'Bricolage repli', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mono: 'JetBrains Mono', 'JetBrains repli', ui-monospace, "SF Mono", Menlo, monospace; /* Deux échelles de titre, et c'est une nécessité, pas un raffinement : « Vous ne perdez plus un appel » tient en quatre mots et supporte 5,5 rem ; la phrase de /afflux en fait seize et deviendrait un mur illisible. La taille d'un titre dépend de sa longueur, pas de son rang. */ --t-hero: clamp(2.75rem, 1.6rem + 5.1vw, 5.5rem); /* accroche courte */ /* ⚠️ L'ÉCHELLE DES HÉROS VIT ICI, ET NULLE PART AILLEURS — 10 août 2026. Les cinq pages en déclaraient chacune une, dans leur propre feuille : clamp(3.1rem,7vw,7.8rem) sur /contact, clamp(4rem,6.3vw,8.2rem) sur /afflux, clamp(3.45rem,6vw,7.6rem) sur /sites-web, deux autres ailleurs — avec cinq chasses et cinq interlignes. Résultat : des héros qui ne se ressemblent pas d'une page à l'autre, et un accueil visiblement plus haut. Signalé par Raphaël, captures à l'appui. Un jeton partagé existait déjà (--t-hero, juste au-dessus) et aucune page ne l'employait. Le défaut n'était donc pas l'absence de source unique, mais que personne n'y puisait — d'où le test qui interdit désormais à une feuille de page de redéclarer une taille de titre de héros. Les valeurs ci-dessous sont MESURÉES, pas choisies : à 5 rem et 14ch, aucun titre du site ne dépasse quatre lignes et le plus haut fait 251 px. À la première tentative — 7,6 rem et 9ch — /realisations en faisait six, soit 521 px de titre. C'est le rappel de la remarque écrite plus haut sur --t-hero : la taille tenable dépend de la longueur de la phrase. */ --t-hero-page: clamp(3rem, .9rem + 4vw, 5rem); --t-hero-interligne: .87; --t-hero-chasse: 14ch; --t-hero-marge: 26px; /* ⚠️ Deuxième passe, 10 août 2026 — même défaut, deux propriétés oubliées. La première unification n'avait déplacé que la TAILLE. La chasse et l'approche du titre étaient restées dans accueil.css, et la taille du sous-titre dans trois feuilles de page. Mesuré à 1440 px avant correction : titre à 100 % de chasse sur l'accueil contre 92 % sur les quatre autres — Bricolage étant une police variable, 92 % ne « resserre » pas le texte, il en redessine les lettres : c'est une autre police à l'œil. Et le sous-titre affichait trois tailles pour cinq pages : 16,56 px sur l'accueil, 19,2 px sur /sites-web et /contact, 15 px sur /afflux et /realisations. Les valeurs retenues sont celles de l'accueil, qui porte le visuel E validé. Vérifié après coup : aucun titre ne gagne de ligne, la mesure --t-hero-chasse étant en ch, elle s'élargit avec l'axe de chasse et le retour à la ligne ne bouge pas (contrôlé sur les cinq pages à 1440 px et à 375 px). */ --t-hero-graisse-chasse: 100%; --t-hero-approche: -.048em; --t-hero-lede: clamp(.98rem, 1.15vw, 1.08rem); /* Troisième passe, même journée : titre et sous-titre unifiés, le bouton d'appel restait à 13,5 px et 44 px de haut sur les quatre pages, contre 15 px et 50 px sur l'accueil. Une fois le titre aligné, c'est l'écart le plus visible du bandeau — et c'est l'élément sur lequel le prospect clique. La LARGEUR ne suit pas : les 352 px de l'accueil sont ceux de sa colonne du visuel E, ils déborderaient la colonne de 335 px des autres pages sur mobile et repousseraient seuls le bouton secondaire à la ligne. */ --t-hero-bouton: 15px; /* ⚠️ Le seul cran à part du site, et il ne concerne QUE le titre anglais de l'accueil. Sa structure en trois lignes forcées vient du visuel E validé et un test la verrouille ; « Your future customers » passe à deux lignes dès 57 px dans la colonne de 540 px, ce qui en ferait quatre. Mesuré de 1101 à 1440 px : ce cran tient les trois lignes partout. */ --t-hero-page-en: clamp(2.6rem, .7rem + 3.2vw, 4rem); --t-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); /* titre de page */ --t-h2: clamp(1.95rem, 1.3rem + 2.9vw, 3.6rem); --t-h3: clamp(1.15rem, 1.02rem + .55vw, 1.4rem); --t-corps: 1.0625rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* ⚠️ color-scheme, ajouté le 6 août sur audit des Web Interface Guidelines de Vercel. Ce n'est PAS un doublon des jetons : il ne colore rien de ce que nous dessinons, il dit au navigateur de rendre ce que NOUS ne dessinons pas — barres de défilement, menus