/* =========================================================================== EASYDESK — FEUILLE DE MODULE (.dsk-*) POURQUOI UNE FEUILLE DE MODULE ET NON UNE FEUILLE PAR ÉCRAN La règle du dépôt est « un écran, une feuille » (CLAUDE.md), avec son exception écrite : « une classe employée par deux écrans ou plus remonte ». Le portage d'EasyDesk au gabarit (2026-09-08) a fait passer seize écrans du balisage Bootstrap (.md-card, .row g-3, .progress, .badge bg-*, .alert) à la trame .mx-*, et ce qui restait à écrire après ce passage était, à chaque fois, LE MÊME PEU : la disposition « liste à gauche, éditeur à droite » que six écrans du module emploient, le fil d'échanges du ticket, la colonne de durées alignée à droite, la rangée en retard. Seize feuilles d'écran auraient été seize copies de ces quatre-vingts lignes, et elles auraient divergé comme .apv-* et .cso-* l'ont fait avant elles. Le précédent est easypaie.css, puis easyconso.css, puis easysales.css : une feuille par module, préfixe propre, ses propres paliers responsive. C'est le cinquième cas du dépôt et il est traité comme les quatre autres. CE QUI N'EST PAS ICI, ET N'A PAS À Y ÊTRE Tout ce que le gabarit porte déjà. La trame de page, les boutons, la carte, la bande d'indicateurs, les barres de répartition, les pastilles d'état, la grille de champs dense, le bloc d'alerte, le groupe segmenté, la modale, la table : ce sont .mx-* et rien d'autre. Une classe .dsk- qui redirait l'une d'elles serait une divergence en attente. AUCUNE COULEUR LITTÉRALE. Tout passe par les jetons --et-* de easytech-theme.css — thème sombre compris, sans une ligne de plus. Aucune couleur d'état n'est écrite en `color:` : c'est le rang -ink qui sert d'encre, la teinte pleine ne servant que de fond, de bordure ou de marque. =========================================================================== */ /* --------------------------------------------------------------------------- 1. ALIGNEMENT DES CELLULES .mx-tbl th force text-align:left (0,1,1 en spécificité). Un simple .dsk-droite (0,1,0) ne le battrait pas : d'où la portée par .mx-tbl, qui monte à 0,2,0. La forme nue reste définie pour les rares emplois hors table. --------------------------------------------------------------------------- */ .dsk-droite { text-align: right; } .dsk-centre { text-align: center; } .mx-tbl .dsk-droite { text-align: right; } .mx-tbl .dsk-centre { text-align: center; } /* --------------------------------------------------------------------------- 2. UNE DURÉE, UN DÉCOMPTE, UNE ÉCHÉANCE Le module ne compte pas des montants mais du TEMPS : « 2 h 30 », « dans 45 min », « en retard de 3 j ». La chasse fixe leur donne la même largeur de chiffre, si bien que deux échéances posées l'une sous l'autre se comparent en balayant la colonne au lieu de se lire une à une. Le gabarit pose déjà la mono sur .mx-tbl-mono ; ce qui manquait était l'encre du RETARD. ELLE N'EST PAS --et-danger. Mesuré : --et-danger rend 4,83:1 sur blanc mais 4,13:1 sur --et-rang, le fond d'une rangée SURVOLÉE — c'est-à-dire au moment précis où l'on pose le curseur dessus pour la lire. L'encre du rang, elle, tient sur les trois fonds (surface, rangée survolée, rangée retenue). --------------------------------------------------------------------------- */ .dsk-retard { color: var(--et-danger-ink); font-weight: 600; } .dsk-proche { color: var(--et-avertissement-ink); font-weight: 600; } .dsk-tenu { color: var(--et-succes-ink); } /* --------------------------------------------------------------------------- 3. RANGÉE EN RETARD — le pendant `danger` de .mx-tbl tr.est-alerte Le gabarit n'a que l'ambre (est-terne, est-alerte). EasyDesk a besoin du cran au-dessus : une échéance de résolution DÉPASSÉE n'est pas « à surveiller », elle est manquée. Même forme exactement — aplat pâle plus liseré à gauche — pour que les deux se lisent comme deux degrés d'une même chose. LE LISERÉ N'EST PAS DÉCORATIF : en thème sombre l'aplat rouge pâle descend à quelques pour cent du fond, et c'est lui qui reste. --------------------------------------------------------------------------- */ .mx-tbl tbody tr.dsk-rang-retard td { background: var(--et-danger-badge-bg); } .mx-tbl tbody tr.dsk-rang-retard td:first-child { box-shadow: inset 3px 0 0 var(--et-danger); } /* --------------------------------------------------------------------------- 4. LA DISPOSITION « LISTE + ÉDITEUR » Six écrans du module la portent — Escalade, Contrats, Parc, Interventions, Temps, Base de connaissances : on choisit une ligne à gauche, on la modifie à droite, sans quitter la liste ni ouvrir de fenêtre. C'était un `.row g-3` avec `col-lg-7 / col-lg-5` recopié six fois ; c'est ici une grille, une fois. 380 px À DROITE, ET NON UNE FRACTION. Le panneau porte la grille de champs dense du gabarit — colonne d'intitulés de 158 px alignée à droite — plus le champ lui-même : sous 360 px le champ tombe à moins de 180 px et une date n'y tient plus. Une colonne en `fr` aurait rétréci sous la pression de la table. SOUS 1100 px l'éditeur passe SOUS la liste. Côte à côte, il ne resterait pas 300 px utiles au tableau — c'est le même palier, et pour la même raison, que .ecran-filtre de la coquille. --------------------------------------------------------------------------- */ .dsk-duo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; } .dsk-duo > * { min-width: 0; } /* La variante de la FICHE : la colonne de contexte est plus large (elle porte le client, le SLA, l'affectation) et se colle en haut pendant que le fil défile. */ .dsk-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .dsk-fiche > * { min-width: 0; } /* `position: sticky` sur le flanc : le fil d'un ticket ancien fait plusieurs écrans de haut, et l'affectation ne doit pas s'échapper vers le haut avec lui. Le décalage est celui de l'en-tête fixe de la coquille (lot08). */ .dsk-flanc { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 16px; } @media (max-width: 1100px) { .dsk-duo, .dsk-fiche { grid-template-columns: minmax(0, 1fr); } /* Empilé, l'ancrage n'a plus de sens : le flanc est un bloc comme un autre. */ .dsk-flanc { position: static; } } /* --------------------------------------------------------------------------- 5. LE FIL D'ÉCHANGES DU TICKET C'est le seul objet vraiment propre au module : une suite de messages dont certains sont PUBLICS (le client les lit) et d'autres INTERNES (il ne les lit pas). La distinction est la plus lourde de conséquences de tout l'écran — une note interne écrite en croyant répondre au client, ou l'inverse, ne se rattrape pas — et elle doit donc se voir sans être lue. ELLE SE VOIT PAR LA BORDURE, PAS PAR L'APLAT. Un aplat ambre sous du texte ordinaire descend à 2,02:1 pour l'ambre et lit « anomalie » là où il n'y en a pas ; une note interne est un geste normal. Le message interne porte donc un liseré ambre à gauche — un MARQUE, au rang --et-avertissement-mark qui tient le seuil graphique de 3:1 — et un jeton qui le nomme. Le message public reste sur la surface de la page. --------------------------------------------------------------------------- */ .dsk-fil { display: flex; flex-direction: column; gap: 10px; } .dsk-msg { border: 1px solid var(--et-hairline); border-left: 3px solid var(--et-hairline); background: var(--et-surface-2); padding: 9px 12px; } .dsk-msg.est-interne { border-left-color: var(--et-avertissement-mark); } .dsk-msg.est-client { border-left-color: var(--et-form-blue); } .dsk-msg-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--et-muted); margin-bottom: 5px; } .dsk-msg-auteur { font-weight: 700; color: var(--et-ink); font-size: 13px; } .dsk-msg-quand { margin-left: auto; font-family: var(--et-font-mono); } /* `pre-wrap` : le corps d'un message porte les retours à la ligne de celui qui l'a écrit. Les replier ferait d'une liste de manipulations un paragraphe. */ .dsk-msg-corps { white-space: pre-wrap; font-size: 13px; line-height: 1.55; color: var(--et-ink); } /* Jeton de nature du message. Ce n'est pas une pastille d'état : « interne » ne dit pas comment va le ticket, il dit qui peut lire la ligne. */ .dsk-jeton { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 11px; font-weight: 600; line-height: 1.5; border: 1px solid var(--et-hairline); background: var(--et-surface); color: var(--et-muted); } .dsk-jeton.est-interne { border-color: var(--et-avertissement-bord); color: var(--et-avertissement-ink); background: var(--et-avertissement-bg); } /* --------------------------------------------------------------------------- 6. LA GRILLE DE FICHES DE LECTURE (portail, canaux) Deux écrans présentent des objets à PARCOURIR plutôt qu'à comparer ligne à ligne : les articles publiés tels que le client les voit, et l'état des canaux d'entrée. Une table y répondrait mal — on y cherche un titre, pas une valeur dans une colonne. `auto-fill` et non `auto-fit` : avec deux articles, `auto-fit` étire deux cartes sur toute la largeur et le titre se perd au milieu d'un blanc de 600 px. `auto-fill` garde la mesure de la carte et laisse le vide à droite, ce qui se lit comme « il n'y en a que deux ». --------------------------------------------------------------------------- */ .dsk-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; } .dsk-tuile { display: flex; flex-direction: column; gap: 6px; min-height: 116px; border: 1px solid var(--et-hairline); background: var(--et-surface); padding: 12px 14px; } /* Une tuile qui MÈNE quelque part le dit au survol. Celle qui ne mène nulle part (l'état d'un canal) ne prend pas cette classe : un survol qui réagit sans que le clic fasse quoi que ce soit est une promesse non tenue. */ .dsk-tuile.est-ouvrable { cursor: pointer; } .dsk-tuile.est-ouvrable:hover { border-color: var(--et-form-blue); background: var(--et-rang); } .dsk-tuile-sur { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--et-faint); } .dsk-tuile-titre { font-size: 14px; font-weight: 700; color: var(--et-ink); line-height: 1.35; } .dsk-tuile-txt { font-size: 12px; color: var(--et-muted); line-height: 1.5; } .dsk-tuile-pied { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--et-faint); border-top: 1px solid var(--et-hairline); } .dsk-tuile-pied .compte { margin-left: auto; font-family: var(--et-font-mono); font-weight: 600; color: var(--et-ink); } /* --------------------------------------------------------------------------- 7. LA NOTE DE SATISFACTION Cinq étoiles, en saisie sur la fiche et en lecture au reporting. L'étoile est un BOUTON quand on note et un caractère quand on lit — deux formes, un seul dessin, pour que la note lue et la note saisie soient reconnaissables l'une dans l'autre. L'AMBRE EST ICI UNE MARQUE, PAS UNE ENCRE : une étoile est un glyphe plein de 24 px, au-dessus du pas « grand texte » de la charte, et --et-avertissement y tient le seuil. L'étoile vide prend le gris inerte — elle dit « pas encore », pas « mauvais ». --------------------------------------------------------------------------- */ .dsk-etoiles { display: inline-flex; align-items: center; gap: 2px; font-size: 24px; line-height: 1; } .dsk-etoile { border: 0; background: none; padding: 0 1px; cursor: pointer; line-height: 1; font-size: inherit; color: var(--et-inerte); } .dsk-etoile.est-pleine { color: var(--et-avertissement); } .dsk-etoile:disabled { cursor: default; } .dsk-etoile:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; } /* La note elle-même, en gros. Elle ne prend PAS de couleur d'état : « 3,8/5 » n'est ni un succès ni une alerte tant que la société n'a pas dit quelle est sa cible, et la teindre en rouge sous 3 inventerait cette cible. */ .dsk-note { font-family: var(--et-font-mono); font-size: 34px; font-weight: 700; color: var(--et-ink); line-height: 1.1; } .dsk-note-sur { font-size: 14px; font-weight: 400; color: var(--et-faint); } /* Le verbatim : ce que le client a ÉCRIT, qui vaut plus que la note qu'il a cochée. Il se lit comme une citation, pas comme une cellule. */ .dsk-verbatim { border-left: 3px solid var(--et-hairline); padding: 2px 0 2px 10px; } .dsk-verbatim-txt { font-size: 13px; line-height: 1.5; color: var(--et-ink); white-space: pre-wrap; } .dsk-verbatim-sig { margin-top: 3px; font-size: 12px; color: var(--et-faint); } /* --------------------------------------------------------------------------- 8. DEUX CARTES CÔTE À CÔTE Le tableau de bord et le reporting posent des paires de cartes de même rang. `.mx-ind-grille` du gabarit sert les INDICATEURS (une valeur par case), pas deux panneaux de contenu. --------------------------------------------------------------------------- */ .dsk-paire { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; } /* Variante 5/7 : la répartition à gauche est courte, la file à droite est la raison d'être de l'écran. À parts égales, la file perdrait 200 px pour rien. */ .dsk-paire-57 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; } @media (max-width: 1100px) { .dsk-paire-57 { grid-template-columns: minmax(0, 1fr); } } /* Espacement vertical entre deux blocs de premier niveau. Le gabarit ne le pose pas : il ignore combien de blocs un écran empile. */ .dsk-espace { margin-bottom: 16px; } /* UN INDICATEUR QUI MÈNE À SES LIGNES. .mx-ind est écrit pour un
: porté par un , il resterait en ligne (son padding ne pousserait rien) et prendrait le soulignement et le bleu du lien — ce qui, sur une case déjà teintée par est-negatif, se lirait comme deux signaux contradictoires. Trois déclarations rendent le à sa case, et le survol dit qu'elle mène quelque part sans changer sa teinte d'état. */ a.dsk-ind-lien { display: block; text-decoration: none; color: inherit; } a.dsk-ind-lien:hover { border-color: var(--et-form-blue); } a.dsk-ind-lien:hover .mx-ind-lbl { color: var(--et-form-blue-d); } a.dsk-ind-lien:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; } /* UN INDICATEUR QUI FILTRE LA LISTE SOUS LUI. Même case, mais elle n'emmène nulle part : elle retient. C'est un