/* ════════════════════════════════════════════════════════════════════════════════ ORGANIGRAMME — wwwroot/css/ecran-organigramme.css Le CSS ne fait que PEINDRE : les positions viennent de Disposer(), qui attribue une abscisse par profondeur et une ordonnée par empilement des feuilles. Ne remplacez pas ce calcul par une grille — un arbre dont chaque parent se centre sur ses enfants ne se décrit pas en flux CSS. Trois mesures, et elles sont solidaires du composant : nœud 244 × 76, gouttières 64 × 14. Les changer ici sans les changer dans LARGEUR/HAUTEUR/ESPACE_X/ESPACE_Y décale les coudes des nœuds qu'ils relient. ════════════════════════════════════════════════════════════════════════════════ */ .org-scroll { overflow: auto; padding: 22px 24px; } .org-canevas { position: relative; min-width: 100%; } .org-filet { position: absolute; background: var(--et-filet-fort); } /* ── LE NŒUD ────────────────────────────────────────────────────────────────── Filet de 4 px à gauche : bleu pour un service, ardoise pour une équipe — elle n'a pas de hiérarchie propre, et l'arbre doit le dire d'un coup d'œil. */ .org-noeud { position: absolute; width: 244px; height: 76px; display: flex; background: var(--et-surface); border: 1px solid var(--et-form-border); cursor: pointer; overflow: hidden; } .org-noeud-filet { flex: none; width: 4px; background: var(--et-form-blue); } /* L'ardoise EN MARQUE, et non en aplat : --et-table-head-encre, pas --et-table-head. Les deux valent #354A5F en clair, mais seul le premier bascule en sombre (#C3D0E4) — l'aplat, lui, reste ardoise dans les deux thèmes parce qu'il porte de l'encre claire. Un filet de 4 px en #354A5F sur la surface sombre (#111A2B) rend 1,90:1, sous le seuil de 3:1 d'une marque graphique : l'équipe cesserait de se distinguer du service la nuit. C'est ce que l'ancienne feuille corrigeait avec un hexadécimal écrit à la main. */ .org-noeud.est-equipe .org-noeud-filet { background: var(--et-table-head-encre); } .org-noeud.est-inactif { background: var(--et-surface-3); } .org-noeud.est-inactif .org-noeud-filet { background: var(--et-filet-fort); } .org-noeud.est-inactif .org-noeud-nom { color: var(--et-faint); } .org-noeud.est-alerte { border-color: var(--et-avertissement-bord); } .org-noeud.est-choisi { border-color: var(--et-form-blue); box-shadow: 0 0 0 2px var(--et-info-bg); } .org-noeud-corps { flex: 1; min-width: 0; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 3px; } .org-noeud-tete { display: flex; align-items: center; gap: 7px; } .org-noeud-code { flex: none; font-family: var(--et-font-mono); font-size: 12px; letter-spacing: .04em; color: var(--et-muted); } .org-noeud-nom { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--et-ink); } .org-noeud-alerte { flex: none; display: grid; color: var(--et-avertissement-ink); } .org-noeud-pastille { flex: none; width: 7px; height: 7px; border-radius: var(--et-r-pill); background: var(--et-ok); } .org-noeud.est-inactif .org-noeud-pastille { background: var(--et-inerte); } /* La donnée manquante se lit en ambre — SAUF sur un nœud inactif, où elle passe au gris : la couleur suit le verdict de la carte, sinon elle le contredit. Un nœud désactivé n'appelle aucune action. */ .org-noeud-sous { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--et-muted); } .org-noeud-sous.est-manquant { color: var(--et-avertissement-ink); } .org-noeud.est-inactif .org-noeud-sous.est-manquant { color: var(--et-faint); } /* Le nombre porte sa BASE à côté : « 21 · 21 » ne se lit pas sans son dénominateur. */ .org-noeud-pied { display: flex; align-items: baseline; gap: 6px; } .org-noeud-nombre { font-family: var(--et-font-mono); font-size: 12px; font-weight: 500; color: var(--et-ink); } .org-noeud-base { flex: 1; min-width: 0; font-size: 12px; color: var(--et-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .org-noeud-pli { flex: none; width: 26px; padding: 0; border: 0; border-left: 1px solid var(--et-rang); background: transparent; color: var(--et-muted); font-size: 12px; cursor: pointer; } .org-noeud-pli:hover { background: var(--et-tint); } .org-noeud-pli .bi { transform: rotate(90deg); } .org-noeud-pli.est-plie .bi { transform: none; } /* ── LA BARRE, LE BANDEAU, LA LÉGENDE ───────────────────────────────────────── L'entrée « Équipe » de la légende n'est rendue que sur l'axe mixte : une légende qui nomme une couleur absente de l'arbre fait chercher ce qui n'y est pas. */ .org-aide { font-size: 13px; color: var(--et-faint); min-width: 0; } .org-bascule.est-attention { border-color: var(--et-avertissement-bord); background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); } .org-bascule.est-allume { border-color: var(--et-filet-fort); background: var(--et-surface-3); color: var(--et-muted); } .org-bandeau { display: flex; align-items: flex-start; gap: 8px; padding: 9px 14px; background: var(--et-avertissement-bg); border-bottom: 1px solid var(--et-avertissement-bord); font-size: 13px; line-height: 1.5; color: var(--et-avertissement-ink); } .org-legende { display: flex; align-items: center; gap: 16px; row-gap: 8px; flex-wrap: wrap; padding: 11px 18px; background: var(--et-surface-2); border-top: 1px solid var(--et-hairline); } .org-legende-titre { font-family: var(--et-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--et-muted); } .org-legende-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--et-muted); } .org-legende-pt { width: 8px; height: 8px; border-radius: var(--et-r-pill); } .org-legende-pt.est-actif { background: var(--et-ok); } .org-legende-pt.est-inactif { background: var(--et-inerte); } .org-legende-pt.est-alerte { background: var(--et-avertissement); } .org-legende-pt.est-choisi { background: var(--et-form-blue); } .org-legende-pt.est-equipe { background: var(--et-table-head-encre); } /* cf. le filet du nœud */ .org-legende-methode { flex: 1; min-width: 200px; font-size: 12px; color: var(--et-faint); text-wrap: pretty; } /* La PROVENANCE ne sort qu'à l'impression : sur papier, l'arbre ne dit plus de lui-même quel axe ni quels filtres l'ont produit, et deux axes pliés se ressemblent. À l'écran, elle redoublerait le résumé posé juste au-dessus. */ .org-provenance { display: none; } /* ── IMPRESSION ─────────────────────────────────────────────────────────────── Le FORMAT (A3 paysage) n'est PAS ici : il est posé par l'écran à l'entrée et retiré à la sortie — voir Organigramme.razor, FORMAT_IMPRESSION. Une règle de page écrite dans cette feuille, servie à tous les écrans, imposerait l'A3 à l'impression de n'importe quelle liste. Ce que la feuille fait : ouvrir la CHAÎNE de conteneurs. Lever le seul défilement de l'arbre ne suffit pas — la coquille, sa zone de contenu, son défileur et la carte de l'écran referment chacun leur boîte, et la page recevrait une fenêtre d'application au lieu d'un arbre. */ @media print { .org-cache-impression, .mx-outils { display: none !important; } .org-provenance { display: block !important; } /* LA CHAÎNE, ÉCRITE AVEC LES SÉLECTEURS DE CETTE COQUILLE-CI. La passation la désignait par des attributs `[data-coquille]` / `[data-zone]` / `[data-scroll]` qui n'existent nulle part ici : la coquille de ce dépôt est `.appgrid` > `.et-content` > `.et-scroll` (ShellModule.razor). Ses trois maillons sont déjà ouverts par le bloc @media print d'easytime-shell.css, posé une fois pour les quinze gabarits — les recopier ici les figerait sur cet écran le jour où la coquille bougera. Reste le dernier maillon, qui est à l'écran et non à la coquille : `.md-card` porte `overflow: hidden` (easytime-shell.css), et la carte couperait l'arbre à sa propre hauteur. ELLE EST DÉSIGNÉE PAR CE QU'ELLE CONTIENT, et non par sa classe : cette feuille est servie à TOUS les écrans, comme celle de la passation, et un `.md-card` nu aurait rouvert à l'impression les cartes de n'importe quelle liste — la raison même pour laquelle le format de page, lui, n'est pas ici. */ .md-card:has(.org-scroll) { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: none !important; } /* L'arbre imprimé est l'arbre AFFICHÉ, replis compris : on lève son défilement, et l'on empêche un nœud d'être coupé en deux par un saut de page. */ .org-scroll { overflow: visible !important; height: auto !important; max-height: none !important; padding: 0 !important; } .org-noeud { break-inside: avoid; } }