/* La marque et le visage de l assistant, declares une seule fois. POURQUOI CE FICHIER EXISTE. Les deux marques etaient appelees par chemin d image dans cent vingt pages : en remplacer une demandait cent vingt modifications, et la centralisation se defaisait au lot suivant. Elles sont desormais declarees ici, et ici seulement. En remplacer une demande une modification, dans ce fichier. COMMENT ON REMPLACE. `--aff-marque` et `--aff-visage` portent un MASQUE. Toute valeur de masque convient : l image en ligne ci-dessous, ou `url("../img/.svg")` le jour ou la nouvelle identite arrive en fichier. La couleur ne vient pas du masque, elle vient de la surface : il n y a donc pas de variante claire et de variante sombre a maintenir. CE FICHIER EST LE MEME SUR LES SEPT RACINES, A L OCTET PRES. Deux proprietes distinctes, et `banc_marque_unique.py` fait tomber les deux : une seule declaration de chaque marque dans tout ce qui est servi, et pas une copie qui diverge. POURQUOI `!important`, ET CE N EST PAS DE LA PARESSE. Deux feuilles posent deja un fond en `!important` sur ces memes elements (`.ai-fab-ic` de Pro et de Smart), et `chatbot.css` est injectee par le widget APRES celle-ci, donc elle gagne a specificite egale. Sans `!important` le fond de la marque serait recouvert sur ces surfaces, sans un mot en console. UNE VARIABLE NON DEFINIE SUPPRIME LA REGLE ENTIERE. Chaque `var()` emprunte a la charte d accueil porte donc un repli, et les quatre variables propres a ce fichier sont definies juste en dessous. */ :root{ /* la marque : un bloc chanfreine, ouvert par un trait de coupe sur sa diagonale. Aucun animal, aucun nom : tous vont changer. */ --aff-marque:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.9 4.5 8 2.4H21.6V16L19.5 18.1Z M18.1 19.5 16 21.6H2.4V8L4.5 5.9Z'/%3E%3C/svg%3E"); /* le visage de l assistant : le meme trait de coupe, porte par un disque. Meme famille que la marque, role distinct. */ --aff-visage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.2375 4.0375A10.6 10.6 0 0 1 20.1625 18.7625Z M18.7625 20.1625A10.6 10.6 0 0 1 3.8375 5.2375Z'/%3E%3C/svg%3E"); /* L ENCRE ET LE SIGNAL VIENNENT DE LA SURFACE, PAS D ICI. Sur les vitrines `--ink-invert` et `--azure` existent ; sur les applications ce sont `--text` et `--accent`, qui basculent seuls entre theme clair et theme sombre ; sur la console d administration aucun des deux n existe et le repli s applique. Smart prend ainsi son teal, l administration son azur, sans un fichier de plus. */ /* --------------------------------------------------------------------------- LE NOM DU PRODUIT, DECLARE UNE SEULE FOIS. LE JOUR DU RENOMMAGE, UNE SEULE LIGNE CHANGE : celle qui suit ce commentaire. Rien d autre, sur aucune des sept racines. POURQUOI ELLE EXISTE. Le mot etait peint dans des bitmaps et ecrit en clair dans 225 blocs d identite. Il est desormais du texte, pose par la feuille. POURQUOI `content` ET PAS UN SCRIPT. Un script arrive apres la peinture : le nom apparaitrait en retard, une fois par page, et sur des surfaces qui ne chargent aucun script. `content` est resolu avec le reste du style. RESERVE ASSUMEE, ET ELLE EST REELLE : un texte pose par `content` n est pas selectionnable a la souris et n est pas dans le DOM. Les moteurs actuels le rendent a la synthese vocale, et chaque lien d identite porte son propre `aria-label` qui ne depend pas de lui. LE NIVEAU D OFFRE N EST PAS ICI, ET C EST VOULU. `Pro`, `Smart`, `MSP` disent quelle surface on regarde. Cette information ne change pas quand la marque change : elle est ecrite dans la page. */ --aff-nom:"Galyct"; --aff-encre:var(--ink-invert,var(--text,#EAF2FB)); --aff-signal:var(--azure,var(--accent,#3DA6E8)); } /* Le degrade a deux paliers durs est aligne sur le trait de coupe : la moitie basse gauche prend le signal, la moitie haute droite l encre. Une seule image de masque rend donc une marque a deux tons. Le degrade est ecrit ici et non dans une variable intermediaire : une variable qui en contient d autres les resout la ou elle est DECLAREE, et un `--aff-encre` redefini plus bas dans la page n aurait plus eu d effet. Mesure faite, defaut constate, corrige. */ .aff-marque,.aff-visage{ background:linear-gradient(45deg,var(--aff-signal) 0 49.5%,var(--aff-encre) 49.5% 100%)!important; -webkit-mask:var(--aff-marque) center/contain no-repeat!important; mask:var(--aff-marque) center/contain no-repeat!important; border-radius:0!important; box-shadow:none!important; filter:none!important; } .aff-visage{ -webkit-mask-image:var(--aff-visage)!important; mask-image:var(--aff-visage)!important; } /* Le pied des vitrines portait un logo large (206px de large, hauteur libre). La marque est carree : sans cette ligne elle y ferait 206 pixels de haut. */ .foot-brand img.aff-marque{width:auto!important;height:52px!important} /* Pages d erreur : le filigrane decoratif garde sa place et son opacite, a l echelle d une marque et non d une silhouette en pied. */ .bg .tete.aff-marque{width:min(20vw,220px)!important} /* Le nom, pose par la feuille. La balise est vide dans le HTML : c est ce qui fait qu il n y a qu un seul endroit ou le mot est ecrit. */ .aff-nom::after{content:var(--aff-nom)} /* LE NOM PREND LA MEME ENCRE QUE LA MARQUE. `--aff-encre` est deja definie plus haut dans cette feuille et sert au masque : nom et marque ne peuvent donc pas diverger d une surface a l autre. Herite, le nom sortait sombre sur fond sombre au format telephone ; mesure sur capture, defaut constate. */ .aff-nom{font-weight:700;letter-spacing:.015em;white-space:nowrap; color:var(--aff-encre); font-size:1.18rem;line-height:1;display:inline-block} /* La marque et le nom se touchaient : `.brand` est en `flex` sans `gap`. */ .brand .aff-nom,.gate-logo .aff-nom{margin-left:10px} .site-head .brand .aff-nom,.app-header .brand .aff-nom{ /* SA TAILLE SUIT LA FENETRE, SA PLACE NE CEDE PAS. 19 px sur un ecran large, jamais moins de 12 px, ou l on lit encore. Aucun seuil de largeur n est ecrit ici : un seuil est calibre pour un mot connu, et le mot pose ligne 63 peut changer. */ font-size:clamp(12px,3.2vw,19px); flex:0 0 auto;white-space:nowrap;overflow:visible} /* L ORDRE DE CESSION. Une premiere version laissait le nom se tronquer : a l ecran, une surface n affichait plus qu un « G » et une autre plus rien, pendant que la mesure rendait « peint ». Ce qui cede doit etre ce que la page dit DEUX FOIS. La pastille de niveau d offre est repetee par le titre et par l adresse ; le nom, lui, ne se lit qu ici, et le produit est en train d en changer. La pastille cede donc en premiere, la navigation ensuite. */ .site-head .brand .aff-niveau,.app-header .brand .aff-niveau{ flex:0 1 auto;min-width:0;overflow:hidden} .site-head .brand img,.app-header .brand img{flex:0 0 auto} .gate-logo .aff-nom{font-size:22px} .foot-brand .aff-nom{display:block;font-size:22px;margin:0 0 12px} /* La pastille de niveau : information fonctionnelle, pas identite. Elle prend la couleur de son voisinage (`currentColor`) et ne connait donc ni theme clair ni theme sombre a maintenir. */ .aff-niveau{display:inline-block;font-size:.60em;font-weight:600; letter-spacing:.1em;text-transform:uppercase;padding:.24em .52em; border:1px solid currentColor;border-radius:3px;opacity:.78; vertical-align:.22em;margin-left:.5em;line-height:1} .brand .aff-niveau,.gate-logo .aff-niveau{font-size:11px;vertical-align:2px} /* Le nom dans un document exporte : le gabarit d export n a pas cette feuille, la chaine y est posee par le script qui LIT la variable ci-dessus. */ .rd-nom{font-weight:700;letter-spacing:.04em;font-size:17px} /* --------------------------------------------------------------------------- ENTETE : CE QUE LE NOM NE DOIT PAS CHASSER. LE DEFAUT DE DEPART, MESURE ET NON SUPPOSE. Le nom en texte prend la place horizontale que l image de 42 px ne prenait pas : 60 px pour le mot, 10 px de marge, et de 39 a 59 px pour la pastille de niveau. La bande d en-tete est une rangee : cette place est prise A QUELQU UN, et c est l appel a l action qui l a rendue. Sur Smart, ce bouton est celui d une personne qui vient de se faire pirater. TROIS REPARATIONS ONT DEPLACE CE DEFAUT D UN CRAN CHACUNE AU LIEU DE LE FERMER. C est pour cela qu il ne reste plus, ci-dessous, un seul seuil de largeur qui depende du mot pose ligne 63 : 1. le nom passe en texte : sur telephone, le bouton d urgence de Smart est coupe ; 2. le nom se replie sous 480 px : a 1800, 1920 et 2560 px la rangee des vitrines passe a DEUX lignes, l appel a l action tombe en deuxieme rangee, et le banc de ce lot-la s arretait a 1440 px ; 3. et personne n a regarde les deux APPLICATIONS : les regles etaient ecrites « .site-head .wrap », jamais « .app-header », dans un fichier charge par les six surfaces et sous un commentaire qui promettait « quel que soit le mot pose ligne 63 ». CE QUE LA GRILLE A MESURE AVANT CE CORRECTIF. `banc_entete_grille.js`, releve `lot5/releves/avant-def.json`, 1080 cellules (6 surfaces x 20 largeurs de 320 a 2560 x 3 langues x 3 longueurs de nom) : 309 echecs, sur les SIX surfaces, dont 95 sur `app-pro` et 61 sur `app-smart`, que ne regardait aucun banc. Six, nommes : vitrine-pro 1440 px fr nom de 23 lettres : rangee de 105 px sur DEUX bandes, appel a l action en bande 2, a 203,8..372,2 console-msp 1920 px fr nom de 6 lettres : rangee de 104 px sur DEUX bandes, appel a l action a 494,9..676,7 vitrine-smart 320 px fr nom de 6 lettres : rangee de 97 px sur DEUX bandes, alors que le nom etait DEJA replie app-pro 320 px de nom de 6 lettres : le mode d emploi sort de 174,6 px du cadre app-pro 400 px de nom de 6 lettres : il sort de 94,6 px app-smart 768 px de nom de 23 lettres : il sort de 173,9 px POURQUOI IL N Y A PLUS UN SEUL SEUIL DE LARGEUR POUR LE NOM. Un seuil est un nombre mesure pour UN mot. « Zerval » fait 60 px dans cette bande ; un nom de 23 lettres en fait 237,8. Le jour du renommage, les seuils seraient devenus faux en silence, exactement comme le gabarit de l en-tete est devenu faux le jour ou le nom est passe en texte. Le bloc d identite replie donc ce qu il ne peut pas porter A LA PLACE REELLE, et non a une largeur ecrite d avance. COMMENT, EN TROIS DECLARATIONS ET SANS UNE LIGNE DE SCRIPT. Le bloc d identite devient une rangee qui peut passer a la ligne ; ses lignes sont ecartees de 240 px ; il est coupe a la hauteur de la marque. Tant que la marque, le nom et la pastille tiennent cote a cote, ils sont sur la premiere ligne et rien n est coupe. Des que le mot ne tient plus, il part sur la ligne suivante, qui commence 240 px plus bas, donc tres au-dela de la coupe : il DISPARAIT ENTIER. Les 240 px ne sont pas decoratifs. Sans eux, la deuxieme ligne commencerait juste sous la premiere et on verrait le haut des lettres depasser sous la marque : un nom coupe en deux au lieu d un nom replie. La coupe, elle, ne doit pas etre plus haute que la premiere ligne, sinon la bande GRANDIT quand le nom se replie : voir la regle 5. L ORDRE DE CE QUI CEDE A CHANGE, ET C EST ASSUME. Dans une rangee qui replie, c est le DERNIER element qui part. Le dernier du bloc d identite est la PASTILLE de niveau ; le nom part ensuite, et les deux partent d un coup quand le nom seul ne tient pas. L ancienne redaction faisait ceder le nom AVANT la pastille : cet ordre-la ne peut pas s obtenir sans un seuil de largeur, donc sans un nombre mesure pour un mot. Ce qui ne cede jamais n a pas change : l appel a l action, parce que c est le seul geste que la page demande, et la MARQUE, parce que c est l identite. Le banc verifie les deux, et il verifie en plus que la marque n est pas rognee par le repli. LE NOM N EST PAS PERDU QUAND IL SE REPLIE. Il reste dans le pied de page, dans le panneau de connexion et dans les documents exportes, qui ne sont pas des rangees contraintes. */ /* 1. L APPEL A L ACTION NE SE LAISSE NI COMPRIMER NI ROGNER. Sans cette ligne il est, avec le bouton de menu, le seul element de la rangee que le moteur peut retrecir : il est parti hors cadre pendant que le bloc d identite, lui, gardait sa taille entiere. */ .site-head .head-actions, .app-header .header-actions{flex:0 0 auto} /* 2. UN BOUTON D EN-TETE NE PASSE PAS A LA LIGNE. `vitrine-zerval` pose `.btn{white-space:normal;max-width:100%}` sous 620 px, pour un libelle long en pleine page, et cette regle est juste la ou elle a ete ecrite. Dans une bande de 64 px de haut, elle faisait passer « Parler a un expert » a trois lignes. La bande est nommee ; la pleine page n est pas touchee. */ .site-head .head-actions .btn{white-space:nowrap;max-width:none} /* 3. LE BOUTON DE MENU GARDE SA CIBLE TACTILE. Comprime par le meme debordement, il tombait de 44 px a 14 px de large et son trait de menu n etait plus dessine : le carre vide visible sur les captures du 02/09. ATTENTION EN RELECTURE : c est CE carre vide qui faisait tenir la rangee a 320 px sur la production d aujourd hui. Un bouton de menu inutilisable n est pas de la place gagnee. La ligne vaut pour les deux applications aussi : leur bouton de menu porte une autre classe, et il n etait pas protege. */ .site-head .burger, .app-header .nav-toggle{flex:0 0 auto} /* 4. LA NAVIGATION DE BUREAU NE SE COMPRIME PAS. Sans cette ligne, la place que le bloc d identite ne rend plus est prise a la navigation, dont les liens se rognent les uns apres les autres. Sous 1300 px elle est hors du flux (menu deroulant) et cette ligne n a plus d effet. */ .site-head nav{flex:0 0 auto;top:100%} /* 5. LE BLOC D IDENTITE EST LE SEUL QUI CEDE, ET IL CEDE A LA PLACE REELLE. C est le coeur de ce lot : voir l explication des 240 px plus haut. `min-width:0` est indispensable. Sans lui, la taille minimale automatique d un element flexible est sa taille de contenu minimale, et le nom est en `white-space:nowrap` : le bloc refuserait de descendre sous 237,8 px pour un nom de 23 lettres, et rien ne se replierait jamais. */ .site-head .brand, .app-header .brand{flex:0 1 auto;min-width:0; flex-wrap:nowrap;overflow:hidden} /* LA COUPE EST A LA HAUTEUR DE LA MARQUE, ET LES DEUX NOMBRES SONT MESURES. Une coupe plus haute que la premiere ligne fait GRANDIR la bande quand le nom se replie : mesure au rendu, l en-tete des applications passait de 71 a 77 px, et `--app-header-h` est ecrite en dur a 72 px dans la feuille des applications, qui s en sert pour decaler le contenu. Une bande qui grandit de 6 px passe donc sous le contenu. La marque fait 44 px dans les vitrines (`.site-head .brand img.brand-mark{height:44px}`, 36 px sous 560 px) et 42 px dans les applications (`.brand-logo{height:40px}` plus son filet). */ .site-head .brand{max-height:44px} .app-header .brand{max-height:42px} /* 6. LA RANGEE DES VITRINES NE PASSE PLUS A LA LIGNE. Le lot precedent lui avait donne `flex-wrap:wrap` comme garde-fou : « rien n est jamais pousse hors du cadre ». Le garde-fou s est declenche a 1800, 1920 et 2560 px et il a mis l appel a l action en deuxieme rangee. Un bouton entier sur une deuxieme ligne n est pas une reussite : sur une vitrine, ce bouton vit en haut a droite, et c est la que l oeil le cherche. LA HAUTEUR ETAIT ECRITE EN DUR A DEUX ENDROITS. `.wrap` etait haute de 64 px et le menu deroulant s ouvrait a 64 px du haut. Les deux restent relatives a la rangee reelle : c est sans effet tant qu elle tient sur une ligne, et c est ce qui evite qu un menu s ouvre par-dessus elle si elle ne tenait pas. */ .site-head .wrap{flex-wrap:nowrap;height:auto;min-height:64px} .site-head.aff-compact .wrap{height:auto;min-height:52px} /* 7. LE SELECTEUR D ECOSYSTEME QUITTE LA RANGEE, A TOUTES LES LARGEURS. CE N EST PAS UN ARBITRAGE DE GOUT, C EST UNE MESURE. La feuille de site le cache deja sous 1300 px, et le lot precedent le cachait jusqu a 1799 px : il n etait donc visible qu au-dessus de 1800 px. Or `.wrap` est plafonnee a 1320 px quelle que soit la largeur de l ecran : elargir l ecran ne donne pas un pixel de plus a la rangee. A 1920 px, `vitrine-pro` demande 159 px d identite, 380 px de selecteur, 630 px de navigation et 288 px d actions, soit 1457 px de contenu et 1569 px avec les ecarts, dans 1272 px utiles. Le selecteur n a donc JAMAIS tenu au-dessus de 1800 px, et la seule largeur ou il etait affiche est exactement celle ou il cassait la rangee. Les memes liens sont dans le pied de page a toutes les largeurs, et dans le menu deroulant sous 1300 px. CE QUI RENDRAIT LE SELECTEUR N EST PAS UNE DECISION DE MISE EN PAGE : c est de raccourcir les 630 px de navigation de `vitrine-pro`. */ .site-head .eco-switch{display:none} /* 8. LE MENU DEROULANT DU TELEPHONE ETAIT REVENU DANS LA RANGEE, ET PERSONNE NE POUVAIT LE VOIR. Sous 1300 px, la feuille de site sort le menu du flux (`position:absolute`) pour qu il s ouvre PAR-DESSUS la page. Une amelioration de bureau posee plus bas, `.site-head nav.aff-nav-guet{position:relative}`, hors de toute rupture, la defait sur les quatre vitrines : la classe est posee par `nav-affut.js` pour ancrer le trait de survol, qui n existe qu au bureau. Le menu ferme est haut d un pixel, donc invisible ; mais il est LARGE de 197 px, et ces 197 px etaient pris dans la rangee, a l appel a l action. Le trait de survol garde son ancrage la ou il sert : au-dessus de 1300 px. */ @media (max-width:1300px){ .site-head nav.aff-nav-guet{position:absolute} } /* 9. SOUS 400 PX, LA BANDE DES VITRINES RESSERRE SES MARGES ET SES ECARTS. A 320 px, la rangee de `vitrine-smart` porte 36 px de marque, 44 px de bouton de menu et 204,2 px d appel a l action : 284,2 px de contenu, plus trois ecarts. Le corps de la page garde ses 24 px de marge : seule la rangee de l en-tete est concernee, et elle est la seule qui ne peut pas passer a la ligne. Ces deux nombres ne dependent pas du mot pose ligne 63 : a cette largeur le nom est replie de toute facon, par la mesure et non par un seuil. */ @media (max-width:399px){ .site-head .wrap{padding-left:10px;padding-right:10px;gap:6px} } /* 10. LES APPLICATIONS : LA MARGE MOBILE ETAIT ECRITE, ET MORTE. La feuille des applications pose `@media (max-width:640px){.app-header{padding:12px 16px}}` a la ligne 568, puis `.app-header{padding:14px 30px}` a la ligne 3765, hors de toute rupture. La seconde gagne : elle est plus loin, a specificite egale. A 320 px, l en-tete gardait donc 60 px de marges laterales sur 320, soit 19 % de la largeur de l ecran, et la regle mobile n a jamais rien fait. Mesure au rendu, pas deduite du fichier : le bloc d identite commence a 70 px sur un ecran de 320. */ @media (max-width:640px){ .app-header{padding-left:16px;padding-right:16px} } /* 11. LES APPLICATIONS : L ORDRE DE CE QUI CEDE DANS LA RANGEE D ACTIONS. CES SEUILS-LA NE DEPENDENT PAS DU NOM, et c est pourquoi ils sont ecrits en largeurs : ils portent sur six objets dont aucun ne change quand le mot pose ligne 63 change. Ils dependent de la LANGUE, et ils sont donc calibres sur l allemand, qui est la plus longue des huit : `mode.cta_contact` fait « Kontakt aufnehmen », 166 px, contre 96 px pour « Nous contacter ». Mesure faite sur les huit dictionnaires, pas sur les trois du banc. - LE DECLENCHEUR DE RECHERCHE passe en icone des 900 px. La feuille des applications le fait deja sous 720 px ; a 768 px, `app-pro` en allemand sortait encore de 3 px une fois le bloc d identite replie. Son raccourci clavier n existe pas sur un telephone. - LE LIBELLE DE L APPEL A L ACTION passe en icone sous 700 px. Le bouton reste, sa cible reste, son icone reste. C est le seul element de la rangee dont la largeur double d une langue a l autre. - LE SELECTEUR DE PAYS quitte la rangee sous 430 px. - LE BOUTON D INSTALLATION quitte la rangee sous 360 px. Il est deja masque tant que le navigateur ne propose pas l installation. CE QUI NE QUITTE JAMAIS LA RANGEE, ET POURQUOI CE N EST PAS UN OUBLI : la marque, le mode d emploi, l appel a l action, et LE SELECTEUR DE LANGUE. Ce dernier est le SEUL endroit de l application ou la langue se change : `#lang-picker` de l en-tete est l unique occurrence dans les deux applications. Le masquer sur telephone rendrait les huit langues inatteignables a qui n a pas d ordinateur. Le pays, lui, est deduit et modifiable ailleurs ; c est pour cela qu il cede et que la langue non. CE QUE CELA COUTE, ET C EST UN ARBITRAGE A RELIRE : sous 700 px, l appel a l action de l en-tete n a plus de mots. Sur Smart, c est le bouton d une personne en difficulte. Le geste reste, l icone reste, le titre au survol reste ; le mot, non. */ @media (max-width:899px){ .app-header .cmdk-trigger span, .app-header .cmdk-trigger kbd{display:none} .app-header .cmdk-trigger{padding:8px} } @media (max-width:699px){ /* Le libelle de ce bouton est un noeud de texte NU, pose par `mode.js` a cote de son icone : il n a aucune balise a masquer. On annule donc la taille de police du bouton et on la rend a l icone, qui est un masque de 1 em. La valeur de repli est ecrite : une variable non definie supprime la regle entiere, sans un mot en console. */ .app-header .header-cta{font-size:0!important} .app-header .header-cta > i{font-size:var(--z-t3,14px)!important;margin-right:0} } @media (max-width:429px){ .app-header .ctry-picker{display:none!important} } @media (max-width:359px){ .app-header .header-install{display:none!important} } /* POURQUOI CES `!important`, ET SEULEMENT CEUX-LA. `systeme.css` ecrit `:root[data-theme="dark"] .app-header .header-cta` : quatre composants de specificite, contre deux ici. Sans le forcage, les regles ci-dessus sont ecrites, lues, et sans effet : mesure au rendu a 320 px, l appel a l action gardait son libelle allemand de 165 px et le bouton d installation restait affiche. Reprendre le prefixe `:root[data-theme="dark"]` aurait attache une regle de PLACE a un THEME, et ce fichier est charge par six surfaces dont quatre n ont pas de theme. */ /* 12. LA PASTILLE DE NIVEAU SORTAIT DE LA MEME COULEUR QUE SON FOND, ET ELLE PRENAIT QUAND MEME LA PLACE. Le nom, plus haut dans ce fichier, porte deja `color:var(--aff-encre)`. La pastille, elle, etait restee en `currentColor`. Mesure au rendu, `contraste.js`, en-tete a 1440 px : vitrine-smart pastille « Smart » rgb(23,26,31) sur rgb(23,26,31) 1,00:1 vitrine-pro pastille « Pro » rgb(44,107,127) sur rgb(23,26,31) 2,92:1 console-msp pastille « MSP » rgb(44,107,127) sur rgb(23,26,31) 2,92:1 le nom, lui 15,44:1 Sur Smart le mot n etait pas discret : il etait invisible, exactement de la couleur de la bande, et il occupait tout de meme 59 px de la rangee qui manquaient au bouton d urgence. `currentColor` reste juste partout ailleurs ; ici la pastille prend l encre de la marque, et son `opacity:.78` la garde discrete sans la faire disparaitre. */ .site-head .brand .aff-niveau, .app-header .brand .aff-niveau, .gate-logo .aff-niveau{color:var(--aff-encre)}