/* ========================================================================== R-SYSTEM — VARIANTE « CHARTE CORPORATE » Branche de comparaison uniquement. Ce fichier n'existe pas sur main et n'a pas vocation a y arriver tel quel : il sert a mettre cote a cote la landing en ligne et la meme landing repeinte a la charte SALUS Controls, pour decider laquelle garder. DEROGATION ASSUMEE. Le skill architecture-salus et le CLAUDE.md de ce depot disent tous deux de ne jamais aligner la direction artistique de R-System sur la charte corporate. Mathieu a demande cet alignement en connaissance de cause : la derogation est limitee a cette branche, main n'est pas touche, la production reste intacte. METHODE. Rien n'est reecrit : ni le HTML, ni la structure, ni un seul composant. Ce fichier ne fait que REMAPPER les tokens de css/tokens.css sur ceux de la charte, lus dans vendor/salus/tokens/tokens.css — la copie vendoree du depot amont, chargee juste avant celui-ci. Aucun hexadecimal n'est ecrit a la main : chaque valeur passe par le token corporate correspondant. C'est ce qui rend la comparaison honnete : a structure identique, seule la peau change. DEUX COUCHES REMAPPEES, PAS UNE. La couche semantique (--bg, --fg, --accent, --rule…) est celle que les composants consomment, et c'est la cible principale. Mais huit composants toujours sombres — l'en-tete, le pied de page, les voiles de media, le comparateur — appellent encore les primitives directement (--navy-950, --cyan-500, --white, --grey-200, --alpha-light-16). Les laisser en dehors du remapping aurait laisse des ilots a l'ancienne DA au milieu d'une page repeinte. Les primitives sont donc remappees elles aussi. CE QUI N'EST PAS TOUCHE, ET POURQUOI. L'echelle d'espacement : les deux sont la meme grille de 4 px et partagent la plupart de leurs paliers ; la remapper serait un non-evenement sur les paliers communs et casserait ceux que la charte n'a pas (20, 28, 40, 56, 72 px). La mise en page : le conteneur de 1200 px et la gouttiere de 24 px sont deja ceux de la charte. Les hauteurs de visuels, les breakpoints et tout le calage geometrique : c'est de la structure, pas de la peau. ========================================================================== */ /* -------------------------------------------------------------------------- 1. La police web de la charte, auto-hebergee Open Sans v44, axe wght variable de 300 a 800 : un seul telechargement sert les cinq graisses de la charte. Les fichiers viennent du depot amont par vendor.spec, sous licence OFL. Rien n'est charge depuis un domaine tiers. Le latin-ext ne se telecharge que si un caractere l'appelle. -------------------------------------------------------------------------- */ @font-face{ font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap; src:url(../vendor/salus/assets/fonts/open-sans-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap; src:url(../vendor/salus/assets/fonts/open-sans-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* ---------------------------------------------------------------------- 2. Primitives — repointees sur la palette de charte Surprise de la comparaison : les trois couleurs de marque sont DEJA identiques. --navy-900 #1D2858 est --color-brand-blue, --cyan-500 #00AEEF est --color-brand-cyan, --teal-500 #3FB8A5 est --color-brand-turquoise. La DA de R-System n'a jamais diverge de la charte sur la palette : elle diverge sur la typographie, sur l'echelle, sur les formes et sur la maniere de composer les gris et les voiles. ---------------------------------------------------------------------- */ --navy-900:var(--color-brand-blue); --navy-800:var(--color-brand-blue); --navy-700:var(--color-brand-blue); /* La charte n'a pas de navy plus profond que son bleu de marque : sa seule surface plus sombre est le noir. C'est l'ecart le plus visible du repeint, les sections en theme-deep passent du navy profond au noir. */ --navy-950:var(--color-surface-dark); --cyan-500:var(--color-brand-cyan); /* Le cyan de marque tombe a 2.53 sur blanc : la charte l'interdit en texte et fournit --color-text-link pour ce role. C'est exactement la fonction de --cyan-800 dans la DA de R-System. */ --cyan-800:var(--color-text-link); --teal-500:var(--color-brand-turquoise); /* Le turquoise tombe a 2.44 sur blanc. La charte n'a qu'un seul vert-bleu lisible sur fond clair, --color-success (4.8), derive WCAG. */ --teal-800:var(--color-success); --white:var(--color-brand-white); /* Le papier de R-System est un bleu-gris tres clair. La charte a deux fonds clairs teintes : le bleute --color-surface-subtle et le gris --color-surface-muted. C'est le blanc qui est retenu pour --paper-50, parce que --color-text-muted n'est calibre que sur du blanc : sur les deux fonds teintes il tombe sous 4.5 et la hierarchie de gris s'effondre. La charte de main n'a pas encore les variantes on-tint. */ --paper-50:var(--color-surface-default); --red-500:var(--color-error); --red-700:var(--color-error); /* La charte n'a aucun rouge lisible sur son aplat marine : #b3261e y fait 2.4. Le fond d'erreur, tres clair, joue ce role en texte. Trou signale. */ --red-300:var(--color-error-surface); /* Les quatre gris de R-System distinguent deux niveaux de texte secondaire sur fond sombre et deux sur fond clair. La charte n'a qu'un seul gris de texte, calibre sur du blanc. Sur fond clair il tient (4.6) ; sur fond sombre il tombe a 3.0 et ne peut pas servir. Les deux gris sombres passent donc par un blanc a 70 %, seul palier de transparence de la charte qui reste lisible sur le marine : la hierarchie ne tient plus a la couleur mais a la taille et a la graisse, comme dans les composants du design system. */ --grey-200:color-mix(in srgb, var(--color-text-inverse) 70%, transparent); --grey-400:color-mix(in srgb, var(--color-text-inverse) 70%, transparent); --grey-600:var(--color-text-muted); --grey-700:var(--color-text-muted); /* Filets et voiles. La charte n'autorise que trois transparences, 70, 30 et 10 %, et interdit d'en superposer deux. Les onze alphas de R-System, qui descendent jusqu'a 4 %, sont donc rabattus sur ces trois paliers. */ --alpha-light-28:color-mix(in srgb, var(--color-text-inverse) 30%, transparent); --alpha-light-16:color-mix(in srgb, var(--color-text-inverse) 10%, transparent); --alpha-light-07:color-mix(in srgb, var(--color-text-inverse) 10%, transparent); --alpha-light-05:color-mix(in srgb, var(--color-text-inverse) 10%, transparent); --alpha-navy-72:color-mix(in srgb, var(--color-surface-dark) 70%, transparent); --alpha-dark-25:color-mix(in srgb, var(--color-brand-blue) 30%, transparent); --alpha-dark-18:color-mix(in srgb, var(--color-brand-blue) 30%, transparent); --alpha-dark-14:color-mix(in srgb, var(--color-brand-blue) 10%, transparent); --alpha-dark-06:color-mix(in srgb, var(--color-brand-blue) 10%, transparent); --alpha-dark-04:color-mix(in srgb, var(--color-brand-blue) 10%, transparent); --alpha-cyan-14:color-mix(in srgb, var(--color-brand-cyan) 10%, transparent); --alpha-cyan-800-10:color-mix(in srgb, var(--color-brand-cyan) 10%, transparent); --alpha-teal-10:color-mix(in srgb, var(--color-brand-turquoise) 10%, transparent); --alpha-teal-30:color-mix(in srgb, var(--color-brand-turquoise) 30%, transparent); --alpha-teal-800-10:color-mix(in srgb, var(--color-brand-turquoise) 10%, transparent); --alpha-teal-800-30:color-mix(in srgb, var(--color-brand-turquoise) 30%, transparent); /* ---------------------------------------------------------------------- 3. Typographie — c'est ici que le repeint se voit le plus Bricolage Grotesque et JetBrains Mono cedent la place a Open Sans, la typo web de la charte. La charte n'a PAS de monospace : les references produit, les donnees techniques et les micro-libelles en capitales perdent leur chasse fixe et leur alignement en colonne. C'est une consequence assumee du repeint, pas un oubli, et c'est l'un des points que la comparaison doit trancher. ---------------------------------------------------------------------- */ --font-display:var(--font-web); --font-mono:var(--font-web); /* La charte a cinq graisses, de 300 a 800. Le duo 200/800 de R-System devient donc 300/800 : le 200 n'existe pas dans Open Sans tel que distribue ici, et la charte ne descend pas sous le light. */ --weight-thin:var(--font-weight-light); --weight-bold:var(--font-weight-extrabold); --weight-mono:var(--font-weight-regular); --weight-mono-bold:var(--font-weight-bold); /* L'echelle de la charte est FIXE, celle de R-System est fluide en clamp(). Les titres ne retrecissent donc plus continument avec la fenetre : ils changent de palier ou pas du tout. Le display tombe de 88 a 60 px, le titre de section de 56 a 36 px : le saut spectaculaire entre le corps de texte et le titre, revendique par la DA de R-System, s'aplatit. */ --size-display:var(--font-size-5xl); --size-h2:var(--font-size-3xl); --size-h3:var(--font-size-xl); --size-h4:var(--font-size-lg); --size-lead:var(--font-size-lg); --size-body:var(--font-size-base); --size-sm:var(--font-size-base); --size-xs:var(--font-size-sm); --size-mono:var(--font-size-sm); --size-mono-sm:var(--font-size-xs); --size-mono-xs:var(--font-size-xs); --size-stat:var(--font-size-3xl); /* Trois interlignages contre cinq. Les titres passent de 0.98 a 1.12 : les titres casses sur deux lignes respirent nettement plus. */ --leading-display:var(--line-height-tight); --leading-tight:var(--line-height-tight); --leading-snug:var(--line-height-snug); --leading-body:var(--line-height-normal); --leading-loose:var(--line-height-normal); /* Le serrage des titres passe de -.03em a -.015em. Les deux approches en capitales de R-System (.16em et .22em) se rejoignent sur l'unique --letter-spacing-wide de la charte, qui vaut justement .16em, echo du lettrage CONTROLS. */ --tracking-display:var(--letter-spacing-tight); --tracking-tight:var(--letter-spacing-tight); --tracking-normal:var(--letter-spacing-normal); --tracking-mono:var(--letter-spacing-normal); --tracking-caps:var(--letter-spacing-wide); --tracking-eyebrow:var(--letter-spacing-wide); /* ---------------------------------------------------------------------- 4. Formes et mouvement ---------------------------------------------------------------------- */ /* Le rayon unique de 2 px de R-System devient le plus petit rayon de la charte, 4 px. La charte fait ses boutons en pilule (--radius-full) et ses cartes en grand rayon, mais R-System n'a qu'un seul token de rayon pour tout : ni la pilule ni la carte a grand rayon ne sont atteignables depuis la couche de tokens. Voir la note d'ecart en fin de fichier. */ --radius-sharp:var(--radius-sm); /* --duration-fast porte le meme nom des deux cotes : la charte dit 120 ms, R-System .15 s. Un token ne peut pas se referencer lui-meme, et l'ecart de 30 ms ne se voit pas. Il n'est donc pas remappe, et c'est la valeur de R-System qui reste. Les deux autres suivent la charte. */ --duration-mid:var(--duration-base); --ease-standard:var(--easing-standard); /* ---------------------------------------------------------------------- 5. Couche semantique — theme sombre, le defaut C'est la seule couche que les composants consomment. Le fond marine de R-System est exactement --color-surface-inverse de la charte. ---------------------------------------------------------------------- */ --bg:var(--color-surface-inverse); --fg:var(--color-text-inverse); --fg-soft:color-mix(in srgb, var(--color-text-inverse) 70%, transparent); --fg-mute:color-mix(in srgb, var(--color-text-inverse) 70%, transparent); --accent:var(--color-brand-cyan); --accent-surface:var(--color-action-secondary-bg); --accent-fg:var(--color-text-on-cyan); --accent-alt:var(--color-brand-turquoise); --accent-alt-voile:color-mix(in srgb, var(--color-brand-turquoise) 10%, transparent); --accent-alt-border:color-mix(in srgb, var(--color-brand-turquoise) 30%, transparent); --rule:color-mix(in srgb, var(--color-text-inverse) 10%, transparent); --rule-strong:color-mix(in srgb, var(--color-text-inverse) 30%, transparent); --ph-hatch:color-mix(in srgb, var(--color-text-inverse) 10%, transparent); --ph-fill:color-mix(in srgb, var(--color-text-inverse) 10%, transparent); --ph-border:color-mix(in srgb, var(--color-text-inverse) 30%, transparent); --card-border:color-mix(in srgb, var(--color-text-inverse) 30%, transparent); --btn-ghost-border:var(--color-text-inverse); --accent-voile:color-mix(in srgb, var(--color-brand-cyan) 10%, transparent); /* La charte de main n'a qu'un anneau de focus, marine : invisible sur son propre aplat marine. Sur fond sombre l'anneau passe donc au blanc. Le token --color-focus-ring-inverse qui reglerait proprement le cas est propose sur la branche feat/composants-site-fr du design system, il n'est pas encore sur main. */ --focus-ring:var(--color-text-inverse); --danger:var(--color-error); --danger-fg:var(--color-error-surface); --scrim:color-mix(in srgb, var(--color-surface-dark) 70%, transparent); } /* -------------------------------------------------------------------------- 6. Theme sombre renforce R-System descend sur un navy plus profond. La charte n'a pas de palier entre son bleu de marque et le noir : les sections en theme-deep passent donc au noir. C'est l'ecart de peau le plus spectaculaire du repeint. -------------------------------------------------------------------------- */ .theme-deep{ --bg:var(--color-surface-dark); } /* -------------------------------------------------------------------------- 7. Theme clair R-System pose ses sections claires sur un papier bleu-gris. La charte les pose sur du blanc : c'est sa surface par defaut, et c'est le seul fond sur lequel --color-text-muted tient le seuil AA (4.6). Sur les deux fonds teintes de la charte il tombe a 4.15 et 3.80, et toute la hierarchie de gris de la landing s'effondrerait. -------------------------------------------------------------------------- */ .theme-pale{ --bg:var(--color-surface-default); --fg:var(--color-text-default); --fg-soft:var(--color-text-default); --fg-mute:var(--color-text-muted); /* Le cyan est INTERDIT en texte sur fond clair par la charte comme par la DA de R-System, pour la meme raison : 2.53 sur blanc. En texte il passe par --color-text-link ; en fond il garde le cyan, avec du marine dessus. */ --accent:var(--color-text-link); --accent-surface:var(--color-action-secondary-bg); --accent-fg:var(--color-text-on-cyan); --accent-alt:var(--color-success); --accent-alt-voile:color-mix(in srgb, var(--color-brand-turquoise) 10%, transparent); --accent-alt-border:color-mix(in srgb, var(--color-brand-turquoise) 30%, transparent); /* Sur fond clair la charte a de vrais tokens de bordure, la ou R-System compose des alphas. */ --rule:var(--color-border-default); --rule-strong:var(--color-border-strong); --ph-hatch:color-mix(in srgb, var(--color-brand-blue) 10%, transparent); --ph-fill:var(--color-surface-muted); --ph-border:var(--color-border-strong); /* L'ADN de surface de la charte : une bordure marine d'un pixel, quarante occurrences relevees sur saluscontrols.com. C'est le signal corporate le plus lisible du repeint sur les sections claires. */ --card-border:var(--color-brand-blue); --btn-ghost-border:var(--color-brand-blue); --accent-voile:color-mix(in srgb, var(--color-brand-cyan) 10%, transparent); --focus-ring:var(--color-focus-ring); --danger-fg:var(--color-error); } /* ========================================================================== ECARTS QUE LA COUCHE DE TOKENS NE PEUT PAS ATTEINDRE Documentes plutot qu'improvises : les corriger demanderait de toucher aux composants, ce qui ferait perdre a la comparaison son sens. 1. FORME DES BOUTONS. La charte fait ses boutons en pilule (--radius-full). R-System n'a qu'un seul token de rayon, --radius-sharp, consomme par les boutons, les cartes, les champs et les vignettes : le remapper en pilule arrondirait tout. Les boutons restent donc a angles quasi vifs. Non atteignable sans toucher aux composants. 2. CASSE DES BOUTONS. Les libelles de bouton de R-System sont en capitales, posees dans styles.css, pas dans un token. La charte tranche pour la casse normale et reserve les capitales aux eyebrows. Non atteignable depuis les tokens. 3. CHASSE FIXE. Les references produit (RCU800, RSQ800, UG800), les donnees techniques et les jalons perdent leur alignement en colonne : la charte n'a pas de monospace. Visible surtout dans le configurateur et le recapitulatif. 4. TYPOGRAPHIE FLUIDE. La charte est fixe, R-System est en clamp(). Les titres ne retrecissent plus continument entre le telephone et le grand ecran ; ils changent de palier, ou pas du tout. Cet arbitrage-la reste ouvert cote Marketing dans le design system lui-meme. 5. DEUX NIVEAUX DE GRIS SUR FOND SOMBRE. La charte n'en a qu'un, calibre sur du blanc. --fg-soft et --fg-mute rendent donc la meme couleur sur les sections sombres, et la hierarchie repose sur la taille et la graisse. Trou de token reel, signale au design system. 6. ROUGE D'ERREUR SUR FOND SOMBRE. Meme probleme : le rouge de la charte fait 2.4 sur le marine. Le fond d'erreur joue le role du texte, faute de mieux. Trou de token reel. ========================================================================== */