/* ============================================================================ Charte graphique LAVANDA Group v1.0 — surcouche du thème Filament (HEAD_END, sans build). Couleurs : Violet Lavanda #472B49, Greige #F2EEEA, Étain #8A8078 (« aucun autre coloris »). Polices : Fraunces (titres), Jost (corps et chiffres), servies par l'ERP (public/fonts), sans service externe. Thèmes clair (champagne) et sombre (bordeaux profond) gérés séparément. ============================================================================ */ @font-face { font-family: 'Fraunces'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Fraunces-400.ttf') format('truetype'); } @font-face { font-family: 'Fraunces'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Fraunces-500.ttf') format('truetype'); } @font-face { font-family: 'Jost'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/Jost-300.ttf') format('truetype'); } @font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Jost-400.ttf') format('truetype'); } :root { --cc-bordeaux: #472B49; --cc-bordeaux-2: #5B3D5E; --cc-champagne: #F2EEEA; --cc-sable: #C9B2C0; --cc-cream: #FFFFFF; --cc-bg: #F2EEEA; --cc-line: #D5CDC6; --cc-ink: #472B49; --cc-ink-muted: #6E655E; /* ------------------------------------------------------------------------ LES RÔLES FONCTIONNELS — promus le 20/09/2026, un rôle = UNE valeur. ------------------------------------------------------------------------ ⚠️ ILS ÉTAIENT ÉCRITS EN DUR DANS LES ÉCRANS, ET DEUX D'ENTRE EUX AVAIENT DÉJÀ DOUBLÉ. Mesure du 20/09 : 41 teintes distinctes dans les vues pour 9 jetons de charte, et le MÊME rôle peint de deux façons — un rouge sur les six écrans, un AUTRE rouge dans le thème de courriel ; un vert ici, un autre là. Les deux intrus venaient du thème de courriel écrit le matin même : une seconde paire inventée au lieu de reprendre celle des écrans. Corrigé, et ces jetons sont ce qui empêche que cela recommence. ⚠️ Les valeurs fautives ne sont pas recopiées ici : un essai verrouille la palette, et une teinte écrite dans un commentaire la ferait rougir pour rien — la même leçon qu'une directive Blade citée dans un commentaire. ⚠️ CE NE SONT PAS DES COULEURS DE MARQUE. Les trois de la maison — bordeaux, champagne, sable — sont VERROUILLÉES et vivent au-dessus. Ceux-ci disent un ÉTAT : ce qui alerte, ce qui va bien, ce qui attend, ce qui informe, ce qui s'efface. ⚠️ TROIS RÔLES ANNONCÉS PAR LE PLAN NE SONT PAS ICI — `--cc-card-bg`, `--cc-card-bg-2` et `--cc-rail`. Leur valeur ne se lit nulle part dans le code : les fonds de carte viennent des classes de Filament, pas d'une teinte écrite. Les inventer aurait été poser une décision de charte sous couvert de nettoyage. Ils s'ajouteront le jour où un écran en aura besoin. */ --cc-muted: #8A8078; /* le texte qui s'efface, les libellés secondaires */ --cc-red: #8C3A34; /* ce qui alerte : retard, écart, refus */ --cc-green: #3B6D56; /* ce qui va bien : payé, à jour, conforme */ --cc-amber: #A6642E; /* ce qui attend : en cours, à surveiller */ --cc-blue: #4A5470; /* ce qui informe, sans jugement */ /* LA VALORISATION, promue le 20/09/2026, et ce n'etait PAS un role nouveau. Cette teinte vivait deja en deux endroits, avec DEUX valeurs : #6E655E sur la pastille et le lien de valorisation de l'ecran Societes, #8A8078 sur le dernier point de la courbe de capitalisation du Cockpit. Un role, deux valeurs : exactement ce que la regle interdit. La fondre dans --cc-amber aurait dit qu'une valorisation ATTEND quelque chose, ce qui est faux : c'est un chiffre qu'on veut voir, pas un etat a surveiller. Elle est donc nommee. ⚠️ Basalte n'a pas ce role : il ne suit pas de participations. Rien a aligner, c'etait une decision de charte, et elle est prise. */ --cc-bronze: #6E655E; /* ce qui vaut : valorisation, capitalisation, le chiffre qu'on veut voir */ } /* ---- Typographie de base ---- */ .fi-body { font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } /* Titres en Fraunces (titres uniquement) */ .fi-header-heading, /* ⚠️ LE TITRE DES ECRANS SIMPLES MANQUAIT A CETTE LISTE (24/09/2026). La connexion et le deuxieme facteur portent `.fi-simple-header-heading`, que personne n'avait nommee : ces ecrans-la sortaient dans la police du corps, c'est-a-dire la police du CORPS sur un titre. */ .fi-simple-header-heading, .fi-section-header-heading, .fi-modal-heading, .fi-ta-header-heading { font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important; font-weight: 500 !important; letter-spacing: .004em; } /* Chiffres : tabulaires partout, en Jost (la charte n'admet que deux polices) */ table, .fi-ta, .fi-ta-cell, td, th, .tabular-nums, .fi-wi-stats-overview-stat-value, .fi-in-numeric input { font-variant-numeric: tabular-nums lining-nums !important; } [class*="cc-"][class*="__val"], [class*="cc-"][class*="__num"], [class*="cc-"][class*="__cur"], [class*="cc-"][class*="__mur"], [class*="cc-"][class*="__sum"], [class*="cc-"][class*="__days"], .cc-row__num, .cc-pill--pct, .cc-pill--cur, .cc-chip b { font-family: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-variant-numeric: tabular-nums lining-nums !important; } /* ---- Barre latérale bordeaux (thèmes clair ET sombre) ---- */ .fi-sidebar, .fi-sidebar-nav, .fi-sidebar-header, .fi-sidebar-footer { background-color: var(--cc-bordeaux) !important; border-color: rgba(255, 255, 255, .06) !important; } .fi-sidebar .fi-sidebar-item-label, .fi-sidebar-group-label { color: #DDD6CF !important; } .fi-sidebar .fi-sidebar-item-icon { color: var(--cc-sable) !important; } /* Survol : bordeaux plus clair, libellé champagne, icône sable (jamais le fond champagne/or par défaut de Filament) */ .fi-sidebar .fi-sidebar-item-btn:hover { background-color: #5B3D5E !important; } .fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #F2EEEA !important; } .fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: #E4DCDF !important; } /* Item actif */ .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn, .fi-sidebar .fi-sidebar-item.fi-active a, .fi-sidebar a[aria-current="page"] { background-color: var(--cc-bordeaux-2) !important; } .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar a[aria-current="page"] .fi-sidebar-item-label { color: #F2EEEA !important; font-weight: 600 !important; } .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon, .fi-sidebar a[aria-current="page"] .fi-sidebar-item-icon { color: #E4DCDF !important; } /* ---- Menu horizontal (topNavigation) ---- Le bandeau est déjà bordeaux : on transpose ici la logique de la barre latérale, qui reste servie sur mobile derrière le bouton d'ouverture. */ .fi-topbar-nav-groups { gap: .15rem !important; } .fi-topbar-item-btn { border-radius: .6rem !important; padding: .45rem .75rem !important; transition: background-color .15s ease !important; } .fi-topbar-item-label { color: #DDD6CF !important; font-weight: 500 !important; white-space: nowrap !important; } /* `.fi-topbar svg` est plus spécifique : sans le préfixe, cette règle ne s'appliquerait jamais et l'icône resterait champagne pâle. */ .fi-topbar .fi-topbar-item-icon, .fi-topbar .fi-topbar-group-toggle-icon { color: var(--cc-sable) !important; } /* Survol : bordeaux plus clair, libellé champagne, icône or. */ .fi-topbar-item-btn:hover { background-color: var(--cc-bordeaux-2) !important; } .fi-topbar-item-btn:hover .fi-topbar-item-label { color: #F2EEEA !important; } .fi-topbar-item-btn:hover .fi-topbar-item-icon, .fi-topbar-item-btn:hover .fi-topbar-group-toggle-icon { color: #E4DCDF !important; } /* Module courant : le fond suffit à le désigner, sans souligné. */ .fi-topbar-item.fi-active .fi-topbar-item-btn { background-color: var(--cc-bordeaux-2) !important; } .fi-topbar-item.fi-active .fi-topbar-item-label { color: #F2EEEA !important; font-weight: 600 !important; } .fi-topbar-item.fi-active .fi-topbar-item-icon { color: #E4DCDF !important; } /* Écrans étroits : Filament n'affiche la barre horizontale qu'au-delà de 1024 px et la fait passer à la ligne si elle déborde. On resserre les items entre 1024 et 1200 px pour qu'elle tienne sur une seule ligne dès qu'elle est visible. */ @media (min-width: 64rem) and (max-width: 75rem) { .fi-topbar-item-btn { padding: .4rem .45rem !important; gap: .35rem !important; } .fi-topbar-item-label { font-size: .8125rem !important; } .fi-topbar .fi-topbar-item-icon { width: 1.1rem !important; height: 1.1rem !important; } } /* Logo : jamais coupé, cadré. L'avatar est exclu : c'est aussi un du bandeau, et « width: auto » le rendait ovale (largeur libre + border-radius 50% = ellipse). */ .fi-topbar img:not(.fi-avatar), .fi-sidebar-header img:not(.fi-avatar), img.fi-logo { width: auto !important; object-fit: contain !important; } .fi-topbar { min-height: 4rem !important; } /* Avatar : cercle strict, quelle que soit la source de l'image. */ .fi-avatar { aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: 9999px !important; flex: none !important; } /* ============================================================================ THÈME CLAIR — fond et surfaces en champagne ============================================================================ */ /* Le FOND DE PAGE porte le champagne lui aussi (Matthieu, 2026-08-06) : une seule surface continue. Il etait a --cc-bg (#F2EEEA), six points plus clair que les blocs, ce qui dessinait une rainure claire dans chaque espace entre eux - visible surtout entre le compte de resultat et le bilan. Les sections ne se distinguent donc plus que par leurs intitules : c'est assume, le mode dense ayant deja supprime les cadres. La variable --cc-bg reste definie, sans emploi, pour revenir en arriere d'un seul mot. */ html:not(.dark) .fi-main-ctn, html:not(.dark) .fi-main { background-color: var(--cc-champagne) !important; } /* le bandeau supérieur est traité en bordeaux plus bas (les 2 thèmes) */ /* Les surfaces portent le CHAMPAGNE, et non plus le creme (#FFFFFF) qui, si pale, se lisait comme du blanc et cassait la chaleur de la charte (demande de Matthieu, 2026-08-06). La variable --cc-champagne n'est PAS modifiee : elle sert aussi au TEXTE pose sur le bandeau bordeaux et sur l'ecran de connexion, ou la toucher rendrait les libelles illisibles. Seule la regle qui peint les surfaces change. */ html:not(.dark) .fi-section, html:not(.dark) .fi-wi-stats-overview-stat, html:not(.dark) .fi-ta-ctn, html:not(.dark) .fi-dropdown-panel { background-color: var(--cc-champagne) !important; border-color: var(--cc-line) !important; } /* ============================================================================ BANDEAU SUPÉRIEUR — bordeaux, contenu champagne ============================================================================ */ /* Bandeau supérieur bordeaux (les deux thèmes), contenu clair — cohérent avec la barre latérale */ .fi-topbar, .fi-topbar > nav { background-color: var(--cc-bordeaux) !important; border-bottom: 1px solid rgba(242, 238, 234, .1) !important; } /* ⚠️ Les menus déroulants ouverts depuis la barre (roue des paramètres, avatar) sont des ENFANTS de `.fi-topbar` dans le DOM, mais s'affichent sur un panneau crème. Sans l'exclusion ci-dessous, leur texte et leurs icônes héritaient du champagne de la barre et devenaient illisibles. `:where()` porte l'exclusion sans en modifier la spécificité. */ .fi-topbar :is(a, button, .fi-link, .fi-btn):not(:where(.fi-dropdown-panel, .fi-dropdown-panel *)) { color: var(--cc-champagne) !important; } .fi-topbar svg:not(:where(.fi-dropdown-panel, .fi-dropdown-panel *)) { color: rgba(242, 238, 234, .72) !important; } .fi-topbar :is(input, .fi-input):not(:where(.fi-dropdown-panel *)) { color: var(--cc-champagne) !important; background: transparent !important; } .fi-topbar .fi-input-wrp { background-color: rgba(242, 238, 234, .08) !important; border-color: rgba(242, 238, 234, .2) !important; box-shadow: none !important; } .fi-topbar .fi-input-wrp * { background-color: transparent !important; } .fi-topbar ::placeholder { color: rgba(242, 238, 234, .55) !important; } /* Disque champagne sur bandeau bordeaux : le contraste suffit, pas de cerclage. */ .fi-topbar .fi-avatar { border: 0 !important; } /* SÉLECTEUR DE DOSSIER du panneau comptable (`/compta`). Filament pose `color: var(--gray-950)` DIRECTEMENT sur le libellé du dossier. Une déclaration directe l'emporte toujours sur une valeur HÉRITÉE, fût-elle `!important` : le champagne posé plus haut sur le bouton ne descendait donc pas jusqu'au texte. Sur la barre bordeaux, cela donnait un contraste mesuré de 1,21 pour 1 - illisible. Il faut viser le texte lui-même. ⚠️ Même exclusion que les autres règles de la barre : dans le PANNEAU déroulant, qui s'affiche sur crème, les noms doivent rester sombres. */ .fi-topbar :is(.fi-tenant-menu-trigger-text, .fi-tenant-menu-trigger-tenant-name):not(:where(.fi-dropdown-panel, .fi-dropdown-panel *)) { color: var(--cc-champagne) !important; } /* ⚠️ Et le survol avec : Filament l'éclaire en `--gray-100`, qui vaut le champagne dans notre palette. Texte champagne sur fond champagne aurait simplement déplacé le défaut au survol. */ .fi-topbar .fi-tenant-menu-trigger:hover, .fi-topbar .fi-tenant-menu-trigger:focus-visible { background-color: var(--cc-bordeaux-2) !important; } /* ============================================================================ ÉCRANS SIMPLES (connexion, double authentification, mot de passe) Fond bordeaux + carte sombre translucide, lion et titres en champagne. ============================================================================ */ /* ⚠️ CET ECRAN A ETE REFAIT LE 24/09/2026, ET C'EST MATTHIEU QUI L'A DIT : « il y a une espece de halo lumineux bizarre qui est sous un bloc extremement moche », « il est moche », et « j'ai des bords blancs en haut et en bas ». Trois defauts, trois causes distinctes. 1. LE HALO etait un degrade radial pose a 50 % 0 %, et il portait DEUX teintes qui n'existent dans aucune page de la charte. La charte verrouille trois couleurs, « pas une de plus » : un degrade qui en invente deux n'est pas une nuance, c'est une infraction. Le fond redevient un aplat bordeaux. 2. LE BLOC ETAIT SOMBRE SUR FOND SOMBRE. La charte dit du champagne qu'il est le « fond principal » et les « zones de respiration », et fixe la repartition a 45 % bordeaux / 45 % champagne / 10 % sable. L'ecran etait bordeaux a 97 % : la proportion n'etait atteinte sur aucun des trois. La carte devient donc CHAMPAGNE, et c'est aussi la structure de l'ecran du cabinet - carte claire posee sur un fond sombre - reprise ici avec les couleurs de cette maison-ci. Effet de bord heureux : le bouton principal etait peint en bordeaux SUR DU BORDEAUX, donc invisible. Sur une carte champagne, il se voit sans qu'on ait rien a lui faire. 3. LES BORDS BLANCS ne venaient pas de l'ecran mais de l'element `html`, reste au creme du panneau : iOS peint les zones de depassement avec CETTE couleur-la, pas avec celle du bloc. Meme defaut, meme correctif que chez le cabinet le 06/09. ⚠️ ET IL MANQUE ENCORE UNE IMAGE DE FOND. Le cabinet en a une, et c'est ce qui fait dire a Matthieu que son ecran est « beaucoup plus design ». Coste n'en possede AUCUNE : ses elements graphiques ne contiennent que le lion, le logo et les icones. Le choix lui revient ; tant qu'il n'est pas fait, l'aplat bordeaux tient la page proprement. */ /* Les zones hors du document prennent la couleur de `html`, pas celle du bloc : sans cette ligne, le creme du panneau deborde en haut et en bas sur un telephone. */ html:has(.fi-simple-layout) { background: var(--cc-bordeaux) !important; overscroll-behavior: none; } .fi-simple-layout { background: var(--cc-bordeaux) !important; /* `dvh` en second : sur iOS, `vh` compte la barre d'adresse retractee et laisse un vide. */ min-height: 100vh; min-height: 100dvh; } .fi-simple-main-ctn { background: transparent !important; } /* LA CARTE, GREIGE SUR L'APLAT VIOLET (charte LAVANDA v1.0) : « ombres, dégradés, textures : interdits », « pas d'arrondis marqués ». Un filet d'étain fin, l'angle presque droit. */ .fi-simple-main { background: var(--cc-champagne) !important; border: 1px solid #8A8078 !important; border-radius: 2px !important; box-shadow: none !important; } /* Sur telephone, Filament colle la carte aux deux bords et ne lui donne d'angles qu'a partir de 640 px : elle se lisait comme une bande, pas comme une carte. */ @media (max-width: 639px) { .fi-simple-main-ctn { padding-left: 20px !important; padding-right: 20px !important; } } /* Le texte de la carte est a l'encre de la marque. La portee reste limitee a `.fi-simple-page-content` : la modale de Filament est un FRERE de ce conteneur, et une regle plus large l'avait deja rendue illisible une fois. */ .fi-simple-page-content :is(h1, h2, h3, h4, p, label, span, div, li, dt, dd) { color: var(--cc-ink) !important; } .fi-simple-page-content :is(.fi-section-header-description, .fi-fo-field-wrp-helper-text) { color: var(--cc-ink-muted) !important; } /* Liens en bordeaux, mais jamais un bouton : son libelle suit la couleur du composant. */ .fi-simple-page-content a:not(.fi-btn), .fi-simple-page-content .fi-link:not(.fi-btn) { color: var(--cc-bordeaux) !important; } .fi-simple-page-content :is(.fi-btn, .fi-badge) * { color: inherit !important; } /* Les champs restent BLANCS sur le champagne : la charte reserve le blanc aux « zones de contenu pur », et c'est ce qui fait qu'une zone de saisie se lit comme telle. */ .fi-simple-page-content .fi-input-wrp { background-color: #FFFFFF !important; border-color: var(--cc-sable) !important; box-shadow: none !important; } .fi-simple-page-content :is(.fi-input, input:not([type="checkbox"])) { background-color: transparent !important; color: var(--cc-ink) !important; } .fi-simple-page-content .fi-input-wrp:focus-within { border-color: var(--cc-sable) !important; box-shadow: 0 0 0 3px rgba(201, 178, 192, .30) !important; } /* ⚠️ L'ASTERISQUE DU CHAMP OBLIGATOIRE ETAIT LE ROUGE DE TAILWIND, pas celui de la maison. Le role « ce qui alerte » a UN jeton, et c'est celui-la. */ .fi-simple-page-content .fi-fo-field-label-required-mark { color: var(--cc-red) !important; } /* Le titre tient sur deux lignes a 375 px, et Bodoni supporte mal d'etre casse : on le resserre plutot que de le laisser deborder. */ @media (max-width: 639px) { .fi-simple-header-heading { font-size: 1.45rem !important; line-height: 1.25 !important; } } /* Emblème de marque agrandi sur les écrans simples. Ciblé sur .fi-logo UNIQUEMENT : la règle visait toutes les et écrasait le QR code d'enrôlement 2FA (12rem -> 3.2rem, soit ~51px : inscannable). */ /* LE LOGOTYPE VIOLET POSÉ SUR LA CARTE GREIGE (charte LAVANDA v1.0 : « Greige avec texte Violet, combinaison principale »). Les panneaux servent `logo.svg` (logotype serré sur son contenu) sur les écrans d'authentification, et la réserve greige sur la barre violette ailleurs. Aucun médaillon : la charte proscrit l'ornement. */ .fi-simple-page .fi-logo, .fi-simple-layout .fi-logo { height: 3.6rem !important; width: auto; margin-bottom: .75rem; } /* ------------------------------------------------------------------ */ /* Roue crantée des paramètres, dans la barre du haut. */ /* Mêmes teintes que les entrées de menu : icône sable, or au survol. */ /* ------------------------------------------------------------------ */ .fi-topbar .cc-roue { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem; border: 0; background: transparent; color: var(--cc-sable); cursor: pointer; transition: background-color .15s ease, color .15s ease; } .fi-topbar .cc-roue svg { width: 1.15rem; height: 1.15rem; } .fi-topbar .cc-roue:hover { background: var(--cc-bordeaux-2, #5B3D5E); color: var(--cc-sable); } .fi-topbar .cc-roue:focus-visible { outline: 2px solid var(--cc-sable); outline-offset: 2px; } /* ------------------------------------------------------------------ */ /* Icônes des menus déroulants. */ /* */ /* La palette `gray` du panneau est un SABLE, pas un gris : le */ /* `gray-400` dont Filament colore ses icônes vaut ici #8A8078, soit */ /* un contraste de 2,3 pour 1 sur le fond crème. Les icônes des menus */ /* paraissaient effacées. On les ramène à l'encre douce de la marque */ /* (#6E655E, environ 6,5 pour 1) et au bordeaux au survol. */ /* */ /* Sélecteur à trois classes pour passer devant celui de Filament */ /* (`.fi-dropdown-list-item .fi-icon`, deux classes) sans `!important`. */ /* ------------------------------------------------------------------ */ .fi-dropdown-list .fi-dropdown-list-item .fi-icon { color: var(--cc-ink-muted); } .fi-dropdown-list .fi-dropdown-list-item:hover .fi-icon, .fi-dropdown-list .fi-dropdown-list-item:focus-visible .fi-icon { color: var(--cc-bordeaux); } /* LE LOGOTYPE EMPILÉ (06/10/2026, demande de Lolitta) : « Group » en gras sous « LAVANDA ». La barre violette prend la version claire ; tout autre fond (connexion, code) garde le violet servi par le panneau. */ .fi-topbar img.fi-logo { content: url('../logo-reserve.svg'); }