/* ============================================================================= Charte de l'Efrei — pack client clients/efrei/ (docs/PACK-CLIENT.md). Servie sur /client/theme.css et chargée APRÈS public/style.css, dont elle ne redéfinit que des variables de :root : la structure de l'interface reste celle du moteur. Relevée en direct sur efrei.fr le 16/09/2026 (styles calculés et feuille du thème) : --bleuFonce #163767 (texte, titres), --rose #ff43b8 (bouton principal), --bleuClair #3653a0 (liens et actions), --gris2 #f7f9fc (fond de page), --gris3 #edf1f7 (surfaces), filets #16376733, rayon 10px dominant (5px pour les petits éléments), pas d'ombre, interligne 1,2, sur-titres en majuscules sans interlettrage large, en-tête de 89px (88 ici, multiple de 8). CONTRASTES — tous calculés (WCAG 2, rapport de luminance), aucun estimé ; le verrou est dans test/ui.test.js de ce pack. Seuil AA du texte : 4,5:1. Aucun état ACTIF n'est sous le seuil. Le bouton principal reprend le couple exact du site (.btn-primary.rose) : fond #ff43b8 et texte #051832, soit 5,70:1 — arbitrage d'Arthur du 16/09/2026, après mesure du blanc sur ce rose (3,11:1). Seule nuance assumée : au SURVOL, le site garde son texte sombre sur #da0088 (3,67:1) ; nous y passons au blanc (4,84:1), le couple de couleurs restant le sien. État DÉSACTIVÉ du bouton d'envoi (opacité 0,6 posée par le moteur sur .btn:disabled ; depuis la barre à icônes du 28/09/2026, l'icône d'envoi est remplacée par « Stop » pendant une réponse et ne s'affiche désactivée qu'avant le chargement du pack, sous --composeur-envoi-texte-desactive) : le rose composé sur le blanc du composeur donne #ff8ed4, sous le texte sombre composé #697484, soit 2,27:1 (la palette par défaut du moteur y atteint 3,14:1). Calculé et écrit comme les autres ; ce n'est pas un manquement, WCAG 1.4.3 exempte les composants inactifs. La limite du bouton n'atteint pas 3:1 sur le fond de page (rose sur #f7f9fc : 2,95:1) : le bouton porte son texte et sa forme, ce n'est pas un repère d'information au sens de WCAG 1.4.11. Tout le reste est au-dessus des seuils : texte 11,21:1 (--encre sur le fond de page), liens 7,24:1 sur blanc, sur-titres 11,82:1, anneau de focus 3,33:1 au pire des trois fonds où il se pose. ============================================================================= */ /* Gilroy : police commerciale du site, à activer uniquement par l'école, qui en détient la licence. Déposer ses fichiers dans clients/efrei/fonts/ (servis sur /client/fonts/, jamais versionnés), puis décommenter. Les piles --font-texte et --font-titre ci-dessous la nomment déjà en premier ; Jost, substitut libre, est servie par le moteur. @font-face { font-family: "Gilroy"; font-style: normal; font-weight: 400; font-display: swap; src: url("/client/fonts/Gilroy-Regular.woff2") format("woff2"); } @font-face { font-family: "Gilroy"; font-style: normal; font-weight: 600; font-display: swap; src: url("/client/fonts/Gilroy-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Gilroy"; font-style: normal; font-weight: 800; font-display: swap; src: url("/client/fonts/Gilroy-ExtraBold.woff2") format("woff2"); } */ :root { /* ---- Couleurs de marque ------------------------------------------------- */ --primaire: #3653a0; /* --bleuClair : action et liens ; 7,24:1 sur blanc, 6,86:1 sur --fond-page */ --primaire-actif: #163767; /* --bleuFonce : état actif ; 11,82:1 sous texte blanc */ --secondaire: #163767; /* --bleuFonce : hiérarchie, sur-titres, survol des liens ; 11,82:1 sur blanc */ /* --rose : anneau sur fond sombre (--focus-invert, 3,80:1 sur --encre) et, dans l'administration, deux marqueurs non textuels toujours doublés d'un texte — pastille « non enregistré » (3,11:1 sur blanc) et barre de la ligne modifiée (2,69:1 sur --teinte-tertiaire, sous 3:1). */ --tertiaire: #ff43b8; /* --bleuClair : étiquette « type » ; 6,38:1 sur sa teinte. --bleuTresClair #337ab6 du site écarté à ce poste : 4,03:1 sur --teinte-quaternaire, sous le seuil AA. */ --quaternaire: #3653a0; --encre: #163767; /* --bleuFonce : texte de base (11,21:1 sur --fond-page), bulle utilisateur (blanc à 11,82:1) */ --fond-page: #f7f9fc; /* --gris2 */ --divider: #16376733; /* filet du site : --bleuFonce à 20 % ; décoratif, le filet porteur reste --border-strong */ /* ---- Teintes de fond et filets dérivés de la charte ---------------------- */ --teinte-secondaire: #edf1f7; /* --gris3 : bulle assistant ; --encre à 10,43:1 dessus */ --teinte-primaire: #ebeef6; /* bleu clair à 10 % : surlignage de source, badge accent (6,24:1), ligne choisie */ --teinte-tertiaire: #ffe8f7; /* rose à 12 % : ligne modifiée non enregistrée ; --encre à 10,21:1 */ --teinte-quaternaire: #edf1f7; /* --gris3 : fond de l'étiquette « Type » */ --accent-border: #c3cbe3; /* bleu clair à 30 % : filet du badge accent */ --secondaire-filet: #d3d9ea; /* bleu clair à 22 % : filet du badge secondaire */ /* ---- Anneau de focus ---------------------------------------------------- Le rose de la charte, assombri de 10 % : l'anneau se pose sur trois fonds (blanc des surfaces 3,78:1, --fond-page 3,58:1, bulle assistant 3,33:1) et doit atteindre 3:1 sur chacun. Le rose du site s'y arrête à 3,11 / 2,95 / 2,75:1 ; il reste employé tel quel là où Arthur l'a tranché (le bouton principal) et sur fond sombre, où il passe (--tertiaire, 3,80:1). */ --focus: #e63ca6; /* ---- Bouton principal --------------------------------------------------- Le rose du site TEL QUEL (décision d'Arthur du 16/09/2026), sous le texte sombre que le site pose lui-même dessus : #051832, soit 5,70:1, au-dessus du seuil AA de 4,5:1. Le relevé est sans ambiguïté — le site ne pose JAMAIS de blanc sur son rose — si bien que la fidélité et l'accessibilité vont ici dans le même sens : le pack ne porte aucune exception de contraste dans ses états actifs (arbitrage d'Arthur du 16/09/2026, après mesure du blanc à 3,11:1). Pour mémoire, le bouton principal de base du site est le bleu foncé #163767 sous blanc (11,82:1), le rose n'y étant que la flèche. Survol : #da0088, la valeur que le site nomme lui-même (.btn-primary.rose :hover). Le site y garde son texte sombre, qui n'y tient plus que 3,67:1 ; nous passons au blanc pour ce seul état (4,84:1), par --bouton-primaire- texte-survol. Le couple de couleurs reste celui du site, et le contraste MONTE à l'interaction. Actif : le site n'en nomme aucun, d'où le rose assombri de 30 % (#b32f81, 5,77:1 sous le même blanc). */ --bouton-primaire-fond: #ff43b8; /* --rose du thème, 5,70:1 sous --bouton-primaire-texte */ --bouton-primaire-texte: #051832; /* texte sombre du site, comme .btn-primary.rose */ --bouton-primaire-texte-survol: var(--blanc); /* survol et actif : 4,84:1 et 5,77:1 */ --bouton-primaire-survol: #da0088; /* survol nommé par le site ; 4,84:1 sous texte blanc */ --bouton-primaire-actif: #b32f81; /* 5,77:1 sous texte blanc */ /* ---- Forme des boutons : rectangle arrondi du site, sans capitale -------- */ --bouton-radius: 10px; --bouton-padding: 12px 20px; --bouton-fs: 0.875rem; /* 14px */ --bouton-casse: none; --bouton-ls: normal; /* ---- Barre de saisie à icônes (ui.composerIcons, décision d'Arthur du 28/09/2026) L'icône d'envoi prend la place du bouton « Envoyer » : même rose, même texte sombre (5,70:1), même survol blanc sur #da0088 (4,84:1), même rectangle arrondi de 10px. Le micro garde les règles du moteur : icône à la couleur du texte, --accent au survol et au focus. */ --composeur-envoi-fond: var(--bouton-primaire-fond); --composeur-envoi-texte: var(--bouton-primaire-texte); --composeur-envoi-fond-survol: var(--bouton-primaire-survol); --composeur-envoi-texte-survol: var(--bouton-primaire-texte-survol); --composeur-envoi-rayon: var(--bouton-radius); --composeur-envoi-texte-desactive: var(--bouton-primaire-texte); /* ---- Rayons et ombres --------------------------------------------------- 10px domine le site : c'est déjà la valeur du moteur (--radius), rien à redéfinir. 5px pour les petits éléments (champs, étiquettes, bandeaux). Les pilules restent aux badges et aux pastilles (--radius-pill, 6 occurrences sur le site). Le site ne porte pratiquement aucune ombre : on les retire. */ --radius-xs: 5px; --shadow: none; /* ---- Libellés : sur-titres en majuscules, sans interlettrage large ; titres d'affichage sans capitale (le site ne met en majuscules que ses sur-titres) */ --casse-surtitre: uppercase; --ls-surtitre: normal; --casse-display: none; --ls-display: normal; /* ---- En-tête et interlignage du site ------------------------------------ En-tête de 88px AU-DESSUS DE 768px (89px relevés, ramenés au multiple de 8 de l'échelle d'espacement). Sous 768px, l'en-tête garde les 60px du moteur : --header-h-mobile n'est pas redéfini, le relevé ne portant que sur le site en écran large. Interligne 1,2 : c'est l'interligne calculé du du site, non celui de ses paragraphes (sa feuille pose 1,5em sur son texte courant). Il ne touche donc que le chrome ; tout texte qui peut courir sur plusieurs lignes garde son interlignage dans le moteur (.msg__body et .card__detail à 1,5, .admin-help à 1,6, .table td à 1,4). Un pack ne généralise pas ce 1,2. */ --header-h: 88px; --interligne: 1.2; /* ---- Typographie : Gilroy si l'école l'installe, sinon Jost ------------- */ --font-texte: "Gilroy", Jost, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-titre: "Gilroy", Jost, system-ui, -apple-system, Arial, sans-serif; /* ---- Logotype texte (logo.svg, 84 × 28) --------------------------------- */ --logo-hauteur: 28px; --logo-hauteur-mobile: 24px; /* ---- Chevron des listes déroulantes : trait de la couleur de --encre (%23163767) */ --chevron-liste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23163767' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.75 6 6.25l5-4.5'/%3E%3C/svg%3E"); }