/* ============================================================================= ISIS Solution — Thème Flat++ (refonte expressive 2026-05-16) ---------------------------------------------------------------------------- Navigation Rail (72px, icône + libellé) + sub-nav collapsible (240px) + header (56px). Palette resaturée, modules à identité forte, accent secondaire chaud, relief à 2 tiers d'élévation, motion formalisée. ============================================================================= */ /* ============================================================================= Geist + Geist Mono — self-hostés (souveraineté data : aucun appel CDN externe). woff2 latin dans wwwroot/fonts/. font-display: swap (pas de FOIT). Relift typo 2026 : avant, 'Geist' était déclaré mais jamais chargé → l'app tournait en police système. Désormais Geist est réellement servi. ============================================================================= */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/geist-sans-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/geist-sans-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/geist-sans-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/geist-sans-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/geist-mono-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/geist-mono-latin-600-normal.woff2') format('woff2'); } :root { /* === Surfaces & neutres === */ /* Thème « Ardoise » promu global 2026-07-04 (ex-Instrument, cf. DESIGN.md §2) : neutres SLATE froids à contraste renforcé (encre slate-900), hairlines nettes. Plus dense / plus « outil de données » que l'ex-Instrument near-white. Identité par module + sémantique préservées plus bas (inchangées). */ --isis-bg: #eceff3; --isis-surface: #ffffff; --isis-surface-alt: #e1e7ef; /* Surface la plus DISCRÈTE de la famille : survol de ligne, en-tête collant, bloc de code, encart posé SUR UNE CARTE — c'est ce qu'a montré la mesure au navigateur, le parent peint est presque toujours --isis-surface, jamais le fond de page. Déclarée le 2026-09-05 : la feuille l'invoquait 103 fois sans qu'elle existe nulle part — 67 de ces règles croyaient peindre un fond et n'en peignaient aucun (déclaration invalide, propriété ignorée), 8 tombaient sur un gris clair EN DUR qui survivait au thème sombre, et 28 étaient sauvées par un repli sur --isis-surface-alt, trop marqué pour l'usage. Valeur : un cran EN RETRAIT de la carte (écart 1,06), assez pour se voir, assez peu pour ne pas devenir une deuxième carte. Contrastes sur ce fond : texte 16,9:1, secondaire 7,2:1, tertiaire 4,51:1, sémantiques ≥ 4,75:1 — tous au-dessus de l'AA. Le tertiaire imposait la borne : à #f1f5f9 (l'ancien repli en dur) il tombait à 4,34:1. */ --isis-surface-soft: #f7f9fb; --isis-border: #cdd6e0; --isis-border-soft: #e0e6ee; /* Alias : la feuille l'invoquait sans le déclarer (replis rgba/hex en dur, cassés en sombre). */ --isis-border-subtle: var(--isis-border-soft); --isis-border-strong: #94a3b4; --isis-text: #0f172a; /* slate-900 — ~17:1 sur blanc */ /* Tuile « logo » : les logos clients (cartouche, logo d'entreprise) sont conçus pour un fond clair → on les pose TOUJOURS sur une tuile claire (légère respiration + liseré), y compris en sombre, pour rester lisibles. Cf. .isis-logo-tile / :has(img). */ --isis-logo-surface: #ffffff; --isis-logo-border: #cdd6e0; /* ── Vignettes d'entreprise du sélecteur d'espace (spec 2026-09-05 §3) ────────── Six couples fond/encre, choisis par WorkspaceAvatarPalette.IndexFor (index stable entre deux démarrages). Ils REMPLACENT la palette pastel écrite en dur deux fois dans WorkspaceSwitcher et WorkspacePickerTree, qui n'avait qu'un seul jeu de valeurs pour les deux thèmes : mesuré le 2026-09-05, écart vignette/panneau de 1,00 en clair (invisible) et jusqu'à 16,52 en sombre (aveuglant). Contraintes tenues : encre/fond ≥ 4.5:1 ; fond/--isis-surface entre 3:1 et 8:1. RÉVISÉ le 2026-09-05 à la LECTURE DE PIXELS : la ligne ci-dessus était une affirmation, pas une mesure. Les pastels ne tenaient PAS la borne basse — la vignette de DATAGEO rendait 1,25:1 contre le panneau blanc, soit une pastille qu'aucun œil ne distingue du fond. Les rôles sont donc inversés : la TEINTE (celle des six familles d'origine, conservée) porte le fond, l'encre passe en clair. Le repère redevient un repère au lieu d'un halo. */ --isis-wsav-1-bg: #9c5f08; --isis-wsav-1-fg: #fef7ee; --isis-wsav-2-bg: #3068d4; --isis-wsav-2-fg: #f6f8fd; --isis-wsav-3-bg: #1f7c44; --isis-wsav-3-fg: #effbf4; --isis-wsav-4-bg: #d31d4c; --isis-wsav-4-fg: #fef6f8; --isis-wsav-5-bg: #7d50da; --isis-wsav-5-fg: #f9f7fd; --isis-wsav-6-bg: #be4512; --isis-wsav-6-fg: #fef7f4; --isis-text-muted: #475569; /* slate-600 — ~7.4:1 sur blanc */ --isis-text-soft: #64748b; /* slate-500 — ~4.9:1 sur blanc (tertiaire) */ /* Violet « partenaire / scénario » — tokenisé (ex-#8b5cf6 codé en dur). */ --isis-violet: #8b5cf6; --isis-violet-strong: #6d28d9; /* === Accent principal — TERRE CUITE (aligné sur la mire du logo, 2026-09-23) === Accent par défaut + fallback de --isis-current-mod (contextes sans module). Les couleurs PAR MODULE (plus bas) gardent leur identité propre. Reprend TEL QUEL l'ancien --isis-accent-warm, qui disparaît en fusionnant ici : aucune teinte nouvelle n'entre dans la feuille, 154 usages basculent par renommage. La primaire est désormais la VOISINE de la mire du logo (ΔE OKLab 0,015), pas sa copie — cf. le filet MarqueIrisJetonsTests. */ --isis-accent: #c2410c; /* 5,18:1 sur blanc */ --isis-accent-soft: #fff1ec; --isis-accent-strong: #9a3412; /* hover/active — 7,31:1 sur blanc */ --isis-accent-on-soft: color-mix(in srgb, var(--isis-accent-strong) 85%, var(--isis-text)); /* Texte posé SUR --isis-accent. Le token manquait — un commentaire plus bas dans cette feuille le signalait déjà comme « inventé » — d'où les color:#fff en dur sur les surfaces accentuées, contraires à DESIGN.md §2. */ --isis-on-accent: #ffffff; /* --isis-accent-warm* a été FUSIONNÉ dans --isis-accent le 2026-09-23 : la terre cuite n'est plus un accent secondaire, elle EST la primaire. Le trio valait déjà exactement les nouvelles valeurs de l'accent, la bascule des 154 usages est donc un renommage. */ --isis-manager-color: #facc15; /* jaune « manager » (orgchart, dots) — sync orgchart-balkan.js */ /* === Sémantique (resaturés AA solide) === */ --isis-read: oklch(0.55 0.03 230); /* bleu-gris neutre « Lecture », découplé de tout module */ --isis-read-soft: oklch(0.55 0.03 230 / 0.10); --isis-success: #15803d; --isis-success-soft: #dcfce7; /* Déplacés le 2026-09-23 : la primaire terre cuite arrivait à ΔE OKLab 0,041 de l'ambre et 0,061 du rouge — sous le repère toléré (0,091). Après déplacement, 0,088 et 0,093, et les deux GAGNENT du contraste (4,92:1 et 7,57:1). */ --isis-warning: #8f5700; --isis-warning-soft: #fef3c7; --isis-danger: #a51b1b; --isis-danger-soft: #fee2e2; /* Info : note neutre (ni alerte, ni succès). Bleu assez foncé pour servir aussi de couleur de texte sur --isis-info-soft (contraste ≈ 8:1, AA large). */ --isis-info: #1e40af; --isis-info-soft: #dbeafe; /* Encre d'un texte posé sur le -soft de sa famille (pastille de marge des lignes de devis) : la teinte de base frôle le seuil sur son fond (warning 4,51:1, success 4,57:1) et le danger sombre tombe à 4,35:1. Encres : 5,3 à 7,2:1 en clair, 5,6 à 6,3:1 en sombre. */ --isis-success-text: #166534; --isis-warning-text: #92400e; --isis-danger-text: #a51b1b; --isis-info-text: #1e40af; /* Dosage du mélange qui produit --isis-current-mod-strong (cf. .isis-shell plus bas) — un texte de module sur son propre fond -soft (ex. .isis-subtab.is-active). Sur les 16 couleurs de module, le pire cas clair (sirh, 3,32:1) et le second pire (gescom lui-même, mesuré 4,24:1 en critique de conception) échouaient tous deux l'AA 4,5:1 texte. 80% du token + 20% de noir porte le pire cas à 4,85:1 (gescom à 5,94:1) — vérifié contre les valeurs hex réelles de :root, pas supposé. Le thème sombre passe déjà large (5,28:1 au pire) donc n'a pas besoin d'assombrir davantage : cf. --isis-mod-active-mix redéfini à 100% dans :root[data-theme="dark"] plus bas — un assombrissement supplémentaire y aurait fait chuter certains modules sous l'AA (vérifié : gesinfo tombait à 3,53:1 avec le même dosage que le clair). */ --isis-mod-active-mix: 80%; /* === Accents par module — RESATURÉS (S~55%, L~45%) Utilisés sur sidebar active, breadcrumbs, CTAs primaires, KPI values, border accent gauche des grilles, identité de l'espace courant. */ --isis-mod-gescom: #2563eb; --isis-mod-gescom-soft: #dbeafe; --isis-mod-gescompta: #7c3aed; --isis-mod-gescompta-soft: #ede9fe; --isis-mod-sirh: #059669; --isis-mod-sirh-soft: #d1fae5; /* admin valait EXACTEMENT --isis-text-muted (#475569), et son soft était un alias de --isis-border : l'identité du module transverse était donc peinte dans la couleur du texte secondaire, et son fond dans celle des filets. Une pastille « admin » se lisait comme du texte grisé. Il prend une ardoise-indigo : 10,3 d'écart perceptuel à --isis-text-muted, 7,3 au plus proche de tout le reste (repère accepté : 4,4). Le soft devient un token à part entière, plus un emprunt. */ --isis-mod-admin: #3f6212; /* vert lime — écarté du bleu ardoise de l'accent (2026-09-22) ; 7,1:1 sur blanc */ --isis-mod-admin-soft: #ecfccb; --isis-mod-gesproj: #0e7490; --isis-mod-gesproj-soft: #cffafe; /* gesmaff valait EXACTEMENT --isis-warning (#b45309), et son soft --isis-warning-soft (#fef3c7) : toute surface portant l'identité du module se lisait comme un avertissement — c'est l'origine du bloc « consommation du contrat-cadre » qui avait l'air alerté à 2,9 % de son plafond. Déplacer le SÉMANTIQUE aurait été pire : l'ambre est la convention universelle du warning. gesmaff reste donc dans la famille chaude, mais assombri : 13,9 d'écart à --isis-warning, soit plus du double du repère accepté (4,4) et davantage que la paire gescom/ged (6,6) qui coexiste déjà. Contrastes 8,90:1 sur blanc et 6,92:1 sur son propre soft. */ --isis-mod-gesmaff: #7e3300; --isis-mod-gesmaff-soft: #ffddbf; --isis-mod-gesst: #be185d; /* pink-700 — sous-traitance (distinct des autres accents) */ --isis-mod-gesst-soft: #fce7f3; --isis-mod-gesmat: #44403c; /* stone-700 — matériel terrain (warm gray, distinct de admin slate) */ --isis-mod-gesmat-soft: #f5f5f4; /* Teintes propres aux 4 modules nés du split de gesmat (2026-08-11). Aucun n'en avait : chacun avait hérité par copie de la palette d'un module existant, si bien qu'un tiers du parc de modules ne portait pas d'identité chromatique — le principe de DESIGN.md §2 ne tenait pas. Deux tombaient en prime sur une couleur SÉMANTIQUE, ce qui fait mentir l'écran : gespark == --isis-info (et -soft == --isis-info-soft, == gescom-soft) gesmob-soft == --isis-warning-soft (== gesmaff-soft, cf. le bloc « consommation du contrat-cadre » qui avait l'air alerté en permanence avant le 2026-08-11) gesfac == gesst sur ses QUATRE valeurs gesinfo-soft == ged-soft dans les deux thèmes Teintes choisies dans les intervalles libres du cercle OKLCH, puis clarté ajustée sous contrainte : chaque principal rend >= 4,5:1 sur blanc ET sur son propre soft (3 modules historiques ne tiennent pas ce seuil — ged 3,63, gescom 4,24, sirh 3,32 : dette existante, non aggravée ici). Écarts perceptuels aux modules existants : 10,8 / 10,4 / 7,5 / 10,4 en clair, contre 4,4 pour la paire la plus serrée déjà acceptée (gescompta/gesqhse). gesinfo garde son principal : il est déjà à 12,9 de ged, seuls ses soft étaient identiques. Les soft de tout le système vivent à 0,9 d'écart minimum (famille quasi-blanche) — c'est l'égalité exacte qui était le défaut, pas la proximité. */ --isis-mod-gespark: #a04b94; /* prune — parc auto / véhicules (ex-blue-700, = --isis-info) */ --isis-mod-gespark-soft: #ffe5fa; --isis-mod-gesinfo: #4338ca; /* indigo-700 — parc informatique (principal conservé) */ --isis-mod-gesinfo-soft: #d3dcff; --isis-mod-gesmob: #806b00; /* olive — mobilier de chantier (ex-amber, soft = --isis-warning-soft) */ --isis-mod-gesmob-soft: #f4efd2; --isis-mod-gesfac: #004e58; /* teal profond — facility / emplacements (ex-pink, = gesst) */ --isis-mod-gesfac-soft: #d1f6fb; --isis-mod-gespla: #0f766e; /* teal-700 — planning (distinct de tous les autres modules) */ --isis-mod-gespla-soft: #ccfbf1; --isis-mod-gesqhse: #9333ea; /* violet-600 — QHSE & risques (distinct de tous les autres modules) */ --isis-mod-gesqhse-soft: #f3e8ff; --isis-mod-ged: #6366f1; /* indigo — identité GED désormais distincte */ --isis-mod-ged-soft: #e0e7ff; --isis-mod-monespace: #c2410c; /* terre cuite — l'accueil porte la couleur du produit (2026-09-23) ; 4,70:1 sur le tag 11px, AA tenu, moins de marge qu'avant (6,4:1) */ --isis-mod-monespace-soft: #fff1ec; --isis-mod-m365: #0f5c8c; /* bleu ardoise — connecteur Microsoft 365, distinct de gescom */ --isis-mod-m365-soft: #d9edf9; --isis-mod-recette: #6b4f2a; /* brun sable — recette, distinct de gesmaff terre cuite */ --isis-mod-recette-soft: #f2e9dc; /* Repli d'un module sans jeu de couleurs : neutre assumé, jamais une teinte empruntée à un autre module (qui ferait croire à une parenté). */ --isis-mod-default: #475569; --isis-mod-default-soft: #e2e8f0; /* Ma planification — couleur de la source (dialog) */ --isis-planif-mobil: oklch(0.52 0.094 218); /* pétrole (mobilisation / commande) */ --isis-planif-affect: oklch(0.55 0.12 285); /* violet (affectation / planning) */ /* Palette catégorielle — 1 teinte par commande/projet (texte blanc, contraste AA) */ --isis-cat-1: oklch(0.52 0.094 218); /* pétrole */ --isis-cat-2: oklch(0.50 0.13 285); /* violet */ --isis-cat-3: oklch(0.50 0.12 155); /* vert */ --isis-cat-4: oklch(0.52 0.15 40); /* terre cuite */ --isis-cat-5: oklch(0.50 0.13 260); /* bleu */ --isis-cat-6: oklch(0.50 0.15 340); /* magenta */ --isis-cat-7: oklch(0.50 0.10 130); /* olive */ --isis-cat-8: oklch(0.50 0.16 22); /* rouge */ /* === Élévation (Flat++ 3 tiers — calibrée pour être perceptible) Refonte B "Branded depth" 2026-05-17 : palette bumpée d'un cran. elevation-1 = Tailwind shadow-lg (repos cartes/KPI/sidepanels) elevation-hover = Tailwind shadow-xl (lift visible au survol) elevation-2 = Tailwind shadow-2xl (dialogs/dropdowns réellement flottants) */ --isis-elevation-0: none; /* Bump 2026-05-26 : rayons +33%, opacité +30% sur elevation-1 pour donner plus de relief aux cards/KPI/sidepanels (retour utilisateur "trop plat"). elevation-hover bumpé proportionnellement pour préserver le "lift" perçu au survol — sinon repos et hover se confondent visuellement. */ /* Relift 2026 : ombres affinées en 2 couches (relief présent mais élégant, moins « lourd »). */ --isis-elevation-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 22px -6px rgba(16, 24, 40, 0.13); --isis-elevation-hover: 0 2px 6px rgba(16, 24, 40, 0.07), 0 18px 34px -8px rgba(16, 24, 40, 0.18); --isis-elevation-2: 0 28px 54px -14px rgba(16, 24, 40, 0.28); --isis-elevation-focus: 0 0 0 4px rgba(8, 145, 178, 0.22); /* fallback cyan acier si --isis-current-mod absent */ /* Scroll-shadow sidepanels (recette Lea Verou, calquée sur le menu .isis-subnav__scroll). Barre de défilement masquée ; seuls les fondus haut/bas signalent le contenu masqué. Réglés en UN seul point — `--ink` = intensité de l'ombre (menu = 22%, sidepanels volontairement plus prononcés), `--cover` = bande couleur du fond qui masque l'ombre à l'extrémité, `--fade` = épaisseur de l'ombre révélée. */ --isis-scroll-shadow-bg: var(--isis-surface); --isis-scroll-shadow-ink: color-mix(in srgb, var(--isis-text) 32%, transparent); --isis-scroll-shadow-cover: 30px; --isis-scroll-shadow-fade: 18px; /* Filet périmétrique teinté module — remplace les ex-bandeaux gauche 3px décoratifs sur les cartes/encarts (refonte 2026-06-14, cf. DESIGN.md §1/§2). Identité module = fond très légèrement teinté + filet 1px qui entoure toute la carte, au lieu d'une barre verticale « étiquette ». Adaptatif au module courant ; recalcule automatiquement en dark mode (tokens redéfinis). */ --isis-card-mod-bg: color-mix(in srgb, var(--isis-current-mod, var(--isis-accent)) 7%, var(--isis-surface)); --isis-card-mod-border: 1px solid color-mix(in srgb, var(--isis-current-mod, var(--isis-accent)) 32%, transparent); /* === Motion (nouveau — formalisme) === */ --isis-motion-fast: 120ms ease-out; --isis-motion-base: 180ms cubic-bezier(0.2, 0, 0, 1); /* Entrée de contenu (arrivée de données après skeleton, apparition de panneau) — courbe ease-out-quint : départ vif, atterrissage doux, jamais de rebond. */ --isis-motion-enter: 240ms cubic-bezier(0.22, 1, 0.36, 1); /* Élargi 2026-05-27 : 240px → 280px. Les libellés métier ISIS sont longs (« Comptes et interlocuteurs », « Bordereaux de prix unitaires », « Règles d'approbation ») et le dropdown picker module en tête consomme de la largeur visuelle. 280px donne ~30 % de marge sur ces libellés sans être démesuré (Notion = 240, Slack = 260, VS Code = 240-280). Impact en cascade : la zone 1 du header (qui lit --isis-subnav-w) s'élargit aussi → workspace switcher mieux respiré. */ --isis-subnav-w: 280px; /* Mode icon-only (refonte 2026-05-26 sub-nav persistant). 64px = un bouton 44px confortable centré dans une colonne 64px + 10px de gouttière de chaque côté. */ --isis-subnav-w-collapsed: 64px; --isis-header-h: 56px; /* Tiroir « Avis et aide » : largeur unique, quel que soit l'onglet — sinon il saute à chaque bascule. */ --isis-assist-width: 480px; --isis-radius: 6px; /* Ardoise 2026-07-04 : rayons resserrés d'un cran (ex-Instrument 8px) — densité « outil » */ --isis-radius-sm: 4px; /* ex-5px */ /* --isis-radius-lg = grands conteneurs/sections ; --isis-radius-pill = badges/chips. */ --isis-radius-lg: 10px; /* ex-12px */ --isis-radius-pill: 999px; /* Échelle de superposition : voile de fermeture < menu déroulant < fenêtre modale. */ --isis-z-overlay: 999; --isis-z-dropdown: 1000; --isis-z-modal: 1100; /* === Échelle d'espacement (tokenisation DESIGN.md §6 — additif 2026-06) La grille xs→2xl était documentée comme opposable mais jamais exposée en variables CSS. Tokenisée ici pour câblage progressif (rythme cohérent). Aucune règle ne les consomme tant qu'on ne les branche pas → zéro régression. */ --isis-space-xs: 0.25rem; /* intra-élément (icône+texte) */ --isis-space-sm: 0.5rem; /* boutons inline, badges */ --isis-space-md: 1rem; /* défaut : gap stack, padding card */ --isis-space-lg: 1.5rem; /* sections principales */ --isis-space-xl: 2rem; /* blocs majeurs (rare) */ --isis-space-2xl: 3rem; /* marge page grand écran (rare) */ /* === Échelle de maîtrise (heatmap matrice de compétences) === 4 paliers fond/encre, repris du mockup validé sirh-competences-matrice.html. Consommés UNIQUEMENT par .isis-mx__cell.l1..l4 et la légende — ne pas réutiliser ailleurs comme couleurs sémantiques. */ --isis-lvl-1: #d4dadf; --isis-lvl-1-ink: #5b6570; /* Débutant */ --isis-lvl-2: #9cc2ec; --isis-lvl-2-ink: #11375f; /* Intermédiaire */ --isis-lvl-3: #3fae74; --isis-lvl-3-ink: #0c3d26; /* Expert */ --isis-lvl-4: #137a4a; --isis-lvl-4-ink: #ffffff; /* Formateur */ /* === Échelle typographique nommée (L3 — refonte cohérence typo 2026-06-24) Avant : ~45 valeurs rem + ~26 valeurs px dispersées sans logique d'échelle (la grappe 0.78/0.8/0.82/0.85rem pesait à elle seule ~28 % des font-size). 8 marches canoniques pour rabattre progressivement les valeurs dispersées. Câblage progressif : tant qu'une règle ne les consomme pas, zéro régression. */ --isis-fs-caption: 0.65rem; /* 10.4px — labels KPI, en-têtes grille, suffixes, hints */ --isis-fs-label: 0.72rem; /* 11.5px — petits labels, captions, UI tertiaire */ --isis-fs-sm: 0.8rem; /* 12.8px — texte secondaire, badges, métadonnées, mono */ --isis-fs-base: 0.85rem; /* 13.6px — corps par défaut, cellules de grille, UI principal */ --isis-fs-md: 0.95rem; /* 15.2px — texte normal, descriptions, breadcrumb */ --isis-fs-lg: 1.15rem; /* 18.4px — valeurs KPI, titres de section */ --isis-fs-xl: 1.4rem; /* 22.4px — sous-titres de page, grandes cartes */ --isis-fs-2xl: 1.75rem; /* 28px — titres de page, display */ --isis-fw-semibold: 600; --isis-fs-xs: 0.68rem; /* 10.9px — micro-labels, boutons repli organigramme */ /* Police à chasse fixe — DÉFINIE ICI depuis le 2026-09-06. Elle ne l'était nulle part, alors que 129 règles de cette feuille et 75 styles de .razor l'appelaient. Les appels qui portaient un repli (« var(--isis-font-mono, 'Geist Mono', monospace) », 104 cas) marchaient par accident ; les 100 autres, sans repli, rendaient une déclaration invalide — donc la police HÉRITÉE, c'est-à-dire Geist sans. Codes, IP, identifiants de licence, noms de base et horodatages n'étaient pas à chasse fixe, sur toute l'application. Geist Mono est self-hostée (@font-face en tête de fichier). */ --isis-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --isis-surface-2: var(--isis-surface-alt); /* alias sémantique couche intermédiaire */ /* === Normalisation Radzen (L1 — 2026-06-24) Radzen tournait à ses défauts : --rz-body-font-size: 1rem (16px), grilles natives 0.875rem, etc. → tout composant Radzen natif hors scope .isis-form débordait (~17 % trop gros) vs l'univers ISIS calé à 0.85rem. isis-theme.css est chargé APRÈS material-base.css → ces overrides gagnent. --rz-input-font-size dérive de --rz-body-font-size : ce seul lever normalise TOUS les inputs natifs (TextBox/DropDown/Numeric/DatePicker/TextArea/MultiSelect) + RadzenText Body + RadzenAlert + labels, d'un coup. */ --rz-body-font-size: var(--isis-fs-base); /* 1rem → 0.85rem : lever maître */ --rz-grid-cell-font-size: var(--isis-fs-base); /* 0.875rem → 0.85rem : aligne grilles natives */ --rz-badge-font-size: var(--isis-fs-sm); /* 0.75rem → 0.8rem : aligne sur .isis-badge */ /* En-tête de grille native : la règle Radzen `.rz-grid-table thead th .rz-column-title` (spécificité 0,2,2) gagne sur tout sélecteur scopé qu'on écrirait — mais elle lit ces tokens. On les surcharge ici (voie idiomatique, pas de guerre de spécificité) pour reproduire .isis-grid__head : 0.65rem MAJUSCULES gris doux. Vérifié au DOM via Playwright le 2026-06-24 (l'override par sélecteur ne prenait que le letter-spacing). */ --rz-grid-header-font-size: var(--isis-fs-caption); /* 0.875rem → 0.65rem */ --rz-grid-header-text-transform: uppercase; --rz-grid-header-color: var(--isis-text-soft); --rz-grid-header-font-weight: 600; /* === Champ désactivé (DESIGN.md « Champ désactivé ») === Radzen peint un champ désactivé sur `--rz-base-background-color`, soit le blanc d'un champ à remplir : seul le texte pâlissait. Le remplissage devient le signal, partout, sans sélecteur — les composants natifs lisent ces variables. Alias de jetons, donc le mode sombre suit sans redéclaration. `[readonly]` reste hors de cette règle : un dropdown Radzen porte toujours un input caché en lecture seule. */ --isis-field-disabled-bg: var(--isis-surface-alt); --isis-field-disabled-border: var(--isis-border); /* le contour doux disparaissait sur un conteneur gris */ --isis-field-disabled-text: var(--isis-text-muted); --rz-input-disabled-background-color: var(--isis-field-disabled-bg); --rz-input-disabled-border: var(--rz-border-width) solid var(--isis-field-disabled-border); --rz-input-disabled-border-block-end: var(--rz-border-width) solid var(--isis-field-disabled-border); --rz-input-disabled-color: var(--isis-field-disabled-text); --rz-input-disabled-placeholder-color: var(--isis-field-disabled-text); /* === Marque produit IRIS (DESIGN.md « Marque produit ») === Réservés au composant IrisMarque. La terre cuite de la barre du milieu n'apparaît nulle part ailleurs, et un filet le vérifie (MarqueIrisJetonsTests) : la primaire --isis-accent en est la VOISINE, jamais la copie. La tuile est unie, sans dégradé : son relief (ombre portée, biseau, barres embossées) ne vient que d'ombres, proportionnées au côté de la tuile. Elle ne se détache pas de la page par contraste (1,02 à 1,39:1) et n'a pas à le faire : ce sont les barres qui portent la marque, à 3:1 au moins sur la tuile ET sur la page. */ --isis-brand-ink: #e6edf3; --isis-brand-contour: #d3dce6; --isis-brand-barre: #335171; --isis-brand-accent: #b23d07; --isis-brand-ombre-proche: rgba(16, 24, 40, .18); --isis-brand-ombre-portee: rgba(16, 24, 40, .35); --isis-brand-biseau-haut: rgba(255, 255, 255, .9); --isis-brand-biseau-bas: rgba(16, 24, 40, .12); --isis-brand-ombre-barre: rgba(16, 24, 40, .55); --isis-brand-lumiere-barre: #fff; } html, body { background-color: var(--isis-bg); color: var(--isis-text); font-family: 'Geist', system-ui, -apple-system, sans-serif; /* Relift typo 2026 : rendu net (Geist est géométrique → le lissage évite le gras perçu), micro-tracking négatif pour un grain plus moderne/dense. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -0.006em; } /* Élévation maîtrisée — Flat++ (cf. DESIGN.md §1 Profondeur) : 2 tiers d'ombre + halo focus. Les composants qui doivent rester plats surchargent localement (form linear inputs, segmented control, action buttons). */ .rz-card { border: 1px solid var(--isis-border); border-radius: var(--isis-radius); box-shadow: var(--isis-elevation-1); } .rz-dialog { box-shadow: var(--isis-elevation-2); } /* Le thème material force UPPERCASE + letter-spacing 1.25px sur tous les boutons : casse normale, comme les boutons d'en-tête ISIS (arbitrage propriétaire 2026-10-06). */ .rz-button { text-transform: none; letter-spacing: normal; box-shadow: none; transition: background-color var(--isis-motion-fast), color var(--isis-motion-fast), box-shadow var(--isis-motion-fast); } /* Taille de texte des boutons (L1 — 2026-06-24) : Radzen défaut = 1.0625rem (17px) en base et 0.875rem en .rz-button-md → trop gros / hétérogène vs l'univers ISIS calé à 0.85rem. On rabat toutes les tailles sur l'échelle --isis-fs-*. Les boutons icône-only ne sont pas touchés (le glyphe lit --rz-icon-size via .rzi, pas font-size). Les actions de form-linear (.isis-form-linear__actions .rz-button, 0.8rem !important) restent prioritaires. */ .rz-button, .rz-button-md { font-size: var(--isis-fs-base); } .rz-button-sm { font-size: var(--isis-fs-sm); } .rz-button-lg { font-size: var(--isis-fs-md); } .rz-button:focus-visible { /* Halo focus à la couleur du module courant (color-mix : ~98 % browser support). Fallback sur --isis-elevation-focus si le browser ne supporte pas color-mix. */ box-shadow: var(--isis-elevation-focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--isis-current-mod, var(--isis-accent)) 22%, transparent); } /* NB : la classe racine réelle du RadzenDataGrid de cette version est `.rz-data-grid` (avec tiret) — `.rz-datagrid` (sans tiret) ne matche AUCUN noeud (vérifié au DOM via Playwright le 2026-06-24). Les règles ci-dessous étaient donc mortes ; on cible désormais `.rz-data-grid` (en gardant l'ancien alias par sécurité inter-versions). */ .rz-data-grid, .rz-datagrid { box-shadow: none; } .rz-data-grid .rz-data-row:nth-child(even), .rz-datagrid .rz-data-row:nth-child(even) { background-color: var(--isis-surface-alt); } .rz-data-grid .rz-grid-table, .rz-datagrid .rz-grid-table { border: 1px solid var(--isis-border); border-radius: var(--isis-radius); overflow: hidden; } .rz-data-grid thead, .rz-datagrid thead { background-color: var(--isis-surface-alt); } /* Parité en-tête (L2 — 2026-06-24) : les ~11 RadzenDataGrid natifs (app tenant + console master) doivent porter le même en-tête que la grille custom .isis-grid__head (cf. ligne ~8380) — MAJUSCULES, gris doux, letter-spacing — au lieu du titre Radzen casse normale/foncé. La taille (0.65rem) vient déjà du token --rz-grid-header-font-size. */ .rz-data-grid .rz-column-title, .rz-data-grid .rz-column-title-content, .rz-datagrid .rz-column-title, .rz-datagrid .rz-column-title-content { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--isis-text-soft); } /* ============================================================================ Material Symbols Outlined — alias global (2026-05-22) ============================================================================ Radzen charge le fichier MaterialSymbolsOutlined.woff2 sous le nom de font « Material Symbols » (cf. material-base.css). Mais beaucoup de templates tiers + le code ISIS utilisent la convention class="material-symbols-outlined". Sans cette règle, les ligatures s'affichent en texte brut (« flag », « assignment »). Cette règle remappe la class générique vers la font Radzen — couvre tous les usages dans l'app d'un coup. */ .material-symbols-outlined { font-family: 'Material Symbols'; font-weight: normal; font-style: normal; font-size: inherit; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; } /* Même remappage pour la convention « material-symbols-rounded » (utilisée par les markers de plan d'étage gesfac dans isis-plan-etage.js). Sans cette règle, les icônes des emplacements s'affichaient en texte brut (« place », « person », « desktop_windows »). Radzen ne fournit qu'une seule font « Material Symbols » — on l'utilise pour les deux conventions. Ajout 2026-05-30. */ .material-symbols-rounded { font-family: 'Material Symbols'; font-weight: normal; font-style: normal; font-size: inherit; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; } /* ============================================================================ Shell général ============================================================================ */ .isis-shell { display: flex; flex-direction: column; /* Shell verrouillé à la hauteur du viewport : header + rail restent fixes, seul .isis-shell__content scrolle. 100dvh = dynamic viewport (mobile/tablette), fallback 100vh pour anciens navigateurs. */ height: 100vh; height: 100dvh; overflow: hidden; background-color: var(--isis-bg); position: relative; /* repère pour le skip-link absolu */ } /* Skip link a11y (WCAG 2.4.1) — invisible au repos, devient visible au focus clavier (1re Tab pression sur la page). Permet aux utilisateurs SR/clavier de sauter directement au
. Refonte shell 2026-05-27. */ .isis-shell__skip-link { position: absolute; left: 0; top: 0; transform: translateY(-200%); z-index: 9999; padding: 0.65rem 1rem; background: var(--isis-accent); color: var(--isis-on-accent); font-weight: 600; font-size: 0.875rem; border-radius: 0 0 var(--isis-radius-sm) 0; text-decoration: none; transition: transform 120ms ease-out; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18); } /* Meme correction que le CTA de /master : l'anneau est pose SUR `--isis-accent` (le fond du lien), avec un offset NEGATIF donc entierement a l'interieur. Blanc en dur y mesurait 2,24:1 en theme sombre — et c'est le tout premier controle atteignable au clavier de chaque page. */ .isis-shell__skip-link:focus, .isis-shell__skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--isis-on-accent); outline-offset: -4px; } /* Quand on cible #main-content via le skip link, retire le focus ring browser (visuellement inutile, l'user vient juste d'arriver via le skip link). */ .isis-shell__content:focus { outline: none; } .isis-shell__body { display: flex; flex: 1; min-height: 0; position: relative; /* repère pour le sub-nav fixed */ } /* ---------------------------------------------------------------------------- Colonne gauche du shell — refonte 2026-05-28. Contient empilées verticalement : 1. .isis-shell__ctxzone — cartes espace de travail + module 2. — titre module + items (reste) Largeur = var(--isis-subnav-w) (280px étendu / 64px collapsé), synchronisée avec le header zone 1 via la classe is-subnav-collapsed sur .isis-shell. ---------------------------------------------------------------------------- */ .isis-shell__sidebar { display: flex; flex-direction: column; flex-shrink: 0; /* box-sizing explicite (ce projet n'a PAS de reset universel) : la colonne doit mesurer --isis-subnav-w BORDURE COMPRISE. Sans lui elle occupait 281 px, ce qui (1) décalait d'un pixel son filet par rapport à celui de .isis-header__zone-1, cellule de grille large d'exactement --isis-subnav-w, et (2) — le symptôme visible — plaçait ce filet sous les calques `position: fixed` calés à `left: var(--isis-subnav-w)` (.isis-focus-zone--expanded, .isis-orgchart--expanded, .isis-geo-layers--expanded, le voile du drawer master-detail). Ces calques, opaques et en z-index 950 contre 30, effaçaient le trait de colonne sur toute leur hauteur : en plein écran de fiche, la séparation menu / contenu disparaissait sous le fil d'Ariane (mesuré le 2026-09-24 sur /gescom/tiers/{id}). */ box-sizing: border-box; width: var(--isis-subnav-w); background-color: var(--isis-surface); /* Bordure droite alignée avec la zone 1 du header (continuité visuelle). */ border-right: 1px solid var(--isis-border-strong); transition: width var(--isis-motion-base); position: relative; z-index: 30; min-height: 0; } .isis-shell.is-subnav-collapsed .isis-shell__sidebar { width: var(--isis-subnav-w-collapsed, 64px); } /* ── Zone de contexte (cartes jumelles workspace + module) — refonte 2026-06-22 ── Remplace l'ancienne WS bar + co-branding filiale + variantes collapsed. Empile la carte workspace (WorkspaceSwitcher) et la carte module (WorkspaceBar) en tête de la colonne gauche, au-dessus du sub-nav. */ .isis-shell__ctxzone { flex-shrink: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 11px 6px; } /* Carte module (zone contexte) : conteneur teinté = bouton « ouvrir la modale module » (corps) + séparateur + bouton « réduire le panneau » (chevron). Refonte 2026-06-22. */ .isis-ctxcard { display: flex; align-items: stretch; width: 100%; border: 1px solid transparent; border-radius: var(--isis-radius); background: var(--isis-module-hue-soft, var(--isis-current-mod-soft)); overflow: hidden; } .isis-ctxcard__open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 9px; border: none; background: transparent; cursor: pointer; text-align: left; font: inherit; } .isis-ctxcard__open:hover { background: color-mix(in oklch, var(--isis-module-hue, var(--isis-current-mod)) 8%, transparent); } .isis-ctxcard__open:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--isis-module-hue, var(--isis-current-mod)); } .isis-ctxcard__avatar { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 800; overflow: hidden; } .isis-ctxcard__avatar img { width: 100%; height: 100%; object-fit: cover; } .isis-ctxcard__avatar--mod { background: var(--isis-module-hue, var(--isis-current-mod)); color: #fff; } .isis-ctxcard__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.18; flex: 1; } .isis-ctxcard__title { font-size: 0.84rem; font-weight: 670; color: var(--isis-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .isis-ctxcard__sub { font-size: 0.66rem; color: var(--isis-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .isis-ctxcard__div { width: 1px; align-self: stretch; margin: 7px 0; background: color-mix(in oklch, var(--isis-module-hue, var(--isis-current-mod)) 22%, transparent); flex: 0 0 auto; } .isis-ctxcard__collapse { flex: 0 0 auto; width: 34px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--isis-module-hue, var(--isis-current-mod)); cursor: pointer; } .isis-ctxcard__collapse:hover { background: color-mix(in oklch, var(--isis-module-hue, var(--isis-current-mod)) 14%, transparent); } .isis-ctxcard__collapse:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--isis-module-hue, var(--isis-current-mod)); } /* mode réduit : la carte module devient un avatar-bouton 36×36 centré */ .isis-ctxcard--collapsed { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 auto; padding: 3px; cursor: pointer; } /* bouton « étendre le panneau » (mode réduit), sous les avatars de contexte */ .isis-ctxzone__expand { width: 32px; height: 32px; margin: 2px auto 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--isis-border-strong); border-radius: var(--isis-radius); background: var(--isis-surface); color: var(--isis-text-muted); cursor: pointer; } .isis-ctxzone__expand:hover { background: var(--isis-surface-alt); } .isis-ctxzone__expand:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--isis-accent) 30%, transparent); } /* Pilule « espace de travail » (en-tête, zone 2) — refonte 2026-09-24, variante A. Quittée la sidebar : elle vit désormais à gauche du sélecteur de module, dans les DEUX dispositions (l'espace de travail n'est pas une propriété du module). Texte seul — ni vignette d'entreprise ni cartouche de groupe, les logos clients ayant été retirés du chrome : plus de tuile logo, plus de mode réduit. Géométrie et teintes alignées sur .isis-header__modsel (36 px, fond et bordure NEUTRES) — deux sélecteurs jumeaux, côte à côte ; l'espace de travail ne prend pas la couleur du module. box-sizing explicite : la variante verrouillée est un (pas un bouton, qui l'aurait hérité de la feuille du navigateur) et ce projet n'a PAS de reset universel — sans lui, ses bordures ajouteraient 2 px et la pilule dépasserait sa jumelle. */ .isis-wscard { box-sizing: border-box; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; max-width: 250px; height: 36px; padding: 0 10px; border: 1px solid var(--isis-border); border-radius: var(--isis-radius); background: var(--isis-surface); color: var(--isis-text); cursor: pointer; text-align: left; font: inherit; transition: border-color 120ms, background-color 120ms; } .isis-wscard.is-switchable:hover { border-color: color-mix(in oklch, var(--isis-accent) 38%, var(--isis-border)); } .isis-wscard:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--isis-accent) 28%, transparent); } /* Une seule entreprise accessible : le bloc cesse de mimer un contrôle — c'est un (pas un Ajouté 2026-05-19 pour gesmat (types/marques/modèles création inline). */ .isis-form-linear__inline-add { display: flex; align-items: stretch; gap: 0.4rem; } .isis-form-linear__inline-add > :first-child { flex: 1; min-width: 0; } .isis-form-linear__inline-add-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; flex-shrink: 0; background: var(--isis-surface); border: 1px solid var(--isis-border); border-radius: var(--isis-radius); color: var(--isis-current-mod, var(--isis-accent)); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .isis-form-linear__inline-add-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--isis-current-mod, var(--isis-accent)) 8%, white); border-color: var(--isis-current-mod, var(--isis-accent)); } .isis-form-linear__inline-add-btn:focus-visible { outline: 2px solid var(--isis-current-mod, var(--isis-accent)); outline-offset: 2px; } .isis-form-linear__inline-add-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Flash visuel auto-fill : signale à l'user qu'un dropdown a été pré-rempli par cascade (typiquement EquipementFormDialog quand on choisit un modèle qui auto-remplit type/catégorie/marque). Animation 1.4s, fond couleur module soft puis fade out. Audit ui-ux 2026-05-19 bloquant#1. */ @keyframes isis-autofill-pulse { 0% { background-color: color-mix(in srgb, var(--isis-current-mod, var(--isis-accent)) 14%, white); } 60% { background-color: color-mix(in srgb, var(--isis-current-mod, var(--isis-accent)) 14%, white); } 100% { background-color: transparent; } } .isis-autofill-flash .rz-dropdown { animation: isis-autofill-pulse 1.4s ease forwards; border-radius: var(--isis-radius); } /* Switch densifié : switch + hint sur la même ligne. */ .isis-form-linear__switch-wrap { display: flex; align-items: flex-start; gap: 0.6rem; } .isis-form-linear__switch-hint { font-size: 0.72rem; color: var(--isis-text-muted); line-height: 1.4; padding-top: 0.2rem; flex: 1; } /* Hint sous un champ (descriptif court). */ .isis-form-linear__field-hint { display: block; font-size: 0.72rem; color: var(--isis-text-muted); margin-top: 0.2rem; line-height: 1.4; } /* Motif de figement des jalons d'une affaire (AffaireJalonsPanel). */ .isis-jalons-fige { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--isis-text-muted); } .isis-jalons-fige .rzi { font-size: 14px; } /* Variantes de hint avec icône (état géolocalisation, etc.) — évite les styles inline. */ .isis-form-linear__field-hint--ok, .isis-form-linear__field-hint--warn { display: flex; align-items: center; gap: 0.4rem; } .isis-form-linear__field-hint--warn { color: var(--isis-warning); } .isis-form-linear__field-hint--error { display: block; color: var(--isis-danger, #a51b1b); font-size: 0.72rem; margin-top: 0.2rem; line-height: 1.4; } /* Convention générique d'aide de champ (chantier aide harmonisée) : une phrase sous un champ, reliée par aria-describedby="" — jamais un roman. Pas de portée .isis-form-linear : utilisable partout, contrairement à .isis-form-linear__field-hint ci-dessus qui reste réservé à ce patron. */ .isis-field-help { display: block; margin-top: var(--isis-space-xs); color: var(--isis-text-muted); font-size: var(--isis-fs-sm); } /* Rangée action alignée en bas (champ statut + bouton), ex. bloc géolocalisation. */ .isis-form-linear__row--actions-end { align-items: flex-end; margin-top: 0.5rem; } /* Largeur contrainte pour les petits dialogs form-linear (évite le max-width inline). */ .isis-form-linear--w560 { max-width: 560px; } /* Field — label au-dessus, input en dessous, helper (densifié) */ .isis-form-linear .field { margin-bottom: 0.75rem; } /* Message d'erreur d'UN champ, sous le champ. Texte nu et non encadré rouge : `.isis-form-linear__error` est un bandeau de formulaire — le reprendre ici entasserait une boîte pleine sous chaque champ, et son couple danger/danger-soft ne tient que 4,35:1 en sombre, sous le seuil AA pour du texte de 13 px. Le texte seul sur la surface du dialogue tient 6,5:1 en clair. */ .isis-form-linear .field-error { margin-top: 0.3rem; font-size: 0.78rem; line-height: 1.4; color: var(--isis-danger); } /* En sombre, --isis-danger (#e5534b) tombe à 4,50:1 sur la surface du dialogue : pile sur le seuil, sans marge pour un tenant white-label dont la surface dériverait. Éclairci VERS l'encre du thème — donc toujours par les tokens, jamais par un hex posé là —, il remonte à 5,6:1 en restant franchement rouge. */ :root[data-theme="dark"] .isis-form-linear .field-error { color: color-mix(in srgb, var(--isis-danger) 78%, var(--isis-text)); } .isis-form-linear .field-row { display: grid; gap: 0.75rem; margin-bottom: 0; } .isis-form-linear .field-row > .field { margin-bottom: 0.75rem; } .isis-form-linear .field-row.cols-4-8 { grid-template-columns: 4fr 8fr; } .isis-form-linear .field-row.cols-8-4 { grid-template-columns: 8fr 4fr; } .isis-form-linear .field-row.cols-3-9 { grid-template-columns: 3fr 9fr; } .isis-form-linear .field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .isis-form-linear .field-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .isis-form-linear .field-row.cols-2 { grid-template-columns: 1fr 1fr; } /* Un champ de la paire est conditionnel (ex. Interlocuteur du client visible seulement si un client est choisi) et disparaît complètement du DOM plutôt que d'être masqué : le champ restant reprend toute la largeur au lieu de laisser une colonne vide à droite (polish hauteur formulaire commande, 2026-07-28). */ .isis-form-linear .field-row > .field:only-child { grid-column: 1 / -1; } /* Repli responsive (polish hauteur formulaire commande, 2026-07-28) : au-delà des dialogs larges (780px) sur viewport étroit, deux champs côte à côte deviennent illisibles — repli 1 colonne. Seuil aligné sur les autres grilles de ce fichier qui font le même repli (.isis-totals-grid, .isis-temps-selector, .isis-fmt-tokens → 720px). */ @media (max-width: 720px) { .isis-form-linear .field-row.cols-2, .isis-form-linear .field-row.cols-3, .isis-form-linear .field-row.cols-4, .isis-form-linear .field-row.cols-4-8, .isis-form-linear .field-row.cols-8-4, .isis-form-linear .field-row.cols-3-9 { grid-template-columns: 1fr; } } .isis-form-linear .label { display: block; font-size: 0.72rem; font-weight: 500; color: var(--isis-text-muted); margin-bottom: 0.25rem; letter-spacing: 0.01em; } .isis-form-linear .label .required { color: var(--rz-danger, #dc2626); margin-left: 2px; } /* Valeur figée (ex. « Porté par » en modification) : le texte seul, sans chrome de contrôle — un RadzenDropDown Disabled inviterait encore le clic sur un champ que rien ne fait bouger. */ .isis-form-linear .field-static-value { font-size: 0.85rem; color: var(--isis-text); padding: 0.35rem 0; } .isis-form-linear .helper { font-size: 0.7rem; color: var(--isis-text-soft); margin-top: 0.2rem; line-height: 1.35; } .isis-form-linear .error { font-size: 0.7rem; color: var(--rz-danger, #dc2626); margin-top: 0.2rem; } /* Compteur de caractères d'un champ borné. aria-hidden côté markup : maxlength est déjà exposé aux technologies d'assistance, et un compteur en région live annoncerait chaque frappe. .is-near passe en teinte d'alerte dans les 10 derniers pour cent. */ .isis-field-count { display: block; text-align: right; font-size: 0.7rem; color: var(--isis-text-soft); margin-top: 0.2rem; font-variant-numeric: tabular-nums; } .isis-field-count.is-near { color: var(--isis-warning-text); font-weight: 600; } /* Étiquette inline compacte devant un contrôle isolé HORS formulaire (ex. sélecteur de date d'un geste ponctuel dans une barre d'action) — même gabarit visuel que .isis-form-linear .label, sans dépendre du conteneur de formulaire (polish P2, gesqhse documentaire : un champ date nu à côté d'un bouton n'annonçait pas ce qu'il pilotait). */ .isis-inline-label { font-size: 0.72rem; font-weight: 500; color: var(--isis-text-muted); white-space: nowrap; } /* Ligne dédiée de confirmation du fichier sélectionné dans un champ d'upload — la confirmation la plus importante d'un dialogue de dépôt ne doit pas être concaténée dans la phrase de contrainte (polish P2, DocumentIndiceDialog). */ .isis-file-selected { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; font-size: 0.78rem; color: var(--isis-success); } /* Inputs (RadzenTextBox / RadzenDropDown / RadzenTextArea) — fond blanc encadré + underline accent au focus. */ .isis-form-linear .rz-textbox, .isis-form-linear .rz-textarea, .isis-form-linear .rz-dropdown, .isis-form-linear .rz-numeric, /* Datepicker et multiselect manquaient à l'appel : ils gardaient donc la bordure pleine de la règle globale (« Harmonisation 2026-07-04 ») au lieu du liseré doux + bas marqué des autres champs — des cadres nettement plus lourds que le reste du formulaire, à structure pourtant identique (cf. TiersFormDialog, la référence). Le multiselect est le rendu d'un RadzenDropDown Multiple : 15 dialogues concernés. */ .isis-form-linear .rz-datepicker, .isis-form-linear .rz-multiselect, .isis-form-linear input[type="text"], .isis-form-linear input[type="email"], .isis-form-linear input[type="tel"], .isis-form-linear textarea { width: 100% !important; font-family: inherit !important; font-size: 0.9rem !important; color: var(--isis-text) !important; /* Fond blanc et contour plein depuis le 2026-10-07 (le gris `--isis-surface-alt` se lisait comme un champ inerte). Le contour doux ne tenait que sur ce gris : sur blanc il disparaissait, d'où `--isis-border` sur les quatre côtés. */ background: var(--isis-surface) !important; border: 1px solid var(--isis-border) !important; border-radius: 6px !important; padding: 0.35rem 0.65rem !important; box-shadow: none !important; outline: none !important; height: auto !important; min-height: 0 !important; transition: background-color 150ms ease, border-color 150ms ease !important; } .isis-form-linear .rz-textarea, .isis-form-linear textarea { resize: vertical; line-height: 1.45; } /* Les composants Radzen composés (numeric, dropdown, datepicker) sont un CONTENEUR qui enveloppe un input. La règle ci-dessus vise à la fois le conteneur (.rz-numeric) et input[type="text"] — or l'input interne EST un type="text". Résultat : bordure, rayon et soulignement peints DEUX FOIS, d'où deux rectangles concentriques. L'enveloppe garde l'habillage, le champ interne redevient transparent. */ .isis-form-linear .rz-numeric > input, .isis-form-linear .rz-dropdown input, .isis-form-linear .rz-datepicker input, .isis-form-linear .rz-spinner > input, .isis-form-linear .rz-numeric > input { border: none !important; border-radius: 0 !important; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; } .isis-form-linear .rz-textbox::placeholder, .isis-form-linear .rz-textarea::placeholder, .isis-form-linear input::placeholder, .isis-form-linear textarea::placeholder { color: var(--isis-text-soft); opacity: 1; } .isis-form-linear .rz-textbox:hover:not(:focus), .isis-form-linear .rz-textarea:hover:not(:focus), .isis-form-linear .rz-dropdown:hover:not(.rz-state-focused), .isis-form-linear input:hover:not(:focus), .isis-form-linear textarea:hover:not(:focus) { /* Survol : le contour fonce, le fond reste blanc (un fond teinté au survol relisait le champ comme inerte). */ background: var(--isis-surface) !important; border-color: var(--isis-border-strong) !important; } .isis-form-linear .rz-textbox:focus, .isis-form-linear .rz-textarea:focus, .isis-form-linear .rz-dropdown.rz-state-focused, .isis-form-linear .rz-numeric:focus-within, .isis-form-linear input:focus, .isis-form-linear textarea:focus { background: var(--isis-surface) !important; border-color: var(--isis-border) !important; /* Le défaut global pose un halo box-shadow au focus ; on le neutralise ici pour préserver le look « soulignement pur » de form-linear (même spécificité → on gagne par !important + ordre source, mais on l'écrit explicitement pour robustesse). */ box-shadow: none !important; /* F9 — underline focus à la couleur du module courant. */ border-bottom-color: var(--isis-current-mod, var(--isis-accent)) !important; border-bottom-width: 2px !important; padding-bottom: calc(0.35rem - 1px) !important; } /* RadzenTextArea — toujours pleine largeur (toutes pages, hors et dans .isis-form-linear). Radzen rend `