/* ================================================================== CHARTE — les valeurs figées du CRM AE2M ================================================================== La source de vérité visuelle. Toute valeur d'apparence se lit ici : une couleur, une taille, un espacement, un rayon, une ombre. Trois règles tiennent ce fichier : 1. **Rien n'est inventé.** Chaque valeur vient du code existant. Les huit premières couleurs sont celles que `crm.css` déclarait déjà et qui servaient 379 fois ; les échelles sont tirées des valeurs les plus employées, relevées dans docs/audit-ui.md. 2. **Ce fichier ne s'applique pas tout seul.** Il n'est volontairement pas encore chargé par `base.html` : le brancher, puis reprendre les pages une à une, est un chantier séparé. Tant qu'il n'est pas lié, il ne change rien à l'écran. 3. **Il vient APRÈS `crm.css`** le jour où on le branchera. Les huit couleurs d'origine y sont redéclarées à l'identique : le chargement est donc sans effet visible, et le `:root` de `crm.css` pourra disparaître ensuite sans rien casser. Ce qui reste à trancher par Alexandre est signalé par un TODO, et n'est pas écrit ici : une valeur non décidée n'a pas sa place dans une source de vérité. Voir docs/charte-ui.md pour les règles d'usage. ------------------------------------------------------------------ */ :root { /* -- COULEURS : les huit d'origine, inchangées -------------------- Reprises telles quelles de crm.css. Les renommer aurait coûté 379 remplacements pour aucun gain. */ --navy: #22315C; /* barre latérale, titres, texte fort */ --mut: #677695; /* texte secondaire — assombri pour passer le seuil */ --line: #E3E8F2; /* bordures, séparateurs */ --orange: #C65215; /* accent de marque */ --red: #C23434; /* erreur, perte, suppression */ --green: #13875D; /* réussite, marge */ --cyan: #1F809A; /* information, en cours */ --bg: #F1F4FA; /* fond de page */ /* -- COULEURS : nommées ici, déjà employées en dur ailleurs ------- Aucune n'est nouvelle : chacune existe déjà dans le code, sans nom. */ --txt: #1B2440; /* couleur du body — et déjà appelée var(--txt) par trois gabarits, sans jamais être déclarée */ --txt-2: #48557A; /* texte courant sur carte — contraste 7,35 */ --txt-3: #65739A; /* texte tertiaire — contraste 4,70, le plus pâle qui reste lisible */ --carte: #FFFFFF; /* fond des cartes */ --selection: #EEF2FF;/* l'élément courant : le dossier ouvert dans la boîte mail, le message lu, la colonne du jour dans l'agenda. Trois écrans l'écrivaient en dur, à la même valeur, sans savoir qu'ils disaient la même chose. */ --fond-2: #F8FAFD; /* le gris pâle du survol et des zones de saisie. Deux valeurs le disaient — #F8FAFD (10 emplois) et #F7F8FB (8) — écartées de deux points sur chaque canal, donc indiscernables à l'œil et distinctes pour le code. Une seule reste. */ --survol: #7A8BDC; /* bordure au survol, motif de la page Fournisseurs */ /* -- ÉTATS -------------------------------------------------------- Six sens, un seul jeu. Les valeurs viennent de `.pill`, la famille la mieux contrastée et la plus employée des trois qui coexistaient (.pill, .tag, .chip). **Trois encres sur cinq étaient sous le seuil AA.** Elles avaient été reprises telles quelles à l'audit, sans être mesurées sur leur propre fond — le contrôle de lisibilité n'avait porté que sur les huit couleurs de base. Chacune est descendue à teinte et saturation constantes jusqu'à 4,5, comme l'avait été `--mut` : neutre #65739A → #606D92 4,15 → 4,53 info #1B7E99 → #197790 4,10 → 4,51 attente #C4551A → #B85018 4,07 → 4,52 Les deux autres passaient déjà et ne bougent pas. Ces cinq paires habillent chaque pastille de statut du CRM : le changement se voit partout, et c'est voulu. */ --etat-neutre-fond: #EEF1F8; --etat-neutre-texte: #606D92; --etat-info-fond: #E2F3F8; --etat-info-texte: #197790; --etat-succes-fond: #E3F6EF; --etat-succes-texte: #117852; --etat-attente-fond: #FFF1E6; --etat-attente-texte: #B85018; --etat-alerte-fond: #FDE7E7; --etat-alerte-texte: #C23434; /* -- L'AGENDA ------------------------------------------------------ Le calendrier portait une famille de violets qui n'existait nulle part ailleurs dans le CRM : sept teintes écrites en dur dans son gabarit, un huitième accent qui contredisait la charte. Elle est ramenée sur **la teinte de l'état « information »** — 193°, celle de la pastille « Demande de devis ». Un rendez-vous est une information, pas une alerte ni une réussite : il parle la même langue que le reste du CRM. La transposition garde les rôles et les écarts de lecture plutôt que les valeurs : l'objet d'un rendez-vous reste nettement plus appuyé que le nom du client sous lui. Chaque encre a été descendue jusqu'à passer le seuil AA sur son fond — le secondaire, qui était à 4,20 et donc sous le seuil, y passe au passage. objet sur son bloc 7,42 → 7,05 client, lieu 4,20 → 4,51 (était sous le seuil) journée entière 8,63 → 4,51 */ --rdv-fond: #B8E2EE; /* le bloc d'un rendez-vous */ --rdv-texte: #104A5A; /* son objet */ --rdv-bord: #1F809A; /* son liseré gauche — le cyan de la charte */ --rdv-second: #16697F; /* le client, le lieu, sous l'objet */ --rdv-journee: #E2F3F8; /* un événement sur la journée entière — le fond exact de la pastille */ --rdv-journee-t: #197790; /* La colonne d'aujourd'hui emploie `--selection`, ci-dessous : c'est la même intention — l'élément où l'on est. */ --grille-heure: #EEF0F4; /* le filet horaire d'une journée */ --grille-actif: #E3E9FA; /* le même, sur la colonne d'aujourd'hui */ --fond-actif: #F6F8FF; /* le fond de la colonne d'aujourd'hui */ /* La recette garde ses hachures : une fiche de test doit se voir de loin, et un aplat de plus se confondrait avec un statut métier. */ --etat-recette-fond: repeating-linear-gradient(135deg, #FDE7E7, #FDE7E7 4px, #FBD9D9 4px, #FBD9D9 8px); /* Un ton sous `--red` : sur la bande sombre de ses hachures, le rouge de la charte tombait à 4,18. Le fond n'est pas un aplat, donc le contrôle des cinq autres paires ne l'avait pas vue. */ --etat-recette-texte: #B83131; /* -- TYPOGRAPHIE -------------------------------------------------- Une seule pile, celle de crm.css. La seconde déclaration du projet — avec 'Helvetica Neue' — disparaît : deux piles pour une intention donnaient deux rendus selon la page. */ --police: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --police-chiffres: ui-monospace, monospace; /* Sept tailles, là où le code en comptait 43. Les trois premières portent l'essentiel : 11px (36 emplois), 10px (36), 12px (33). Les décimales — 10,1 à 11,8 — s'y rangent. */ --t1: 9px; /* pastilles, mentions */ --t2: 10px; /* libellés, colonnes de tableau */ --t3: 11px; /* texte secondaire */ --t4: 12px; /* texte courant */ --t5: 13px; /* sous-titres */ --t6: 15px; /* titres de carte */ --t7: 18px; /* titre de page */ --t8: 22px; /* le chiffre d'en-tête d'une fiche — le montant d'un devis, le total d'un client. Une huitième taille : elle existait déjà dans le code, sans nom. */ --gras-normal: 600; --gras-fort: 800; /* la seule graisse d'emphase du CRM */ /* -- ESPACEMENTS -------------------------------------------------- Tirés des fréquences : 12px (81 emplois), 10px (40), 6px (39), 8px (37), 14px (34). */ --e1: 4px; --e2: 6px; --e3: 8px; --e4: 10px; --e5: 12px; /* le pas par défaut */ --e6: 14px; /* le retrait intérieur d'une carte */ --e7: 20px; /* -- RAYONS ------------------------------------------------------- Quatre, là où le code en comptait 18. 15px (26 emplois), 8px (20), 12px (13), 4px (5). Les 9 et 10 se replient sur 8 et 12 ; les 3, 5 et 6 sur 4 ; le 13 sur 12. */ --r1: 4px; /* champs, petits boutons */ --r2: 8px; /* boutons, pastilles */ --r3: 12px; /* cartes, vignettes */ --r4: 15px; /* conteneurs de tête */ --rond: 50%; /* avatars */ /* -- OMBRES ------------------------------------------------------- Deux, là où le code en comptait sept. */ --ombre-repos: 0 1px 2px rgba(20, 30, 60, .04); --ombre-survol: 0 6px 18px rgba(20, 30, 60, .08); /* -- STRUCTURE ---------------------------------------------------- Les largeurs de la coque, relevées dans crm.css et app.css. */ --barre-laterale: 238px; /* Le CRM descend jusqu'à la tablette et au portable en fenêtre réduite. Le téléphone n'est pas une cible : la saisie lourde — chiffrage, imports, rapprochements — demande de la largeur. En dessous du plancher, la mise en page tient quand même, elle n'est simplement pas conçue pour. */ --page-mini: 768px; --rail: 56px; /* la barre latérale réduite à ses icônes */ --seuil-rail: 1000px; /* en dessous, les libellés du menu s'effacent */ --seuil-tiroir: 768px; /* en dessous, le menu passe derrière un bouton */ --vignette-mini: 250px; /* la maille de la grille de la page Fournisseurs, prise comme cap */ /* La barre des pages ouvertes. Ses dimensions vivent ici et non dans la feuille du composant : c'est un élément de coque, présent sur les cinquante-huit écrans, au même titre que la barre latérale. La hauteur de la barre est **réservée en permanence**, même sans onglet : le contenu ne doit jamais sauter quand elle se remplit ou se vide. */ --ong-hauteur: 34px; --ong-item-hauteur: 24px; --ong-croix: 18px; /* cible cliquable confortable */ --ong-item-large: 180px; /* au-delà, le libellé est tronqué */ } /* ================================================================== TODO — ce qui attend une décision d'Alexandre, et n'est donc pas ici ================================================================== 9. VIGNETTES OU TABLEAUX sur les listes. La charte propose vignettes pour les référentiels, tableau pour les flux. À confirmer. ------------------------------------------------------------------ */