/* Charte graphique Ediware — feuille partagee par les quatre pages de reference. Voir CHARTE.md a la racine du depot, et la note Obsidian systeme-de-design-ediware. Les valeurs de cette feuille sont mesurees, pas choisies : chaque seuil porte en commentaire la serie qui l'a fixe. */ /* R8 : fontes auto-hebergees, aucune requete tierce. Une page qui argumente "hebergement en France" ne va pas chercher sa typographie chez Google. */ @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fontes/jetbrains-mono-500.woff2) format("woff2")} /* ⚠️ ONEST REMPLACE RUBIK, ET LE MOTIF N'EST PAS TYPOGRAPHIQUE. Sur le dessin, les deux sont indiscernables : le directeur artistique les a notees 13,0 toutes les deux a l'aveugle, et ma mesure d'ecart au flou -- 14,6 -- ne mesurait pas la lettre mais la derive de chasse, un temoin decale de 3 px rendant 13,68. Le motif est une CHASSE plus etroite de 4 %, et son effet est mesure : le H1 de l'accueil tient sur TROIS lignes au lieu de quatre a 390, 375, 360 et 320 px, tout ce qui suit remonte de 35 px, et l'adresse `203.0.113.42` passe entierement au-dessus du pli mobile la ou Rubik la coupait (y 842-860 pour un pli a 844). C'est l'objet dont le DA dit qu'il est le seul du site qu'un concurrent ne peut pas copier ; il est desormais visible sans defiler. ⚠️ CE GAIN EST CONTINGENT AU TEXTE, PAS UNE PROPRIETE DE LA FONTE. La ligne la plus longue mesure 349 px dans 350 a 390 px de large. Un mot ajoute au H1 et on repasse a quatre lignes. A remesurer si le titre change. L'alternative gratuite proposee -- `letter-spacing:-0.01em` sur le H1 mobile -- ne reproduit RIEN : Rubik reste a quatre lignes a -0,01 comme a -0,015em, verifie aux quatre largeurs. UN SEUL FICHIER : Onest est variable, Google sert le meme woff2 pour 600 et 700. Deux declarations pointant deux fichiers auraient telecharge deux fois le meme. */ @font-face{font-family:"Onest";font-style:normal;font-weight:600 700;font-display:swap;src:url(fontes/onest.woff2) format("woff2-variations"),url(fontes/onest.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fontes/inter-400.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fontes/inter-500.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fontes/inter-600.woff2) format("woff2")} :root{ --bleu:#0072C9; --bleu-encre:#005597; --bleu-profond:#004376; --bleu-clair:#0094FF; --bleu-voile:#F3F5FA; --accent:#FF4300; /* --- Action : l'orange de marque assombri, libelle BLANC -------------------- Le libelle reste blanc : le bouton secondaire et le bouton inverse portent une encre, un CTA a encre sombre serait le seul a ne ressembler a rien d'autre sur la page. Decision du commanditaire. Du blanc impose donc un orange plus foncé, et #D43600 est LE PLUS CLAIR qui tienne la reserve de 4,8:1. Il est a L* 47,8, soit PLUS CLAIR que --bleu (47,3) : l'action redevient plus lumineuse que la marque. Ce n'est pas une invention : c'est #FF4300 assombri d'un facteur 0,66 en lumiere lineaire, comme le survol en est l'assombrissement suivant. */ --action:#D43600; /* fond de CTA, libelle blanc. 4,853:1, reserve +0,353 */ --action-survol:#CA3300; /* le survol ASSOMBRIT : l'encre est claire. 5,270:1 */ --action-actif:#B73000; /* palette, 1,9 %. 6,111:1 */ --ambre:#FFBF00; --encre-titre:#1A1A2E; --encre:#242525; --encre-douce:#5A6472; --fond:#FFFFFF; --fond-alt:#F4F6F8; --filet:#DDE3EA; --bordure-composant:#858FA0; --neutre-1:#B8C4D4; --neutre-2:#8A9CB1; --gris-logo:#505050; --focus:#0072C9; --focus-inverse:#FFFFFF; --succes:#0B6B43; /* 6,57:1 sur blanc, 6,06:1 sur --fond-alt */ --erreur:#B3261E; /* 6,54:1 sur blanc */ --alerte:#7A5200; /* 6,92:1 sur blanc */ /* 58ch, et le commentaire est de nouveau vrai. A 68ch la mesure rendait une mediane de 86 signes, un maximum de 98, et 41 lignes sur 51 au-dessus de 75 -- que la charte interdit nommement. La cause etait une confusion d'unite : le ch est la largeur du zero, et il vaut 1,388 fois le signe moyen d'une phrase francaise en Inter. 68ch offraient donc une capacite de ~94 signes. Mesure a 58ch : mediane 73, p90 78. */ --mesure:58ch; /* longueur de ligne, 65 a 75 signes */ --succes-clair:#86E8B6; /* indicateur d'etat sur aplat bleu. 3,35:1 sur --bleu */ --rayon-s:4px; --rayon-m:8px; --ombre-s:0 1px 2px rgba(16,24,40,.06); --ombre-m:0 4px 12px rgba(16,24,40,.10); --police-titre:Onest,Arial,sans-serif; --police-corps:Inter,Arial,sans-serif; --police-donnee:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --conteneur:1200px; --h1:64px; --visuel:400px; } *{box-sizing:border-box;margin:0} body{font-family:var(--police-corps);color:var(--encre);background:var(--fond);font-size:16px;line-height:1.6} .conteneur{max-width:var(--conteneur);margin:0 auto;padding:0 20px} a{color:var(--bleu-encre);text-underline-offset:2px} a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* --focus rend 1,00:1 sur --bleu : le meme bleu de part et d'autre. --focus-inverse etait declare et employe zero fois. Il sert sur les deux aplats de marque et sur le bouton inverse, qui y vit. */ .chiffres a:focus-visible,.cloture a:focus-visible,.btn-inv:focus-visible{ outline-color:var(--focus-inverse)} /* ⚠️ h4 EST DANS CETTE LISTE, ET SON ABSENCE A COUTE. La feuille ne declarait aucune regle h4 : le corpus en emploie pourtant 106 dans 21 fichiers. Ils rendaient donc en Inter 18/700 sur --encre, c'est-a-dire EXACTEMENT le paragraphe en gras -- meme fonte, meme corps, meme encre, marges nulles. Une page annoncant quatre niveaux en rendait trois, et rien ne le signalait. Le defaut etait ancien ; je l'ai aggrave en descendant deux titres en h4 pour corriger une capitale qui tenait lieu de niveau. Deplacer une faute n'est pas la reparer. */ h1,h2,h3,h4{font-family:var(--police-titre);color:var(--encre-titre);letter-spacing:-.014em} h2{font-size:28px;font-weight:700;line-height:1.3;color:var(--bleu-encre);margin-bottom:12px} h3{font-size:22px;font-weight:600;line-height:1.35;margin-bottom:8px} h4{font-size:18px;font-weight:600;line-height:1.4;margin-bottom:8px} section{padding:96px 0} /* var(--mesure) et non un litteral : .intro et .chapo figeaient 68ch et ont donc echappe au passage a 58ch. Les deux paragraphes les plus lus du site gardaient l'ancienne mesure -- 772 px et 81 signes sur .chapo -- pendant que le reste descendait a 659. La garde des jetons ne voit pas un litteral. */ .intro{max-width:var(--mesure);color:var(--encre-douce);margin-bottom:48px} .bandeau{background:var(--bleu-voile);color:var(--encre);font-size:14px;padding:10px 0; border-bottom:1px solid var(--filet)} .bandeau .conteneur{display:flex;gap:32px;align-items:center} /* SELECTEUR DE LANGUE. Quatrieme item du bandeau, pousse au fil droit. ⚠️ AUCUNE ENCRE, AUCUN CORPS, AUCUNE GRAISSE NEUVE : `a{}` donne deja `--bleu-encre`, `.bandeau a` donne Inter 500 sans soulignement, `.bandeau a:hover` donne le soulignement au survol. La seule declaration neuve est la position. Le bleu plutot que `--encre-douce` : au flou de 3,2 px le gris s'evanouit -- 112,73 de distance au fond contre 134,11 pour le bleu, soit 19 % de moins. La feuille a deja ecrit l'argument : la teinte est le seul signal qui survive au flou. */ .bandeau-langue{margin-left:auto;flex:0 0 auto;white-space:nowrap} .bandeau-langue .lg-court{display:none} /* 340 et non 480, c'est une mesure : « English » fait 48,6 px et tient des 340, « Français » 56,9 px et tient des 336. Sous ce seuil le bandeau passe a deux lignes (37,4 -> 59,8) ET le numero de telephone se coupe en deux -- un defaut plus grave que l'abreviation. Un seul seuil couvre les deux sens. */ @media(max-width:339px){ .bandeau-langue .lg-long{display:none} .bandeau-langue .lg-court{display:inline} } /* ⚠️ LE BANDEAU ETAIT LE SEUL CHROME DU SITE A NE PAS ANNULER LE SOULIGNEMENT. Neuf composants de chrome -- `nav a`, `.sous-menu a`, `footer a`, `.fil a`, `.sommaire a`, `.som-aside a`, `.cocon-aside a`, `.module a`, `.btn` -- posent tous `text-decoration:none` au repos, et CINQ ajoutent le soulignement AU SURVOL. Le bandeau affichait donc en permanence l'etat que la maison reserve au survol, et n'avait plus rien a donner au survol : 0 pixel modifie, mesure sur quatre pages. Ce n'est pas un ecart de gout, c'est une inversion de systeme, en tete de 17 pages. ⚠️ ET LE BLEU RESTE, PARCE QUE LA MESURE DIT DE LE GARDER. Au flou de 3,2 px, l'encre neutre est PLUS saillante que le bleu -- 66,77 de distance au fond contre 56,55. Retirer la couleur alourdirait le bandeau au lieu de l'alleger, et priverait le lien du seul signal qui lui survive au flou : la teinte, +28,92 de B-R sans le soulignement. Un chemin d'acces qui ne se signale plus n'en est pas un. ⚠️ LA DECLARATION DE COULEUR QUI VIVAIT ICI ETAIT MORTE. `.bandeau a{color: var(--bleu-encre)}` recalculait exactement ce que `a{}` ligne 55 donne deja : zero pixel produit. Le bleu de ce lien n'a jamais ete une decision, et son soulignement venait de la feuille du navigateur, pas d'une regle du projet. Le regime pose ici est celui de `.module a` (lignes 2308-2309), au mot pres. */ /* ⚠️ 500, ET C'EST LA DECLARATION QUE J'AVAIS OUBLIEE. En reprenant le regime de `.module a` j'en ai pris UNE SUR QUATRE : la source s'ecrit `font-size:16px; font-weight:500;color:var(--bleu-encre);text-decoration:none`, et ce sont les trois autres qui font qu'un bleu sans trait tient debout. Mesure sur l'accueil : 13 liens bleus au repos, DOUZE portent un renfort -- graisse 500 pour neuf, soulignement pour trois, filet pour deux -- et UN SEUL n'en portait aucun, celui-ci, en 400. Consequence : dans sa propre barre, ce qui est cliquable rendait 55,88 de densite d'encre contre 67,05 pour les mentions passives voisines, SOIT 16,7 % DE MOINS. Le soulignement permanent compensait ; il est parti, la compensation n'avait pas suivi. 500 est aussi la graisse des deux autres mentions du bandeau : le lien rejoint le registre de sa barre au lieu d'y etre le seul objet leger. */ .bandeau a{text-decoration:none;font-weight:500} /* Le telephone et l'email deviennent cliquables SANS devenir bleus : `color:inherit` annule la regle globale `a{}` de la ligne 55. Ils gardent leur chasse fixe et leur encre de mention ; seul le curseur et le survol les signalent. C'est ce qui permet de poser `format-detection:telephone=no` sans perdre l'appel au doigt. */ .bandeau .conteneur>span:nth-child(-n+2) a{color:inherit;font-weight:inherit} .bandeau a:hover{text-decoration:underline} header{border-bottom:1px solid var(--filet);padding:18px 0;position:sticky;top:0;background:#fff;z-index:10} @media(max-width:1023px){ /* S4 : en-tete collant de 160 px a 480-1023 px et 218 px a 320 px, soit 24,1 % puis 30,9 % du premier ecran consommes en permanence. Sous 1024 px l'en-tete defile avec la page. */ header{position:static} } header .conteneur{display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{flex:none} .logo{display:block;height:34px;width:auto} footer .logo{height:30px;margin-bottom:14px} nav{display:flex;gap:26px;font-size:16px;font-weight:500} nav a{color:var(--encre);text-decoration:none} /* Les cinq liens de la navigation principale n'avaient AUCUNE regle de survol : 0 pixel modifie sur 7 488 au passage de la souris. La charte l'interdit nommement. */ nav a:hover{color:var(--bleu-encre)} /* LE MENU DEROULANT, ET POURQUOI IL ARRIVE SI TARD. Les quatre maquettes portaient `