/* IDeal Evolution Studio — Copyright © 2026 Resonance IA — Par Stéphane HAYAT — Tous droits réservés. */ /* ============================================================================================= Vision UI Lot 4 — FEUILLE DU KIT « core UI COMMUN » (primitives + brique écran-tâche présentation) Contrainte FERME (#286, décision 1) : STRICTEMENT des classes .kit-* référençant UNIQUEMENT des tokens --ds-* (posés par monde sur , cf. app-saas.css / app-locataire.css). AUCUN sélecteur de layout / de monde / de BackOffice, AUCUNE valeur de palette en dur. La palette reste DUPLIQUÉE par monde (Lot 1) ; ici on ne fait que CONSOMMER les tokens → une seule feuille commune, sans entrelacement mort (leçon Lot 3). ============================================================================================= */ /* ---- Accessibilité : contenu réservé aux lecteurs d'écran ------------------------------------- */ .kit-visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- États standardisés (vide / chargement / erreur / 404) ------------------------------------ */ .kit-etat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--ds-s-2); padding: var(--ds-s-10) var(--ds-s-4); color: var(--ds-text-muted); } .kit-etat-icone { font-size: 44px; color: var(--ds-text-subtle); } .kit-etat--erreur .kit-etat-icone { color: var(--ds-danger); } .kit-etat-titre { color: var(--ds-text-strong); } .kit-etat-message { max-width: 52ch; color: var(--ds-text-muted); } .kit-etat-action { margin-top: var(--ds-s-2); } .kit-chargement { display: flex; flex-direction: column; gap: var(--ds-s-3); padding: var(--ds-s-4); } .kit-skel-entete { border-radius: var(--ds-r-sm); } .kit-skel-ligne { border-radius: var(--ds-r-sm); } /* ---- Cartes & KPI (Vision UI 5A) : surface plate du design system « Nouveau », tokens uniquement ---- */ /* Surface de section/carte réutilisable (dashboards, blocs) — remplace les MudPaper Outlined ad hoc. */ .kit-carte { /* EXP-9d (B) — la page est BLANCHE : la carte ne se distingue plus par son REMPLISSAGE (1,00:1). La charge de séparation passe au FILET, qui monte de --ds-border (1,26:1) à --ds-border-strong (3,64:1 sur blanc, valeur AA du chantier). Molette : revenir à --ds-border si le trait paraît trop appuyé à l'écran. */ background: var(--ds-bg-surface); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-xs); padding: var(--ds-s-5); } /* Modificateur « pleine hauteur » : une carte qui remplit sa cellule de grille pour aligner le bas des cartes d'une même rangée (l'ancienne classe utilitaire Bootstrap `h-100` n'est PAS chargée ici → no-op). Structurel (height:100%), pas une valeur de token. */ .kit-carte--pleine-hauteur { height: 100%; } /* Carte KPI / statistique : grand chiffre + libellé discret + détail/lien optionnels. */ .kit-carte-stat { display: flex; flex-direction: column; gap: var(--ds-s-1); height: 100%; } .kit-carte-stat-haut { display: flex; align-items: center; gap: var(--ds-s-2); } .kit-carte-stat-icone { font-size: 18px; color: var(--ds-brand-text); flex: none; } .kit-carte-stat-titre { font-size: 12.5px; color: var(--ds-text-muted); font-weight: 600; } .kit-carte-stat-valeur { font-family: var(--ds-font-ui); font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ds-text-strong); } .kit-carte-stat-valeur--warn { color: var(--ds-warning-text); } .kit-carte-stat-valeur--err { color: var(--ds-danger-text); } .kit-carte-stat-valeur--ok { color: var(--ds-success-text); } .kit-carte-stat-valeur--brand { color: var(--ds-brand-text); } .kit-carte-stat-detail { font-size: 12px; color: var(--ds-text-muted); } .kit-carte-stat-lien { display: inline-flex; align-items: center; gap: var(--ds-s-1); margin-top: var(--ds-s-2); font-size: 12.5px; font-weight: 600; color: var(--ds-brand-text); } .kit-carte-stat--lien { cursor: pointer; transition: border-color .15s, box-shadow .15s; } .kit-carte-stat--lien:hover { border-color: var(--ds-brand-border); box-shadow: var(--ds-shadow-sm); } .kit-carte-stat--lien:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); } /* ---- Champ montant ---------------------------------------------------------------------------- */ .kit-champ-montant { max-width: 260px; } /* ---- Champ en lecture seule (couple libellé / valeur) — fiches de détail (Vision UI 5D) -------- */ .kit-champ-lecture { display: flex; flex-direction: column; gap: var(--ds-s-1); min-width: 0; } .kit-champ-lecture--ligne { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--ds-s-3); } .kit-champ-lecture-libelle { font-size: 12px; font-weight: 600; color: var(--ds-text-muted); } .kit-champ-lecture-valeur { font-size: 13px; color: var(--ds-text-strong); min-width: 0; overflow-wrap: anywhere; } .kit-champ-lecture--ligne .kit-champ-lecture-valeur { text-align: right; } .kit-champ-lecture-valeur--multi { white-space: pre-wrap; } /* Valeur absente (« — ») : --ds-text-muted et NON --ds-text-subtle (PAL1). Ce tiret n'est pas décoratif — il énonce un fait sur la donnée (« ce champ est vide ») et relève donc de WCAG AA, que subtle échoue (3,01:1 en clair / 3,77:1 en sombre). La hiérarchie est préservée : une valeur RENSEIGNÉE reste en text-strong, une valeur absente passe en muted — le contraste rempli/vide demeure. */ .kit-champ-lecture-valeur--vide { color: var(--ds-text-muted); } /* ---- Groupe de cases Tout / Aucun ------------------------------------------------------------- */ .kit-groupe-cases { display: flex; flex-direction: column; gap: var(--ds-s-1); } .kit-groupe-cases-titre { color: var(--ds-text-strong); margin-bottom: var(--ds-s-1); } .kit-case-maitre { font-weight: 600; } .kit-groupe-cases-filet { margin: var(--ds-s-1) 0; } /* ---- Champ image + aperçu --------------------------------------------------------------------- */ .kit-champ-image { display: flex; flex-direction: column; gap: var(--ds-s-2); } .kit-champ-image-label { color: var(--ds-text-strong); } .kit-requis { color: var(--ds-danger); margin-inline-start: var(--ds-s-1); } .kit-champ-image-zone { display: flex; align-items: center; gap: var(--ds-s-4); flex-wrap: wrap; } .kit-champ-image-apercu { width: 96px; height: 96px; object-fit: cover; border-radius: var(--ds-r-md); border: 1px solid var(--ds-border); background: var(--ds-bg-surface-2); } .kit-champ-image-placeholder { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: var(--ds-r-md); border: 1px dashed var(--ds-border-strong); background: var(--ds-bg-surface-2); color: var(--ds-text-subtle); } .kit-champ-image-placeholder .mud-icon-root { font-size: 34px; } .kit-champ-image-actions { display: flex; align-items: center; gap: var(--ds-s-2); } .kit-champ-image-erreur { color: var(--ds-danger); } /* ---- Combobox recherchable + création inline -------------------------------------------------- */ .kit-selecteur-creable { display: flex; align-items: flex-start; gap: var(--ds-s-2); } .kit-selecteur-creable-champ { flex: 1; min-width: 0; } .kit-selecteur-creable-plus { margin-top: var(--ds-s-1); } /* ---- Grille de données ------------------------------------------------------------------------ */ .kit-grille-recherche { max-width: 320px; } .kit-grille-groupe { background: var(--ds-brand-subtle); border: 1px solid var(--ds-brand-border); border-radius: var(--ds-r-pill); padding: var(--ds-s-1) var(--ds-s-3); } .kit-grille-col-actions { text-align: right; white-space: nowrap; } /* Colonne de sélection maison (#290) : étroite, case centrée. */ .kit-grille-col-select { width: 1px; white-space: nowrap; text-align: center; } /* Lignes cliquables (OnLigneClick, ex. ouvrir une fiche) : curseur « main ». */ .kit-grille-ligne-cliquable { cursor: pointer; } /* Grille large : le tableau défile HORIZONTALEMENT dans sa carte (les colonnes/actions de droite restent atteignables) sans jamais pousser le corps de page (#290, revue UX). */ .kit-grille .mud-table-container { overflow-x: auto; } /* Sous-liste EMBARQUÉE (Vision UI 5D) : une GrilleDonnees posée DANS une .kit-carte (fiche de détail) se fond dans la carte hôte — pas de surface/ombre propre du data-grid → évite le « carte-dans-carte », notamment en sombre où les surfaces MudBlazor et --ds divergent. Scopé à .kit-carte : les grilles pleine page (5B) gardent leur panneau. */ .kit-carte .kit-grille { background-color: transparent; box-shadow: none; } /* Même principe pour une table SIMPLE (MudSimpleTable, ex. matrice rôles × permissions du RBAC, Vision UI 5E) : posée DANS une .kit-carte elle se fond dans la carte hôte (pas de surface/ombre propre → jamais de « carte-dans-carte » en sombre). À combiner avec Elevation="0" sur le composant. */ .kit-carte .mud-simple-table { background-color: transparent; box-shadow: none; } /* Cellule à contenu long (ex. user-agent, détails d'audit) : une seule ligne tronquée + « … », détail au survol (title). Le DOM contient le texte COMPLET (lecteurs d'écran OK) — la troncature est purement visuelle. */ .kit-grille-cellule-tronquee { display: inline-block; max-width: 280px; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sur mobile (pas de survol tactile), le contenu long revient à la ligne : la place verticale est gratuite et le détail reste lisible sans « title » (revue UX #290). */ @media (max-width: 600px) { .kit-grille-cellule-tronquee { white-space: normal; max-width: none; } } /* ---- Brique écran-tâche (présentation ; la logique est dans EcranTache / EcranTacheSaaS) -------- */ .kit-ecran-tache { min-height: 100vh; display: flex; flex-direction: column; background: var(--ds-bg-body); color: var(--ds-text); padding-bottom: var(--ds-s-12); /* dégage le pied de page copyright fixe du layout Focus */ } .kit-ecran-tache-entete { display: flex; align-items: center; gap: var(--ds-s-2); padding: var(--ds-s-3) var(--ds-s-4); position: sticky; top: 0; z-index: 3; background: var(--ds-bg-body); border-bottom: 1px solid var(--ds-border-subtle); } .kit-ecran-tache-corps { flex: 1; display: flex; gap: var(--ds-s-8); align-items: flex-start; width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--ds-s-8) var(--ds-s-4); } .kit-ecran-tache-centre { flex: 1; min-width: 0; max-width: 760px; margin: 0 auto; } .kit-ecran-tache-titre { font-family: var(--ds-font-ui); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--ds-text-strong); margin: 0 0 var(--ds-s-2); } .kit-ecran-tache-soustitre { margin-bottom: var(--ds-s-6); } .kit-ecran-tache-contenu { display: flex; flex-direction: column; gap: var(--ds-s-4); } .kit-ecran-tache-brouillon { display: inline-flex; align-items: center; gap: var(--ds-s-1); margin-bottom: var(--ds-s-3); } .kit-ecran-tache-volet { /* EXP-9d (B) — même raison que .kit-carte : le volet était blanc SUR gris, il est maintenant blanc sur blanc. Seul son filet le détache encore. */ flex: 0 0 320px; position: sticky; top: 84px; background: var(--ds-bg-surface); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-sm); padding: var(--ds-s-5); } /* Stepper présentationnel de l'écran-tâche */ .kit-ecran-tache-stepper { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ds-s-4); margin: 0 0 var(--ds-s-6); padding: 0; } /* Étape À VENIR : --ds-text-muted et NON --ds-text-subtle (PAL1). Le libellé d'une étape à venir annonce la suite du parcours = information → WCAG AA, que subtle échoue. Conséquence assumée : le LIBELLÉ ne distingue plus « à venir » de « fait » (tous deux muted) — mais la PUCE, elle, garde ses trois états (neutre / marque pleine / marque atténuée), donc l'information n'est pas perdue et ne repose pas sur la seule couleur. */ .kit-step { display: flex; align-items: center; gap: var(--ds-s-2); color: var(--ds-text-muted); } .kit-step-puce { /* Carré arrondi et NON pilule (DOCTRINE du rond, Interface ①) : à 26 px la puce se lit comme une forme — une pastille numérotée ronde ressemblerait à un mini-avatar. Le seul rond reste IDeal. */ width: 26px; height: 26px; border-radius: var(--ds-rayon-avatar); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; background: var(--ds-bg-surface-3); color: var(--ds-text-muted); border: 1px solid var(--ds-border); } .kit-step-libelle { font-size: 13.5px; font-weight: 600; } .kit-step--courant { color: var(--ds-text-strong); } .kit-step--courant .kit-step-puce { background: var(--ds-brand); color: var(--ds-text-on-brand); border-color: var(--ds-brand); } .kit-step--fait { color: var(--ds-text-muted); } .kit-step--fait .kit-step-puce { background: var(--ds-brand-subtle); color: var(--ds-brand-text); border-color: var(--ds-brand-border); } .kit-focus-erreur { max-width: 640px; margin: var(--ds-s-12) auto; padding: 0 var(--ds-s-4); } /* Bandeaux des gardes d'accès du monde (#257) au-dessus d'un écran-tâche locataire : alignés sur la largeur du corps, fond body pour une continuité visuelle avec la brique plein écran. */ .kit-focus-bandeaux { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--ds-s-4) var(--ds-s-4) 0; background: var(--ds-bg-body); } .kit-focus-attente { background: var(--ds-bg-body); min-height: 100vh; } /* Responsive : le volet passe sous le contenu, l'écran-tâche reste lisible sur petit écran */ @media (max-width: 900px) { .kit-ecran-tache-corps { flex-direction: column; } .kit-ecran-tache-volet { flex: 1 1 auto; width: 100%; position: static; } } /* ---- Galerie de démo (référence Lot 5) : mise en page simple, tokens uniquement ---------------- */ .kit-galerie-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--ds-s-5); } .kit-galerie-carte { background: var(--ds-bg-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-xs); padding: var(--ds-s-5); } .kit-galerie-carte h2 { font-family: var(--ds-font-ui); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ds-text-strong); margin: 0 0 var(--ds-s-3); } .kit-galerie-etats { display: flex; flex-direction: column; gap: var(--ds-s-4); } .kit-galerie-legende { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-subtle); } /* ---- Marque & lock-ups « IDeal Evolution Studio » (brief Marque) ------------------------------- Le logo est du CODE, pas une image : SVG inline + tokens. Aucune requête réseau, aucun 404, netteté infinie. Les couleurs viennent des tokens --ds-marque-* posés PAR MONDE (fixes : jamais l'accent d'UI) ; ici on ne fait que les CONSOMMER — aucune valeur de palette en dur, conformément à la contrainte #286. */ .kit-marque { display: block; flex: 0 0 auto; } /* Lock-up : marque + logotype, verrouillés dans leurs proportions. `color` porte le logotype → le « I » dessiné (currentColor) suit sans jamais redéclarer sa couleur. ATTENTION, contre-intuitif : le logotype prend la couleur du DISQUE, pas celle de l'encre. L'encre est le visage, à l'INTÉRIEUR du disque (blanche quand le disque est sombre) ; le logotype, lui, est posé SUR LA PAGE et doit donc porter la même couleur que le disque — sinon il est blanc sur fond clair, donc invisible. */ .kit-lockup { display: inline-flex; align-items: center; font-family: var(--ds-font-ui); color: var(--ds-marque-disque); line-height: 1; flex: 0 0 auto; } /* Écarts repris de la boîte de référence de l'empilé (200 × 66) : marque 56 posée en x=0, bloc du nom à x=68 → 12 px de blanc. L'horizontal serre un peu (10 px) : sans ligne de base, le nom pèse moins. */ .kit-lockup--empile { gap: 12px; } .kit-lockup--horizontal { gap: 10px; } .kit-lockup-nom { display: inline-flex; flex-direction: column; justify-content: center; font-size: var(--kit-lockup-police, 26px); } /* PLANCHER DUR : le bloc du nom ne descend JAMAIS sous 98 px de large — en dessous, la ligne de base se ferme et devient une bouillie grise. Le bloc refuse donc de se comprimer. Si ça ne rentre pas, ce n'est pas un empilé écrasé qu'il faut : c'est l'HORIZONTAL (sans ligne de base, donc sans plancher). */ .kit-lockup--empile .kit-lockup-nom { min-width: 98px; } .kit-lockup--horizontal .kit-lockup-nom { flex-direction: row; align-items: baseline; } .kit-lockup-titre { font-weight: 600; letter-spacing: .059em; white-space: nowrap; } /* Le « I » : une CAPITALE POINTÉE, lettre DESSINÉE (fût + point), jamais le glyphe de la police et jamais un « i » minuscule. Boîte inline-block à hauteur de capitale → son bas s'assoit sur la ligne de base. */ .kit-lockup-i { position: relative; display: inline-block; width: .13em; height: .70em; /* fût : largeur · hauteur de capitale */ margin-right: .105em; /* blanc fût↔D, mesuré encre à encre */ vertical-align: baseline; } .kit-lockup-i-fut { position: absolute; left: 0; bottom: 0; width: .13em; height: .70em; background: currentColor; } /* Point posé au-dessus du fût : bas du point à .70em (haut du fût) + .06em d'écart = .76em de la ligne de base. Rayon .085em → diamètre .17em. Pourquoi .06em et non les .20em du brief : mesuré, un vrai glyphe « İ » de cette police détache son point d'environ .05em. À .20em, le point culminait à 1,06em quand tout le reste du logotype plafonne à .70em — l'œil ne le rattachait plus au fût, le lisait comme une particule flottante, et retombait sur la forme connue la plus proche : le « i » MINUSCULE. Soit précisément ce que la marque interdit (iDEAL est le système de paiement néerlandais, et la minuscule tue les lectures « ID » et « IDE »). On déroge donc au chiffre du §4 pour servir son intention. Arbitré à l'essai visuel. */ .kit-lockup-i-point { position: absolute; left: 50%; transform: translateX(-50%); bottom: .76em; width: .17em; height: .17em; border-radius: 50%; background: currentColor; } /* Ligne de base de l'empilé : CAPITALES espacées (mises en capitales ICI — aucun texte en capitales en dur dans le composant, le nom reste dérivé de la source unique). Couleur PLEINE, jamais de gris : elle hérite du lock-up (donc du disque) et ne se dégrade JAMAIS en gris secondaire. */ .kit-lockup-base { font-size: .28em; font-weight: 400; letter-spacing: .25em; text-transform: uppercase; white-space: nowrap; margin-top: .5em; } /* Suite du nom en horizontal : graisse normale contre le 600 du titre — c'est ce contraste qui fait lire « IDeal » comme la marque et « Evolution Studio » comme le descripteur, sans ligne de base. */ .kit-lockup-suite { font-weight: 400; letter-spacing: .02em; margin-left: .34em; } /* Écrans étroits : l'horizontal est déjà la variante des espaces contraints — sous 600 px il garde la MARQUE et laisse tomber le nom, plutôt que d'écraser son voisin ou de pousser les utilitaires hors champ. Porté par la variante elle-même (et non par une classe de barre) : toute barre en hérite, sans avoir à y penser. Le lock-up gardant son aria-label sur la racine, le nom reste ANNONCÉ même masqué à l'œil. */ @media (max-width: 599px) { .kit-lockup--horizontal .kit-lockup-nom { display: none; } }