/* * Feuille du module comptable, servie par le package (FilamentAsset, cf. ComptaServiceProvider). * * Elle est ecrite en CSS PUR, a dessein : les panneaux Filament ne chargent pas de build Tailwind, et * leur feuille compilee ne contient que des classes « fi- » et des variables de couleur. Une classe * utilitaire (bg-amber-50...) posee depuis le package n'existerait donc nulle part, et ne peindrait * rien. On s'appuie sur les variables de la palette du panneau : la teinte suit la charte de l'hote, * quel que soit l'ERP du groupe. */ /* ⚠️ ORDRE DES LAYERS, A GARDER EN PREMIERE REGLE. Cette feuille est chargee AVANT le theme Filament : son bloc « @layer components » (menus de la barre) declarait donc « components » en PREMIER, ce qui inversait l'ordre global des layers du document - le layer « base » (preflight Tailwind, img { display:block }) se mettait a battre « components » (.fi-logo-dark { display:none }), d'ou le logo affiche DEUX fois sur l'ERP Coste Capital (2026-08-23). La premiere declaration fait foi pour tout le document : on fixe ici l'ordre canonique du theme. */ @layer properties, theme, base, components, utilities; /* * Ecriture en brouillon : elle se travaille dans les journaux, mais ne pese dans aucun rapport tant * qu'elle n'est pas validee (cf. Groupe\Compta\Services\EcrituresComptabilisees). La teinte ambree la * signale d'un coup d'oeil, sans la rendre illisible. * * Selecteur « tr.compta-brouillon » (et non « .compta-brouillon ») a dessein : il faut battre les * bandes alternees de la consultation (.bg-gray-50, meme specificite) sans dependre de l'ordre de * chargement des feuilles. Il reste sous le survol de Filament (.fi-ta-row.fi-clickable:hover), qui * doit continuer a repondre au pointeur. */ /* Le double selecteur « .fi-ta-row.compta-brouillon » (en plus de « tr.compta-brouillon » pour la consultation faite main) porte la specificite a (0,2,0) : elle EGALE le zebra Filament (.fi-ta-row.fi-striped) et le bat par l'ordre de chargement (cette feuille passe apres), donc un brouillon garde sa teinte ambree meme sur une ligne paire ; elle reste SOUS le survol (.fi-ta-row.fi-clickable:hover, (0,3,0)). */ tr.compta-brouillon, .fi-ta-row.compta-brouillon { background-color: color-mix(in oklab, var(--warning-500, #854F0B) 8%, transparent); } tr.compta-brouillon:where(.dark, .dark *), .fi-ta-row.compta-brouillon:where(.dark, .dark *) { background-color: color-mix(in oklab, var(--warning-400, #C08A2E) 14%, transparent); } /* Filet de couleur en bord de ligne : la teinte de fond seule se perd sur un ecran peu contraste. */ tr.compta-brouillon > :first-child { box-shadow: inset 3px 0 0 0 var(--warning-500, #854F0B); } /* Ligne CLIQUABLE (ecritures / pieces / journaux) : curseur main. Retour Lolitta : AUCUN changement de couleur au survol. Subtilite : Filament peint la bande zebra ET le survol avec la MEME couleur (var(--gray-50)) ; un simple « background: transparent » au survol EFFACAIT donc la bande sur les lignes paires (le bug signale sur les lignes foncees des ecritures). On ne neutralise donc le survol QUE la ou il changerait quelque chose : ligne ordinaire -> transparent ; ligne zebra -> on laisse le defaut Filament (gris = bande, donc aucun changement) ; ligne brouillon -> on re-impose sa teinte ambree. Le tableau fait-main (.compta-ligne-cliquable) n'a AUCUNE regle de survol : chaque ligne garde son fond (bande bg-gray-50 ou teinte brouillon) tel quel. */ .compta-ligne-cliquable { cursor: pointer; } /* Ligne Filament ordinaire (ni zebra ni brouillon) : le survol ne peint rien. */ .fi-panel-compta .fi-ta-row.fi-clickable:not(.fi-striped):not(.compta-brouillon):hover { background-color: transparent !important; } /* Brouillon : garde sa teinte ambree au survol (clair + sombre), sinon le survol Filament la recouvrirait. */ .fi-ta-row.compta-brouillon.fi-clickable:hover { background-color: color-mix(in oklab, var(--warning-500, #854F0B) 8%, transparent) !important; } .fi-ta-row.compta-brouillon.fi-clickable:where(.dark, .dark *):hover { background-color: color-mix(in oklab, var(--warning-400, #C08A2E) 14%, transparent) !important; } /* * Presentation homogene des tables du module, calquee sur l'ecran « Ecritures comptables » (page * ConsultationJournal, faite main) : recherche PAR COLONNE a plat (sans la loupe), sans recherche * globale, et lignes denses. Seules les COLONNES different d'un ecran a l'autre. CSS pur : les * panneaux ne chargent pas de build Tailwind, on style les classes « fi- » de Filament. * * ⚠️ CHAQUE regle DOIT etre prefixee .fi-panel-compta. Sans le prefixe, elle repeint le panneau * ADMIN : la recherche globale de TOUTES ses tables etait masquee, ses montants degauchis, sa * densite et son survol remplaces - fuite corrigee le 2026-08-23 (audit UI/UX). */ /* Recherche GLOBALE (barre du haut) masquee. IMPERATIF de cibler .fi-ta-header-toolbar : la recherche PAR COLONNE porte la MEME classe .fi-ta-search-field, la masquer seule la ferait disparaitre aussi. */ .fi-panel-compta .fi-ta-header-toolbar .fi-ta-search-field { display: none; } /* * Journaux : la barre d'outils (filtre + selecteur de colonnes) occupe sa PROPRE LIGNE, au-dessus des * en-tetes de colonnes. * * Elle etait auparavant SORTIE DU FLUX (position:absolute, top/right 0) pour venir se poser SUR la barre * grise des en-tetes et economiser une bande blanche. Le prix etait trop lourd : les icones tombaient sur * le texte de la derniere colonne (« Libelle »). Les masquer pour y remedier a prive 36 ecrans de leurs * filtres, dont le statut brouillon/valide signale par le comptable. On revient donc au flux normal de * Filament : une vraie ligne, mais discrete (fond transparent, sans bordure ni ombre), ce qui garde * l'essentiel du gain visuel sans aucun chevauchement. * * NE PAS repasser en position:absolute : c'est la cause de tout ce detour. Aucune regle flex posee sur * .fi-ta-header-toolbar depuis l'hote ne peut agir tant que la barre est hors du flux. * * La garde :not(:has(.fi-ta-row.fi-selected)) devient inutile : dans le flux, la barre ne peut plus * chevaucher l'indicateur « X selectionnes ». */ .fi-panel-compta .fi-ta-main:has(.fi-ta-individual-search-cell-montant-ht) .fi-ta-header-ctn { border: 0; background: transparent; } /* Hauteur de la bande : SEUL reglage a ajuster si elle parait trop serree ou trop haute. Le rembourrage du haut doit rester suffisant pour la pastille de comptage du filtre, qui deborde au-dessus de l'entonnoir et se retrouvait rognee par le bord arrondi de la carte. */ .fi-panel-compta .fi-ta-main:has(.fi-ta-individual-search-cell-montant-ht) .fi-ta-header-toolbar { justify-content: flex-end; align-items: center; min-height: 3.25rem; padding: 0.85rem 0.75rem 0.6rem; background: transparent; border: 0; box-shadow: none; } /* Recherche par colonne : champ A PLAT, SANS encadre ni loupe, comme les cases « jj/mm » de la consultation (le placeholder = le nom de la colonne, pose cote client par resources/js/compta.js). Au repos : ni bordure ni fond, juste le placeholder. Au focus : un fin liseré pour situer la saisie. */ .fi-panel-compta .fi-ta-individual-search-cell .fi-input-wrp-prefix { display: none; } .fi-panel-compta .fi-ta-individual-search-cell .fi-input-wrp { border-radius: 0.375rem; --tw-shadow: 0 0 #0000; box-shadow: none; background: transparent; } .fi-panel-compta .fi-ta-individual-search-cell .fi-input-wrp:focus-within { box-shadow: inset 0 0 0 1px var(--primary-500, #5c4a3d); } .fi-panel-compta .fi-ta-individual-search-cell .fi-input { font-size: 0.75rem; line-height: 1.1rem; padding-block: 0.15rem; padding-inline: 0.45rem; min-height: 0; font-weight: 400; } /* En-tetes de colonnes : meme identite que la table « Ecritures comptables » (page faite main), ou les en-tetes sont des (gras) en gris moyen a la taille du corps (text-sm). Les en-tetes Filament par defaut sont plus sombres et rendus par un bouton de tri ; on les ramene a la meme police pour une identite homogene sur tout le module (menu + barre de recherche calques sur la consultation). */ .fi-panel-compta .fi-ta-header-cell, .fi-panel-compta .fi-ta-header-cell-sort-btn { font-size: 0.875rem; font-weight: 700; color: var(--gray-500, #6b7280); } .fi-panel-compta .fi-ta-header-cell:where(.dark, .dark *), .fi-panel-compta .fi-ta-header-cell-sort-btn:where(.dark, .dark *) { color: var(--gray-400, #9ca3af); } /* Lignes denses : on RESSERRE le padding vertical autour du texte, en haut comme en bas (defaut ~1rem). Deux sources a traiter ensemble, sinon la ligne reste haute : le CONTENU des colonnes (texte / badge / montant) ET les cellules d'ACTIONS et de SELECTION dont le py-4, meme vides, gouvernent la hauteur de la ligne. Un seul reglage a ajuster si besoin : la valeur de padding-block. */ .fi-panel-compta .fi-ta-text, .fi-panel-compta .fi-ta-color, .fi-panel-compta .fi-ta-text-input, .fi-panel-compta .fi-ta-cell:has(.fi-ta-actions), .fi-panel-compta .fi-ta-cell:has(.fi-ta-record-checkbox) { padding-block: 0.2rem; } /* Toutes les colonnes alignees a GAUCHE, montants compris (l'ecran « Ecritures comptables » ne s'y applique pas : c'est une table faite main, sans ces classes « fi- »). */ .fi-panel-compta .fi-ta-cell .fi-align-end, .fi-panel-compta .fi-ta-header-cell .fi-align-end { justify-content: flex-start; text-align: left; } /* ------------------------------------------------------------------------------------------------ * Mises en page « visionneuse » sur les ecrans FAIT-MAIN (Ecritures comptables, tiroir facture banque). * En CSS PUR : le panneau ne compile pas les classes Tailwind arbitraires (xl:grid-cols-5, sm:w-[42vw]...), * qui restaient donc sans effet -> le volet tombait sous le tableau / le tiroir n'etait pas cadre. * ------------------------------------------------------------------------------------------------ */ /* Ecritures comptables : tableau (60 %) + volet justificatif (40 %), empiles sous 1280px. */ .compta-liste-visionneuse { display: block; } .compta-liste-visionneuse > * { min-width: 0; } .compta-liste-visionneuse > .compta-liste-volet { margin-top: 1rem; } @media (min-width: 1280px) { /* Volet a UN TIERS, table aux deux tiers. Troisieme reglage apres 40 % puis 25 % : c'est le seul chiffre a bouger ici, la table et le volet se partagent le reste automatiquement. Le volet ne fait qu'afficher un justificatif ; la table, elle, a sept colonnes a loger. */ .compta-liste-visionneuse { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; } .compta-liste-visionneuse > .compta-liste-volet { margin-top: 0; } } /* Journal de banque : tiroir « facture reglee » a la demande. Voile de fond + panneau fixe a droite (40 % au-dela de 640px, plein ecran en dessous). */ .compta-facture-overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .2); } .compta-facture-drawer { position: fixed; inset-block: 0; right: 0; z-index: 40; display: flex; flex-direction: column; width: 100%; overflow-y: auto; padding: 1rem; background: #fff; border-left: 1px solid #E8DFD0; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } @media (min-width: 640px) { .compta-facture-drawer { width: 42vw; } } .compta-facture-drawer:where(.dark, .dark *) { background: #111827; border-left-color: rgba(255, 255, 255, .1); } /* ------------------------------------------------------------------------------------------------ * Ecran « Ecritures comptables » : DENSITE, sur le modele du journal d'Odoo. * * Le tableau etait en largeur automatique, donc dicte par son contenu le plus long. Mesure sur les * 4 509 lignes de CP2O : references de piece jusqu'a 85 caracteres, libelles jusqu'a 190 (libelles * de releves bancaires importes tels quels). « Piece » portait `whitespace-nowrap` : ne pouvant se * replier, elle chassait les montants hors de l'ecran, pendant que « Libelle » se repliait sur cinq * ou six lignes. * * Deux corrections, et la premiere compte plus que la seconde : * * 1. MOINS DE COLONNES. « N° », « Journal » et « Piece » disaient la meme chose sous trois formes et * mangeaient un tiers de la largeur. Elles sont fondues en une seule, « Piece » (code du journal * + reference), qui porte aussi le lien vers l'ecriture. La place gagnee sert a « Partenaire », * qu'Odoo affiche et que nous n'avions pas. * 2. LARGEURS FIXES. `table-layout: fixed` : les valeurs ci-dessous sont respectees quel que soit le * contenu. Les colonnes de texte sont tronquees avec des points de suspension, et la vue pose un * `title` sur chacune — le texte entier reste au survol, rien n'est perdu. * * Les MONTANTS ne sont jamais comprimes : ce sont eux qu'on lit ici. Le libelle absorbe le reste. * Un seul reglage a toucher si une colonne parait etroite : sa largeur dans la liste ci-dessous. * ------------------------------------------------------------------------------------------------ */ .compta-table-ecritures { table-layout: fixed; width: 100%; } /* Colonnes de TEXTE : tronquees, jamais repliees. Le survol rend le contenu entier. */ .compta-table-ecritures td:nth-child(3), /* Piece */ .compta-table-ecritures td:nth-child(4), /* Compte */ .compta-table-ecritures td:nth-child(5) { /* Libelle */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* LARGEURS EN POURCENTAGES, dont la somme fait 100 % de la largeur REELLE. En `rem`, elles etaient absolues : leur total depassait la place disponible des que la visionneuse occupait 40 %, le tableau debordait, et « Credit » — la colonne qu'on vient lire — se retrouvait coupee. En pourcentages, rien ne peut plus sortir, quelle que soit la place. Un seul reglage a toucher si une colonne parait etroite : sa valeur ci-dessous, en reprenant le meme nombre de points a une autre. */ /* LARGEURS MESUREES DEUX FOIS : le contenu en base, PUIS son rendu reel dans un navigateur. La premiere mesure seule ne suffisait pas - je l'avais calculee a 13px alors que la table est en text-sm, soit 14px, et les trois colonnes se retrouvaient a la limite EXACTE, sans marge : Date « 01/01/2026 » 72,3 px = 5,02 rem gouttiere comprise (posee : 5,00 -> tronquee) Piece « BQ10/#4319 » 79,9 px = 5,49 rem (posee : 5,50 -> 0,01 de marge) Montant « 13 378 868,00 » 109,6 px = 7,35 rem (posee : 7,00 -> tronquee) D'ou une MARGE d'environ 10 % sur chacune : la police systeme n'a pas la meme chasse sur macOS et sur Windows, et une colonne calee au pixel pres chez l'un deborde chez l'autre. Ne pas les raboter. Contenu mesure en base (prod, tous dossiers) : - Date : « 01/01/2026 », 10 caracteres, invariable ; - Piece : « BQ10/#4319 ». Les journaux qui portent des ecritures ont tous un code de 4 caracteres ou moins - le seul code de 9 caracteres du plan (CCA-20-12) n'a aucune ecriture. On dimensionne donc sur le cas REEL, pas sur le pire cas theorique ; - Montants: le plus gros mouvement de toute la base fait « 13 378 868,00 », soit 13 caracteres. Ces quatre colonnes sont donc figees en rem : elles prennent CE DONT ELLES ONT BESOIN et pas un pixel de plus. Tout le reste va a Compte et Libelle, les deux seules colonnes dont le contenu deborde vraiment (jusqu'a 146 et 190 caracteres, donc tronquees). ATTENTION : ne PAS figer aussi Compte et Libelle en rem. C'est ce qui avait fait deborder la table hors de l'ecran (« Crédit » coupe en « Cré ») : quand toutes les colonnes sont en largeur fixe, leur somme peut depasser le conteneur. Ici deux colonnes restent souples et absorbent l'ecart. */ .compta-table-ecritures th:nth-child(1), .compta-table-ecritures td:nth-child(1) { width: 1.75rem; } /* case a cocher */ .compta-table-ecritures th:nth-child(2) { width: 5.5rem; } /* Date : mesure 5.02 rem */ .compta-table-ecritures th:nth-child(3) { width: 6rem; } /* Piece : mesure 5.49 rem */ .compta-table-ecritures th:nth-child(4) { width: 26%; } /* Compte : tronque */ /* 5 = Libelle : aucune largeur, il absorbe tout le reste. */ .compta-table-ecritures th:nth-child(6) { width: 8rem; } /* Debit : mesure 7.35 rem */ .compta-table-ecritures th:nth-child(7) { width: 8rem; } /* Credit : mesure 7.35 rem */ /* Lignes denses : on retire l'air vertical, comme sur le journal d'Odoo. */ .compta-table-ecritures td { padding-top: .2rem; padding-bottom: .2rem; } /* GOUTTIERE entre colonnes. Le mode dense avait retire tout rembourrage horizontal, si bien que la date venait coller la piece : « 01/01/2026OD/ra25 » se lit comme un chevauchement alors que ce sont deux cellules voisines sans separation. 0.5rem a droite suffit, et la derniere colonne n'en a pas besoin. La date reste insecable et ne DEBORDE plus : elle est tronquee comme les autres. */ .compta-table-ecritures th, .compta-table-ecritures td { padding-right: .5rem; } .compta-table-ecritures th:last-child, .compta-table-ecritures td:last-child { padding-right: 0; } .compta-table-ecritures td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Les montants ne doivent JAMAIS etre coupes : ils passent avant le confort des colonnes de texte. */ .compta-table-ecritures th:nth-child(6), .compta-table-ecritures td:nth-child(6), .compta-table-ecritures th:nth-child(7), .compta-table-ecritures td:nth-child(7) { white-space: nowrap; padding-left: .35rem; } /* ================================================================================================== * MODE DENSE - le module compta est un outil de PRODUCTION, pas une vitrine * ================================================================================================== * * Consigne de Matthieu (2026-08-03) : « on va supprimer l'ensemble des bords, des espaces... on sera * moins jolie mais plus optimise pour produire de la compta » - RENVERSEE le 2026-09-05 : * « harmoniser l'aspect visuel du module comptable sur le reste de l'ERP (arrondis, fond beige, * marge blanche...) ». L'habillage de la charte (basalte.css : fond calcaire #F4F1EC, cartes * blanches arrondies 16px, filet #E8DFD0, ombre douce, marges 1rem) s'applique donc DE NOUVEAU au * panneau compta : cette feuille ne le combat plus. Ce qui reste dense ici, parce que c'est de * l'outil et non du decor : les lignes et en-tetes de tableaux, les grilles de saisie, les largeurs * de colonnes, la barre d'outils en flux. * * PORTEE : tout est prefixe « .fi-panel-compta », la classe que Filament pose sur le du seul * panneau compta. Cette feuille etant servie sur TOUS les panneaux de l'hote, sans ce prefixe le * mode dense repeindrait aussi /admin et le portail - qui n'ont pas demande a l'etre. * * VALEURS : relevees dans la feuille compilee de Filament 5.6 (public/css/filament/filament/app.css), * pas devinees. Filament raisonne en multiples de --spacing (0.25rem) : les blocs sont a 8 (2rem), * les en-tetes de section a 6/4, les cellules d'en-tete a 3/3.5. */ /* --- L'ECORCE EST TOMBEE (2026-09-05) ------------------------------------------------------------- Ici vivaient le fond force en blanc, la suppression des cadres et des ombres, l'equarrissage universel des coins et les blocs colles (gap 0) de la « piste B ». Tout est retire : le decor de basalte.css (chargee APRES cette feuille, tout en !important) s'applique de nouveau tel quel - fond calcaire, cartes blanches arrondies, filets, ombres, respiration entre blocs. Ne RIEN reintroduire ici qui se batte contre la charte : la regle du duel (a specificite egale et !important des deux cotes, la DERNIERE feuille gagne) reste vraie, et elle donne l'hote gagnant. */ /* --- LA LARGEUR : PLEINE, SANS BORNE --------------------------------------------------------------- * Arbitrage de Matthieu apres essai : l'ecran doit occuper toute la largeur disponible. * * Une borne de lecture a 1120px avait ete essayee (regle « line-length-control ») pour supprimer le * vide entre une etiquette et son chiffre. Elle produisait un defaut pire que celui qu'elle corrigeait : * les EN-TETES de section, qui ne sont pas dans le conteneur de contenu, continuaient d'aller jusqu'au * bord tandis que les lignes s'arretaient au milieu. Le bord droit de la page partait en escalier. * * Ce qui reste pour tenir la lecture sans borner la largeur : les valeurs et les actions sont * regroupees dans une GOUTTIERE a droite (margin-left:auto sur .compta-rev-droite), de sorte que d'une * ligne a l'autre les chiffres s'alignent a la verticale. L'oeil descend une colonne au lieu de * traverser l'ecran ligne par ligne. */ /* Marges de page et en-tetes de section : plus aucune surcharge ici (harmonisation 2026-09-05). Le cadre unifie de l'hote (.fi-main padding-inline 1rem) et les en-tetes de section standard de la charte (Manrope, carte) s'appliquent, comme sur /admin. */ /* --- LES TABLEAUX -------------------------------------------------------------------------------- L'en-tete de colonne portait 3.5 x --spacing en vertical, la barre d'outils 4 a 6 en horizontal. Les lignes elles-memes sont deja resserrees plus haut dans cette feuille (bloc « Lignes denses »). */ .fi-panel-compta .fi-ta-header-cell { padding-block: .25rem; } .fi-panel-compta .fi-ta-header { padding-inline: .5rem; } /* --- LES FORMULAIRES ------------------------------------------------------------------------------ Une grille de saisie a 1.5rem entre les champs oblige a defiler sur un formulaire d'ecriture. SEUL ecart assume avec le « tout colle » : on garde 0.25rem ENTRE LES CHAMPS. A zero, le libelle d'un champ vient toucher la case du champ precedent et on ne sait plus lequel il annonce - ce n'est plus de la densite, c'est une erreur de lecture. Les BLOCS, eux, sont bien colles. ATTENTION au nom des classes : Filament v5 a remplace « fi-fo-component-ctn » par les classes de schema « fi-sc-* ». Un selecteur herite de la v4 ne peint plus rien, et rien ne le signale - c'est pour cela que chaque selecteur de ce bloc a ete confronte au HTML reellement rendu. */ .fi-panel-compta .fi-sc-has-gap, .fi-panel-compta .fi-sc-form { gap: .25rem; } /* --- LE COCKPIT : la ligne de revue, compacte ----------------------------------------------------- * Trois changements, dont deux structurels (la vue les porte, cf. cockpit-comptable.blade.php) : * * 1. le SOUS-TITRE remonte sur la ligne du titre au lieu d'occuper une seconde ligne. A lui seul il * rendait chaque ligne deux fois trop haute ; * 2. la PASTILLE d'icone de 44px disparait au profit d'une icone de 18px. Elle ne portait aucune * information que le libelle ne donnait deja ; * 3. le CHIFFRE passe de 24px a 14px. Sur cet ecran il compte, mais il ne raconte rien : c'est un * repere, pas un titre. * * Resultat mesure : la ligne passe de 95px a 38px, et le bloc « A reviser » de ~500px a ~190px. * Ecrit en CSS PUR et non en classes utilitaires : la compilation Tailwind de l'hote ne scanne pas * vendor/, une classe posee ici ne peindrait rien (cf. l'en-tete de cette feuille). */ .compta-rev-ligne { display: flex; align-items: center; gap: .6rem; height: 2.375rem; } .compta-rev-ico { width: 1.125rem; height: 1.125rem; flex: 0 0 1.125rem; color: #B08442; } .compta-rev-ico-eteinte { color: #C3BCB4; } .compta-rev-titre { font-weight: 600; font-size: .8125rem; } .compta-rev-sous { font-size: .75rem; color: #9A938B; } /* Les valeurs et les actions se regroupent a DROITE, en colonne de largeur fixe : d'une ligne a l'autre les chiffres s'alignent, et l'oeil descend au lieu de zigzaguer. */ .compta-rev-droite { margin-left: auto; display: flex; align-items: center; gap: .6rem; } .compta-rev-val { font-variant-numeric: tabular-nums; /* chiffres de meme chasse : les colonnes ne dansent pas */ font-weight: 700; font-size: .875rem; text-align: right; min-width: 2.75rem; } /* Tuiles de chiffres cles : meme grammaire que les en-tetes de section (petites capitales), et un rembourrage divise par deux. Sur fond blanc (piste B), elles ne portent PAS de fond gris : elles se separent par un filet vertical, comme des colonnes. Un aplat gris serait ici la seule tache de couleur de la page et attirerait l'oeil sur ce qui n'est qu'un rappel de chiffres. */ /* auto-fit et non un nombre de colonnes fige : la grille REMPLIT la largeur quel que soit le nombre de tuiles - quatre sur le Cockpit et les declarations de paie, deux sur la revue de cloture - et se replie seule quand la fenetre retrecit, sans point de rupture a maintenir. */ .compta-kpi-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; border-top: 1px solid var(--gray-200, #E7E5E4); } .compta-kpi { padding: .5rem .625rem; border-right: 1px solid var(--gray-100, #F1EEEB); } .compta-kpi:last-child { border-right: 0; } .compta-kpi-grille:where(.dark, .dark *) { border-top-color: var(--gray-700, #44403C); } .compta-kpi:where(.dark, .dark *) { border-right-color: var(--gray-800, #292524); } .compta-kpi-lib { font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9A938B; } .compta-kpi-val { margin-top: .15rem; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* Grille des journaux : AUTANT DE COLONNES QUE LA LARGEUR EN PERMET, au lieu des quatre imposees a l'origine par la vue - quatre vignettes de trois mots laissaient la moitie droite de la page vide. Elle retombe seule sur moins de colonnes quand la fenetre retrecit, sans point de rupture a tenir. auto-FIT et non auto-FILL : la nuance decide de tout ici. auto-fill RESERVE autant de colonnes que la largeur en permet, MEME VIDES - avec 8 journaux sur un ecran de 2000px, la grille creait 11 colonnes et laissait les 3 dernieres en blanc. auto-fit supprime les colonnes vides, et les vignettes s'etendent sur toute la fenetre. Meme regle sur .compta-kpi-grille. */ .compta-journaux-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; border-top: 1px solid var(--gray-200, #E7E5E4); } /* Vignette de journal : elle etait la DERNIERE carte encadree du module, avec un ecart autour. Sur un ecran ou plus rien n'a de cadre, ces bordures etaient devenues les seules et sautaient aux yeux. Meme traitement que les tuiles de chiffres : un filet a droite, et c'est tout. */ .compta-journal-vignette { display: block; padding: .5rem .625rem; border-right: 1px solid var(--gray-100, #F1EEEB); border-bottom: 1px solid var(--gray-100, #F1EEEB); transition: background-color .12s ease; } .compta-journal-vignette:hover { background: var(--gray-50, #FAF9F8); } .compta-journal-nb { display: block; margin-top: .15rem; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #5C4A3D; } .compta-journal-unite { display: block; font-size: .6875rem; color: #9A938B; } .compta-journal-vignette:where(.dark, .dark *) { border-color: var(--gray-800, #292524); } .compta-journal-vignette:where(.dark, .dark *):hover { background: rgba(255, 255, 255, .04); } /* --- ENCADRES D'INFORMATION DANS UNE SECTION ------------------------------------------------------- Import bancaire : le rappel du contexte (journal, comptes, devise) et le controle des soldes. Ils portaient un cadre complet, un arrondi et un aplat gris - seuls de leur espece depuis la mise a plat, ils sautaient d'autant plus aux yeux. Un filet en haut suffit a les detacher de ce qui precede : c'est la meme grammaire que le filet sous les titres de section. Leur grille interne REMPLIT la largeur (auto-fit) au lieu de s'arreter a deux ou trois colonnes. */ .compta-encadre { padding: .5rem .625rem; border-top: 1px solid var(--gray-200, #E7E5E4); } .compta-encadre:where(.dark, .dark *) { border-top-color: var(--gray-700, #44403C); } .compta-encadre-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .25rem 1rem; } /* --- SELECTEUR DE PERIODE -------------------------------------------------------------------------- Barre unique en haut des ecrans (cf. resources/views/components/selecteur-periode.blade.php). Elle suit la grammaire du mode dense : libelles en petites capitales, champs a plat, filet en dessous, et une hauteur de ligne, pas trois. Les champs ne s'etirent PAS sur toute la largeur : une date dans un champ de 400px est absurde, ils gardent une largeur utile et la barre se remplit de gauche a droite. C'est la reponse au « il y a du vide » sans borner la page. */ .compta-periode { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .25rem .9rem; padding: .4rem .625rem .5rem; border-bottom: 1px solid var(--gray-200, #E7E5E4); } .compta-periode-champ { display: flex; flex-direction: column; gap: .1rem; } .compta-periode-lib { font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9A938B; } .compta-periode-select { min-width: 9rem; max-width: 17rem; padding: .15rem .4rem; font-size: .8125rem; line-height: 1.35; border: 1px solid var(--gray-200, #E7E5E4); background: transparent; color: inherit; } .compta-periode-select:focus { outline: none; border-color: var(--primary-500, #5C4A3D); } /* Rappel des bornes reellement appliquees, pousse a droite. */ .compta-periode-resume { margin-left: auto; align-self: center; font-size: .75rem; color: #9A938B; } .compta-periode:where(.dark, .dark *) { border-bottom-color: var(--gray-700, #44403C); } .compta-periode-select:where(.dark, .dark *) { border-color: var(--gray-700, #44403C); } /* ------------------------------------------------------------------------------------------------ * COLONNES ETROITES : Date, Montant HT, VAT, Montant TTC, Statut. * * La largeur est posee sur la COLONNE (width('1%'), cf. JournalEntryResource::colonneEtroite) et non * ici : ces cinq colonnes sont masquables une a une, et une regle en nth-child designerait la voisine * des qu'on en cache une. Le CSS ne fait donc qu'une chose, mais elle est indispensable : empecher le * repli. Sans elle « 13 378 868,00 » se casse en deux lignes, et la colonne gagne en hauteur ce * qu'elle a perdu en largeur. * ------------------------------------------------------------------------------------------------ */ .fi-panel-compta .compta-col-etroite { white-space: nowrap; } /* ------------------------------------------------------------------------------------------------ * LE PLANCHER DES COLONNES : le champ de RECHERCHE, et rien d autre. * * Filament impose `min-width: 192px` a la cellule qui porte un champ de recherche individuel. Toutes * les colonnes du module en ont un, si bien que TOUTES mesuraient exactement 192 px - Date comme * Montant TTC - et que la table debordait de l ecran (1754 px pour 1470 disponibles). Il n y avait * donc aucun espace excedentaire a repartir : chaque colonne etait deja a son minimum, impose par son * champ de recherche. * * ⚠️ C EST CE QUI EXPLIQUE QUATRE TENTATIVES SANS EFFET (11/08/2026) : une largeur declaree sur la * colonne, un contenu raccourci, un rembourrage d en-tete reduit, une mise en page fixe - aucune ne * pouvait passer sous un plancher pose ailleurs. Mesure sur la page reelle, pas deduite. * * 5 rem : les colonnes retombent a la largeur de leur contenu (Date 192 -> 103 px, table 1754 -> 1107), * et le champ de recherche garde 80 px, de quoi rester utilisable. A zero il se refermerait sur les * colonnes les plus etroites. * ------------------------------------------------------------------------------------------------ */ .fi-panel-compta .fi-ta-individual-search-cell { min-width: 5rem; } /* ------------------------------------------------------------------------------------------------ * UNE LIGNE PAR LIGNE : colonnes de texte tronquees, texte entier au survol. * * Le repli faisait respirer les lignes de 31 a 79 px selon la longueur du libelle, et une liste dont * chaque ligne a sa propre hauteur ne se parcourt pas. Meme parti que le registre de journal : on * coupe, et l infobulle rend le texte entier (posee sur la colonne, cf. JournalEntryResource). * * ⚠️ LA BORNE EST INDISPENSABLE. Sans `max-width`, `text-overflow: ellipsis` n a rien a tronquer : en * mise en page automatique la colonne s elargit jusqu a contenir son texte, et rien ne depasse jamais. * 12 rem mesures sur la page reelle : hauteurs de ligne [39, 79, 55, 55, 31] -> [39, 31, 31, 31, 31]. * ------------------------------------------------------------------------------------------------ */ .fi-panel-compta .fi-ta-cell-label .fi-ta-text, .fi-panel-compta .fi-ta-cell-partner .fi-ta-text, .fi-panel-compta .fi-ta-cell-reference .fi-ta-text { display: block; max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------------------------------------------------ * ECRANS A VISIONNEUSE : la page tient dans l'ecran, seule la LISTE defile. * * Avant : la page entiere defilait, le justificatif avec elle. Il portait bien `xl:sticky xl:top-4`, * mais MESURE sur la page reelle, il ne collait pas : de 0 a 1 100 px de defilement, le haut du volet * passait de +112 a -988, il sortait par le haut comme n'importe quel bloc. La regle etait pourtant * appliquee (position: sticky, top: 16px) — un element colle ne peut glisser que DANS son bloc * conteneur, et le sien, un emballage de schema Filament, epousait exactement sa taille : zero jeu, * donc aucun effet. Une propriete correcte, sur un parent qui la rendait sans objet. * * D'ou le parti pris ici, qui ne repose plus sur `sticky` du tout : on batit une COQUILLE. Le corps de * page mesure un ecran, la hauteur est transmise de proche en proche jusqu'aux deux colonnes, et c'est * la liste — elle seule — qui recoit l'ascenseur. Le volet n'a plus a coller : il ne bouge pas, parce * que rien autour de lui ne bouge. * * Trois choses a savoir avant d'y toucher : * * 1. LA CHAINE. De a la grille, une dizaine d'emballages Filament s'interposent (fi-layout, * fi-main-ctn, fi-main, fi-page, fi-page-content, wrappers de schema...). Les nommer un a un, c'est * signer une panne au prochain renommage de classes. `:has(.compta-shell)` les designe par ce * qu'ils font — contenir la coquille — et non par leur nom : la regle suit les renommages. * `.fi-main` est un
, pas un
: la liste des elements vises l'inclut explicitement. * 2. LE REPLI EST SUR. Chaque maillon dit « prends la place libre » (flex: 1) et « tu peux retrecir » * (min-height: 0). Si un maillon cassait, les enfants reprendraient leur taille naturelle et la * page redefilerait comme avant — pas d'ascenseur perdu, pas de contenu inatteignable. C'est * pourquoi on ne pose aucun `overflow: hidden` sur le corps de page. * 3. L'ORDRE DES COLONNES fait foi : la premiere est la liste (elle recoit l'ascenseur), la seconde * le volet. Valable pour les deux familles d'ecrans, celle batie par le schema Filament * (AvecVisionneuseListe) et celle ecrite a la main (Ecritures comptables, Grand livre). * * Sous 1280 px les deux colonnes s'empilent : rien de tout ceci ne s'applique, la page defile. * ------------------------------------------------------------------------------------------------ */ @media (min-width: 1280px) { /* 1. Le corps de page mesure un ecran, et distribue sa hauteur a la chaine jusqu'a la coquille. */ body.fi-panel-compta:has(.compta-shell) { display: flex; flex-direction: column; height: 100dvh; } .fi-panel-compta :is(div, main, form, section):has(.compta-shell):not(.fi-layout) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* fi-layout range le menu lateral A COTE du contenu : il garde sa direction, il ne prend que la hauteur. */ .fi-panel-compta .fi-layout:has(.compta-shell) { flex: 1 1 auto; min-height: 0; } /* 2. La coquille elle-meme est le dernier maillon : `:has()` designe ses ANCETRES, jamais elle. L'oublier suffit a tout annuler — mesure : la chaine descendait bien jusqu'a 667 px, et la coquille repartait a 1 809. */ .fi-panel-compta .compta-shell { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* La grille des deux colonnes occupe ce qui reste. `minmax(0, 1fr)` est le point d'appui : sans lui la ligne se dimensionne sur son contenu — 4 500 px de tableau — et deborde de l'ecran. */ .fi-panel-compta .compta-shell > * { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); align-items: stretch; } /* 3. Colonne de gauche : la liste, seul ascenseur de l'ecran. */ .fi-panel-compta .compta-shell > * > :first-child { height: 100%; min-height: 0; overflow-y: auto; } /* 4. Colonne de droite : le justificatif, plein cadre. Meme procede qu'au point 1 — les emballages de schema entre la colonne et le volet ne sont la que pour transmettre la hauteur. */ .fi-panel-compta .compta-shell *:has(.compta-volet) { height: 100%; min-height: 0; } .fi-panel-compta .compta-shell .compta-volet { height: 100%; } .fi-panel-compta .compta-shell .compta-volet-carte { height: 100%; display: flex; flex-direction: column; } /* Le cadre du document absorbe la place restante sous le titre et le fil de meta. */ .fi-panel-compta .compta-shell .compta-volet-doc { flex: 1 1 auto; min-height: 0; } .fi-panel-compta .compta-shell .compta-volet-zone { height: 100%; } } /* Hauteur du justificatif HORS coquille (formulaire d'edition, ecrans etroits) : la valeur vivait en style en ligne dans la vue, ou aucune regle ne pouvait la reprendre. Ici, la coquille la remplace. */ .fi-panel-compta .compta-volet-zone { height: 68vh; } /* --------------------------------------------------------------------------- Champs de recherche : UNE seule croix. Un `` fait dessiner au navigateur sa propre croix d'effacement. Nos champs en posent une aussi - la notre, elle, vide bien la propriete Livewire, ce que la croix native ne garantit pas partout (Firefox n'en dessine aucune). On garde donc la notre et on neutralise la native, plutot que d'en afficher deux (signale par Jean, 2026-08-20). Prefixe .fi-panel-compta : sans lui, la regle repeindrait aussi /admin. --------------------------------------------------------------------------- */ .fi-panel-compta input[type="search"]::-webkit-search-cancel-button, .fi-panel-compta input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } /* --------------------------------------------------------------------------- Menus de la barre : le panneau s'elargit a son contenu. Filament borne chaque panneau de menu a 14rem par un `max-width !important` pose DANS `@layer components` : les noms de journaux se tronquaient dans leur propre menu (« BQ1 - Mauritius Comme... », audit du 2026-08-23). Un !important layere bat tout !important hors layer, quelle que soit la specificite : la surcharge doit donc vivre dans LE MEME layer (components), ou elle gagne par specificite. Hors de ce bloc @layer, la regle est sans effet - ne pas la « simplifier ». Prefixe .fi-panel-compta : sans lui, la regle repeindrait aussi /admin. --------------------------------------------------------------------------- */ @layer components { .fi-panel-compta .fi-topbar .fi-dropdown-panel { width: max-content; /* min() : 26rem sur grand ecran, jamais plus large que le viewport sur mobile. */ max-width: min(26rem, 92vw) !important; } } /* * ETATS COMPTABLES (bilan, compte de resultat) - presentation calee sur celle d'Odoo, a la demande * de Lolitta et Jean (2026-08-30, capture #7 du dossier « Retours Jean »). Ce que leur oeil reconnait * dans Odoo : un etat CENTRE, qui ne s'etale pas sur toute la largeur de l'ecran, decoupe par des * BANDEAUX, une hierarchie donnee par la seule indentation, les zeros estompes pour que le regard * glisse dessus, les negatifs signales, et aucune bordure de tableau. * * MAIS AUX COULEURS DE LA MAISON, pas a celles d'Odoo (rappel de Matthieu, 2026-08-30) : calcaire, * cendre, ferreux et brique - jamais les gris neutres de Tailwind. C'est la seule chose qui ne se * copie pas d'un autre logiciel. * * LARGEUR CONTENUE, a rebours de la regle de cadre du module (pleine largeur) : un etat a deux * colonnes etale sur un ecran large separe le libelle de son montant de trente centimetres, et plus * personne ne lit la meme ligne d'un bout a l'autre. La balance, qui porte six colonnes, respire * plus large. * * CSS PUR, obligatoire ici : les vues du package ne sont pas scannees par le build Tailwind de l'hote, * une classe utilitaire posee dans un blade du package ne peint donc rien (cf. la feuille en tete). */ .compta-etat { width: 100%; max-width: 58rem; margin-inline: auto; border-collapse: collapse; font-size: .82rem; } .compta-etat td { padding: .3rem .5rem; } /* Bandeau de section : le decoupage de l'etat (Actif, Passif, Produits...) et son total. Calcaire fonce (la « ligne » de la charte) et texte ferreux, comme les titres de section. */ .compta-etat-bandeau td { background: #E5E1D8; color: #5C4A3D; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; padding: .45rem .75rem; } .compta-etat-bandeau:where(.dark, .dark *) td { background: rgba(200, 180, 155, .14); color: #C8B49B; } /* Respiration entre deux sections : une ligne vide plutot qu'une marge, la table restant une table. */ .compta-etat-espace td { height: .9rem; padding: 0; border: 0; } /* Lignes. L'indentation dit le niveau ; la place de la fleche est reservee sur TOUTES les lignes de poste, sans quoi les libelles danseraient selon qu'un poste a des sous-comptes ou non. */ .compta-etat-ligne td { border-bottom: 1px solid #F1EEE7; } .compta-etat-ligne:where(.dark, .dark *) td { border-bottom-color: rgba(255, 255, 255, .05); } .compta-etat-poste td:first-child { padding-left: 1.25rem; } .compta-etat-sous td:first-child { padding-left: 3.25rem; font-size: .78rem; } .compta-etat-sous td { color: #5F5E5A; } .compta-etat-sous:where(.dark, .dark *) td { color: #A8A6A1; } /* Un poste qui totalise des sous-comptes se distingue par la graisse. */ .compta-etat-groupe td:first-child, .compta-etat-groupe .compta-etat-montant { font-weight: 600; } /* Montants : une seule colonne, alignee, chiffres a chasse fixe pour que les rangs se superposent. */ .compta-etat-montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: .75rem; } /* Un zero s'efface (cendre), un negatif alerte (brique de la charte, pas le rouge d'Odoo). */ .compta-etat-zero { color: #A8A6A1; } .compta-etat-zero:where(.dark, .dark *) { color: #5F5E5A; } .compta-etat-negatif { color: #A32D2D; } .compta-etat-negatif:where(.dark, .dark *) { color: #D98C8C; } /* Code du compte : garde sa place devant le libelle, mais en retrait - Odoo ne l'affiche pas du tout, nous si : un comptable travaille avec, et le perdre serait une regression. */ .compta-etat-code { color: #A8A6A1; font-variant-numeric: tabular-nums; font-size: .75rem; margin-right: .5rem; } /* Fleche de depliage des sous-comptes. */ .compta-etat-fleche { display: inline-block; width: .9rem; color: #A8A6A1; font-size: .6rem; vertical-align: middle; transition: transform .15s; } .compta-etat-repliable { cursor: pointer; } .compta-etat-repliable:hover td { background: #F8F7F1; } .compta-etat-repliable:hover td:where(.dark, .dark *) { background: rgba(255, 255, 255, .03); } /* En-tete de la colonne des montants. */ .compta-etat-entete td { text-align: right; font-size: .75rem; color: #5F5E5A; padding: 0 .75rem .5rem 0; } .compta-etat-entete td:where(.dark, .dark *) { color: #A8A6A1; } /* Balance generale : meme grammaire visuelle, mais six colonnes - elle respire plus large que les etats a deux colonnes, tout en restant centree. */ .compta-balance { max-width: 84rem; } .compta-balance-entete th { background: #E5E1D8; color: #5C4A3D; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; padding: .45rem .5rem; text-align: left; } .compta-balance-entete:where(.dark, .dark *) th { background: rgba(200, 180, 155, .14); color: #C8B49B; } .compta-balance-entete th.compta-etat-montant { text-align: right; } .compta-balance .compta-etat-classe { color: #5F5E5A; font-size: .78rem; } .compta-balance .compta-etat-classe:where(.dark, .dark *) { color: #A8A6A1; } /* Le CADRE de l'etat suit le tableau : centre et contenu, comme sur la capture d'Odoo (rappel de Matthieu, 2026-08-30). Pose sur la PAGE (classe portee par bilan, compte de resultat et balance) et non sur .fi-section : les autres ecrans du module gardent la pleine largeur du cadre unifie. */ .compta-page-etat .fi-section { max-width: 62rem; margin-inline: auto; } .compta-page-etat .fi-page-main > .fi-sc { align-items: center; } .compta-page-balance .fi-section { max-width: 88rem; } /* === MOBILE (retours Matthieu, 2026-09-05, captures iPhone) ====================================== Deux defauts reperes sur telephone apres l'harmonisation : 1. COCKPIT : la hauteur FIGEE des lignes de revue (2.375rem, taillee bureau) faisait se chevaucher les libelles des qu'ils repliaient sur deux lignes ; 2. ETATS : le centrage a largeur bornee est un confort bureau, et surtout « align-items: center » fait retrecir la carte a la largeur de son CONTENU - un bilan presque vide devenait une vignette. Sur petit ecran : pleine largeur, carte etiree. */ @media (max-width: 640px) { /* La ligne REPLIE au lieu de comprimer : le titre garde sa largeur naturelle, et quand le bouton d'action ne tient plus a cote, il descend sur sa propre ligne, cale a droite (margin-left:auto de .compta-rev-droite) - fini les titres egrenes mot a mot. */ .fi-panel-compta .compta-rev-ligne { height: auto; min-height: 2.375rem; padding-block: .3rem; flex-wrap: wrap; row-gap: .3rem; } /* Le sous-titre est un confort de bureau : sur telephone il volait la place du titre. */ .fi-panel-compta .compta-rev-sous { display: none; } .fi-panel-compta .compta-rev-titre { flex: 1 1 auto; min-width: 0; } } @media (max-width: 900px) { .compta-page-etat .fi-section, .compta-page-balance .fi-section { max-width: none; } .compta-page-etat .fi-page-main > .fi-sc, .compta-page-balance .fi-page-main > .fi-sc { align-items: stretch; } .compta-etat, .compta-balance { max-width: none; } } /* ============================================================================================= * AGENT COMPTABLE - le fil de discussion, bulle flottante ET page plein ecran (06/09/2026). * * Aligne sur l'ASSISTANT (erp/resources/views/assistant/page.blade.php) a la demande de Matthieu : * memes bulles asymetriques, meme barre de saisie en pilule, meme bouton rond d'envoi, meme * attente en trois points. Les deux ecrans partagent CE bloc - un seul endroit a toucher pour * les deux, et plus de style en double dans les vues. * * Les couleurs empruntent les jetons de la charte de l'HOTE quand il en pose (--bas-*), avec les * valeurs Basalte en repli : le module tourne aussi chez Coste Capital, qui n'a pas cette feuille. * Manrope de meme : si l'hote ne la charge pas, la pile systeme prend le relais sans rien casser. * CSS PUR, jamais de Tailwind - les vues du paquet ne sont pas scannees par le build de l'hote. * ============================================================================================= */ .agx { --agx-blanc: #FFFFFF; --agx-ligne: var(--bas-line, #E8DFD0); --agx-fond: var(--bas-calcaire-light, #F8F7F1); --agx-ferreux: #5C4A3D; --agx-encre: #1A1D1F; --agx-gris: #6E6A5A; --agx-gris-deco: #8A8578; --agx-sur-ferreux: #F8F7F1; } /* PAS DE VARIANTE SOMBRE, et ce n'est pas un oubli : les cinq panneaux des deux ERP portent * ->darkMode(false) (decision produit, verifiee chez Basalte comme chez Coste le 06/09/2026). Un * bloc « .dark » ici ne serait jamais applique et donnerait l'illusion d'un theme entretenu. Le * jour ou un panneau rouvrirait le mode sombre, tout se fait dans le bloc de jetons ci-dessus : * aucune couleur de composant n'est ecrite en dur ailleurs. */ /* ---- Le fil ---- */ .agx-fil { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 10px; } .agx-msg { max-width: 85%; align-self: flex-start; } .agx-msg.moi { align-self: flex-end; } .agx-tete { font-size: 11px; color: var(--agx-gris); margin: 0 0 3px 3px; display: flex; gap: 7px; align-items: baseline; } .agx-msg.moi .agx-tete { justify-content: flex-end; margin: 0 3px 3px 0; } .agx-tete b { color: var(--agx-ferreux); font-weight: 600; } .agx-corps { padding: 10px 14px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } /* TROIS CAS, PAS DEUX (correction du 06/09/2026). Le fil est une conversation de GROUPE - Matthieu, Lolitta, Jean et Stan. La convention de tout messager s'applique : MES messages a droite, ceux des AUTRES a gauche, qu'ils viennent d'un collegue ou de Stan. Le code ne connaissait que « l'agent » et « moi » : un message de Jean s'affichait donc a la droite de Matthieu comme s'il etait le sien. Le nom et le visage le disaient, la mise en page le contredisait. */ .agx-msg.agent .agx-corps, .agx-msg.equipe .agx-corps { background: var(--agx-blanc); color: var(--agx-encre); border: 1px solid var(--agx-ligne); border-radius: 16px 16px 16px 5px; box-shadow: 0 2px 10px -6px rgba(26, 29, 31, .12); } .agx-msg.moi .agx-corps { background: var(--agx-ferreux); color: var(--agx-sur-ferreux); border-radius: 16px 16px 5px 16px; } /* ---- L'attente : les trois points de l'assistant, jamais une phrase en italique ---- */ .agx-attente { display: inline-flex; gap: 5px; padding: 14px 16px; align-items: center; } .agx-attente i { width: 7px; height: 7px; border-radius: 50%; background: var(--agx-gris-deco); animation: agxPulse 1.2s ease-in-out infinite; } .agx-attente i:nth-child(2) { animation-delay: .18s; } .agx-attente i:nth-child(3) { animation-delay: .36s; } @keyframes agxPulse { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } } /* ---- Ecran vide ---- */ .agx-vide { margin: auto; text-align: center; padding: 24px; max-width: 52ch; } .agx-vide h2 { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; font-size: 22px; margin: 0 0 8px; color: var(--agx-encre); } .agx-vide p { margin: 0; color: var(--agx-gris); font-size: 14.5px; line-height: 1.6; } /* ---- La barre de saisie : une pilule, comme l'assistant ---- * LA ZONE GRANDIT AVEC LE TEXTE (retour de Matthieu, 06/09 : « le texte est masque alors que la * zone devrait s'agrandir »). La hauteur est posee en JS a chaque frappe ; le CSS ne fixe que le * plancher et le plafond, au-dela desquels le champ defile. `field-sizing: content` fera un jour * ce travail nativement - il n'est pas encore assez repandu pour s'y fier seul. */ .agx-pied { flex: 0 0 auto; padding: 10px 14px 14px; } .agx-barre { display: flex; align-items: flex-end; gap: 6px; background: var(--agx-blanc); border: 1px solid var(--agx-ligne); border-radius: 24px; padding: 6px; box-shadow: 0 4px 18px -10px rgba(26, 29, 31, .18); } .agx-barre:focus-within { border-color: var(--agx-ferreux); } .agx-saisie { flex: 1 1 auto; border: 0; outline: none; resize: none; background: none; /* 16px MINIMUM : en dessous, Safari iOS zoome toute la page au focus. EN PROPRIETES SEPAREES, ET CE N'EST PAS UN DETAIL : `font: 400 16px/1.45 inherit` est une declaration INVALIDE - `inherit` ne peut pas figurer comme composant d'un raccourci - donc le navigateur la jetait EN ENTIER et le champ retombait a 13,33 px, la taille par defaut d'un textarea. La garde contre le zoom iOS ne s'appliquait donc pas, alors que le commentaire affirmait le contraire. Mesure et corrige le 06/09/2026. */ font-weight: 400; font-size: 16px; line-height: 1.45; font-family: inherit; color: var(--agx-encre); padding: 8px 6px 8px 12px; min-height: 24px; max-height: 168px; overflow-y: auto; } .agx-saisie::placeholder { color: var(--agx-gris-deco); } .agx-rond { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--agx-ferreux); color: var(--agx-sur-ferreux); } .agx-rond svg { width: 19px; height: 19px; } .agx-rond:disabled { opacity: .45; cursor: default; } .agx-indice { font-size: 11.5px; color: var(--agx-gris); margin: 7px 4px 0; text-align: center; } /* ---- La bulle flottante ---- * PIEGE DOCUMENTE, a ne pas reouvrir : une bulle permanente recouvrait les totaux du coin * bas-droit. D'ou le bouton reduit et sa transparence au repos. */ .agx-bouton { position: fixed; right: 18px; bottom: 18px; z-index: 38; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: #5C4A3D; color: #F8F7F1; display: flex; align-items: center; justify-content: center; opacity: .72; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .45); transition: opacity .15s, transform .1s; } .agx-bouton:hover { opacity: 1; transform: scale(1.04); } .agx-bouton svg { width: 22px; height: 22px; } .agx-volet { position: fixed; right: 18px; bottom: 76px; z-index: 38; width: min(400px, calc(100vw - 36px)); height: min(600px, calc(100vh - 140px)); display: flex; flex-direction: column; overflow: hidden; background: var(--agx-fond); color: var(--agx-encre); border: 1px solid var(--agx-ligne); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .4); } /* STAN. Son portrait vit ICI, en data URI, et non dans un fichier d'image : le module ne publie que du CSS et du JS (FilamentAsset n'accepte pas d'autre type), et une image servie depuis le paquet demanderait une route ou une publication de plus sur CHACUN des trois hebergements. La feuille, elle, est deja publiee partout et porte une empreinte de cache calee sur la date du fichier - le portrait suit donc la meme voie que le reste de l'habillage, sans rien a deployer. 192 px pour rester net sur un ecran a haute densite, 7 Ko : le poids d'une icone. */ .agx-portrait { flex: 0 0 auto; border-radius: 50%; background-size: cover; background-position: center 22%; background-image: url('data:image/jpeg;base64,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'); } .agx-entete .agx-portrait { width: 26px; height: 26px; } .agx-entete-nom { display: flex; align-items: center; gap: 9px; min-width: 0; } /* Dans le fil, chaque message porte le visage de son auteur : le portrait de Stan pour lui, la photo de profil pour un humain, ses initiales quand il n'en a pas (Jean, au jour de la regle). */ .agx-tete .agx-portrait, .agx-tete .agx-photo, .agx-tete .agx-initiales { width: 18px; height: 18px; align-self: center; flex: 0 0 auto; } .agx-photo { border-radius: 50%; object-fit: cover; display: block; } .agx-initiales { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--agx-ligne); color: var(--agx-ferreux); font-size: 8px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; } /* Message de l'equipe : la ligne se lit heure, prenom, visage - le visage vers le bord exterieur, en miroir de celui de Stan a gauche. En row-reverse, flex-start EST le bord droit. */ .agx-msg.moi .agx-tete { flex-direction: row-reverse; justify-content: flex-start; } .agx-entete { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--agx-ligne); } .agx-entete b { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -0.015em; color: var(--agx-encre); } .agx-entete a { font-size: 11.5px; color: var(--agx-gris); text-decoration: none; } .agx-entete a:hover { color: var(--agx-ferreux); } .agx-fermer { border: 0; background: none; cursor: pointer; color: var(--agx-gris); font-size: 20px; line-height: 1; padding: 0 2px; } .agx-fermer:hover { color: var(--agx-ferreux); } /* ---- La page plein ecran : le meme fil, dans un cadre ---- */ .agx-cadre { display: flex; flex-direction: column; height: calc(100vh - 240px); min-height: 440px; background: var(--agx-fond); color: var(--agx-encre); border: 1px solid var(--agx-ligne); border-radius: var(--bas-radius, 16px); overflow: hidden; } .agx-cadre .agx-fil { padding: 22px 22px 12px; } .agx-cadre .agx-msg { max-width: 76%; } .agx-cadre .agx-pied { padding: 12px 18px 18px; } @media (prefers-reduced-motion: reduce) { .agx-attente i { animation: none; } .agx-bouton { transition: none; } }