/* Propul, charte graphique. Version finale, fond blanc. La vérité des valeurs (copie conforme de la charte, _charte/propul-charte). Le blanc est le territoire, la couleur est l'événement : mots du titre, boutons, puces carrées, chiffres, labels. Jamais un fond de page coloré, jamais une bande pleine largeur. Chargé AVANT style.css : les variables du gabarit Agenio sont redéfinies sur ces tokens dans style.css et la couche propul-charte.css fait le reste. */ :root { /* ---- Accents de marque ---- */ --violet: #7128D7; /* Propul SEO, une seule valeur. 7,0:1 sur blanc */ --orange-vif: #FF4A00; /* Propul AI, display. 3,4:1 : grandes tailles seulement */ --orange-texte: #D13C00; /* Propul AI : boutons, liens, puces, labels. 4,8:1 */ /* ---- Fonctionnel ---- */ --fond: #FFFFFF; --encre: #211A33; /* tout le texte. 15,6:1. Jamais un noir pur */ --texte-2: #6A6478; /* 5,6:1 SUR BLANC, et seulement sur blanc */ /* Le texte second SUR FOND SOMBRE. `--texte-2` est calibre pour le blanc : pose sur la planche sombre des temoignages, il tombe a 3,1:1 — mesure du 30/08/2026 sur l'accueil, et c'est la CITATION, le seul contenu persuasif du bloc, qui etait dessous ; le nom de l'entreprise et le signataire, eux, sont en blanc et passent a 17,9:1. Le pendant sombre est un melange du blanc et de l'encre : il reste second — il ne se confond pas avec le blanc du nom — et il rend 11:1 sur l'encre. */ --texte-2-sombre: color-mix(in srgb, var(--fond) 80%, var(--encre)); --filet: #E4E1EC; /* bordures 1px */ --grille: #ECEAF2; /* grille discrète des heros, seul ornement autorisé */ /* ---- États fonctionnels (formulaires, simulateurs) — hors marque ---- */ --ok: #1F7A33; --erreur: #B3261E; --attention: #8A5A00; /* ---- Teintes d'état : les pastilles de niveau de l'annuaire ---- Trois statuts, trois fonds et trois filets. Ils etaient ecrits en dur dans propulseo.css, ou rien ne disait d'ou ils venaient : c'est exactement ce que la regle `couleur-hors-palette` refuse desormais. Deux des trois se derivent fidelement de leur couleur d'etat par un melange au blanc ; le troisieme ne s'en derive pas — l'ocre de « sur etude » est plus sature que ne le donnerait un melange — et il est donc nomme a sa valeur. Le texte posé dessus reste la couleur d'etat pleine. */ --ok-fond: color-mix(in srgb, var(--ok) 10%, var(--fond)); --ok-filet: color-mix(in srgb, var(--ok) 28%, var(--fond)); --violet-fond: color-mix(in srgb, var(--violet) 8%, var(--fond)); --violet-filet: color-mix(in srgb, var(--violet) 24%, var(--fond)); --attention-fond: #FBF4E6; --attention-filet: #EBDCBB; --attention-pastille: #E0A83C; /* ---- Typographie ---- */ --font-display: 'Source Serif 4', Georgia, serif; --font-corps: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fs-display: 3.5rem; --lh-display: 1.08; --fw-display: 700; --fs-h1: 2.5rem; --lh-h1: 1.12; --fw-h1: 700; --fs-h2: 1.75rem; --lh-h2: 1.2; --fw-h2: 600; --fs-h3: 1.25rem; --lh-h3: 1.3; --fw-h3: 600; --fs-body: 1rem; --lh-body: 1.65; --fw-body: 400; --fs-small: 0.875rem;--lh-small: 1.6; --fs-label: 0.75rem; --lh-label: 1.4; --fw-label: 500; --tr-label: 0.2em; /* --fs-label EST LE PLANCHER DU TEXTE EDITORIAL, et il vaut 12px. Aucune regle de feuille ne doit rendre du texte lu par un visiteur sous cette taille. Ce n'est pas une convention de gout : c'est le seuil que test/rendu.mjs mesure au navigateur, page par page et largeur par largeur, avec son propre cliquet. En session 3, trente-quatre declarations de `font-size` a 10, 11 et 11,5px ont ete ramenees ici — etiquettes de l'annuaire, titres de colonnes du pied de page, liens d'univers, tampons des figures IA. Elles etaient toutes des LIBELLES, c'est-a-dire exactement ce que ce jeton nomme. Ecrire `var(--fs-label)` plutot que `12px` fait que le jour ou le plancher bouge, il bouge partout d'un seul geste. */ /* ---- La mesure : la largeur de LECTURE, jamais celle du conteneur ---- 68 signes par ligne. Ce n'est pas une valeur de gout : c'est celle que `.ps-capsule__inner` posait deja, et l'audit avait releve la capsule comme le seul bloc du site dont la typographie etait juste de bout en bout. Mesure du 30/08/2026, echantillon de 43 pages a 1440px : 109 paragraphes rendaient plus de 90 signes par ligne, le pire a 197 — le chapeau de banniere en portait 74 a lui seul, parce qu'il etait borne en `max-width: max-content`, c'est-a-dire pas borne du tout. En `ch` et non en pixels : l'unite suit la police et son corps, donc la borne reste juste si le corps de texte change. */ --mesure: 68ch; /* ---- La gouttiere de page ---- La charte prevoit `--gutter-mobile: 1.5rem` (24px) et `--gutter-desktop: 2.5rem` (40px). Ni l'un ni l'autre n'etait dans aucune feuille : la gouttiere valait 15px de 320 a 991px, puis sautait a 35,7px. Mesure du 30/08/2026, largeur de contenu de `.container` : 991px de fenetre 15px de gouttiere, 961px de contenu 992px de fenetre 35,7px de gouttiere, 921px de contenu Un pixel de fenetre coutait 40px de contenu, et la marche tombait au milieu de la bande des portables. Le clamp couvre la meme amplitude en continu : 24px sur telephone (le `--gutter-mobile` de la charte), 40px vers 1 110px de fenetre (le `--gutter-desktop`), et le meme plafond de 104px que la couche ordinateurs posait deja. Au-dessus de 992px, les valeurs sont IDENTIQUES a celles d'avant : rien ne bouge la ou rien n'etait casse. */ --propul-gouttiere: clamp(24px, 3.6vw, 104px); --r-champ:6px; --r-carte:10px; --r-bouton:6px; /* boutons presque droits, pas de pilule */ --shadow-flottant: 0 8px 24px rgba(33,26,51,.10), 0 2px 6px rgba(33,26,51,.06); /* menus et modales uniquement */ --dur-rapide:120ms; --dur-base:180ms; --dur-lente:280ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); } /* ---- Repli maison : aucune branche posee ---- La maison n'a pas de branche : le violet mene, l'orange vit dans ses composants qui portent data-branche="ai" localement. Repli obligatoire, sinon une page sans attribut rend des boutons sans couleur (--accent n'existait que sous [data-branche]). */ :root { --accent: var(--violet); --accent-display: var(--violet); --accent-hover: color-mix(in srgb, var(--violet) 92%, black); --accent-presse: color-mix(in srgb, var(--violet) 84%, black); --accent-grille: var(--violet); } /* Contexte de marque via data-branche. Un composant lit ces tokens, jamais une couleur en dur. Toutes les pages de la branche portent data-branche="seo" sur ; les composants qui montrent le pôle Propul AI portent data-branche="ai" localement (les variables CSS cascadent au sous-arbre). */ html[data-branche="seo"], [data-branche="seo"] { --accent-display: var(--violet); --accent: var(--violet); --accent-grille: var(--violet); } html[data-branche="ai"], [data-branche="ai"] { --accent-display: var(--orange-vif); /* mots du titre, grands chiffres */ --accent: var(--orange-texte); /* tout le reste */ /* L'ACCENT LU SUR LA GRILLE, et pourquoi il ne peut pas etre l'accent nu. `--orange-texte` annonce 4,8:1 — sur BLANC. Pose sur `--grille` (#ECEAF2), qui est le fond des tuiles actives de la figure IA, il retombe a 4,04:1 : mesure axe-core du 30/08/2026, quatre lignes du cliquet d'accessibilite (ia.html et ia-offres.html, mobile et bureau, 2 noeuds chacune). La sortie n'est pas une couleur neuve — ce serait une couleur hors palette de plus — mais le meme accent assombri, exactement comme `--accent-hover` et `--accent-presse` le font deja. Le violet, lui, passe deja largement sur la grille : son jeton vaut l'accent nu. */ --accent-grille: color-mix(in srgb, var(--orange-texte) 86%, black); } /* États dérivés : survol assombri de 8 %, pression de 16 % (charte). */ html[data-branche], [data-branche] { --accent-hover: color-mix(in srgb, var(--accent) 92%, black); --accent-presse: color-mix(in srgb, var(--accent) 84%, black); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }