/* IDeal Evolution Studio — Copyright © 2026 Resonance IA — Par Stéphane HAYAT — Tous droits réservés. */ /* ================================================================================================= LE GEL D'ENTRÉE — périmètre ADMINISTRATION SaaS (base maître) (#369, SL4). JUMEAU #203 de gel-entree-locataire.css. ⚠️ CE FICHIER EST UN BOUCLIER, PAS UN THÈME. Il ne crée aucune apparence : il REDÉCLARE, à l'identique, les valeurs que les tokens du produit portaient le 26/08/2026 — c'est-à-dire AVANT que le lot #369 ne remappe le produit entier sur la référence contractuelle. Posé sur l'enveloppe des quatre gabarits d'entrée, il rend ces écrans IMMUNES au remappage. 🔑 POURQUOI ÇA MARCHE, ET POURQUOI AUCUN « !important » N'EST NÉCESSAIRE. Les propriétés personnalisées s'HÉRITENT. Une redéclaration portée par un ancêtre PROCHE l'emporte donc sur une valeur héritée d'un ancêtre LOINTAIN (), quelle que soit la spécificité de celui-ci — parce que l'héritage n'est pas de la spécificité. Il n'y a pas de combat de cascade ici : il y a deux éléments différents, et c'est le plus proche qui sert ses descendants. ⚠️ ET C'EST « body:has(.ideale-gel-entree) » QUI PORTE LE GEL, PAS L'ENVELOPPE ELLE-MÊME. Une enveloppe ne sert que ses DESCENDANTS : tout ce qui est peint SUR body, ou sur un ancêtre de l'enveloppe, lui échappe. On remonte donc d'un cran — et « :has() » est le seul moyen de le faire SANS poser de classe sur body, car body SURVIT À LA NAVIGATION : une classe qu'on oublierait d'y retirer repeindrait le PRODUIT en vieux. 📌 Précision mesurée, pour qui lirait ce fichier en cherchant le fond de page : le fond du body ne vient PAS de --ds-bg-body. Il vient de MudBlazor (--mud-palette-background), donc du THÈME FIGÉ (IdealeThemesEntree*, Background). Vérifié au navigateur : muter --ds-bg-body dans ce fichier ne change rien au rendu du body. Les deux moitiés du bouclier se complètent — la feuille tient les tokens, le thème figé tient ce que MudBlazor peint lui-même. ⚠️ Si « :has() » venait à ne pas être supporté, le gel tomberait EN ENTIER — et silencieusement. C'est précisément ce que le témoin ci-dessous détecte : il rendrait #000001 au lieu de #369369. ⛔ NE PAS « renforcer » ce fichier (ni !important, ni surspécificité) : qui le fait a cessé de comprendre pourquoi il marche, et le prochain lecteur héritera de sa confusion. ⚠️ POURQUOI TOUS LES TOKENS, ET PAS SEULEMENT CEUX QU'ON CROIT CONSOMMÉS. Choisir un sous-ensemble supposerait de savoir ce que chaque écran consomme — or les consommations passent par des composants partagés, des indirections var(→var(→…)), et des styles posés depuis le C# ou le Razor. Une couverture calculée serait une HEURISTIQUE. En figeant l'intégralité du bloc, on remplace cette heuristique par une BIJECTION, que le banc GelEntreeStructure369Tests vérifie : le gel déclare exactement les mêmes noms que le produit, ni plus, ni moins. ⚠️ L'ACCENT SARCELLE EST FONDU DEDANS, À DESSEIN. Le lot #369 fait disparaître l'axe d'accent produit (data-accent). Les sept tokens de marque n'auraient alors plus de surcharge — les écrans d'entrée retomberaient sur le bloc de base, et changeraient. Le gel porte donc les valeurs SARCELLE résolues, telles qu'elles étaient rendues. TÉMOIN — « --ds-gel-temoin » vaut #000001 dans le bloc du produit et #369369 ici. Un banc lit sa valeur au navigateur : c'est ce qui prouve que l'enveloppe est EFFECTIVEMENT appliquée. Sans lui, toute la couche de mesure comparerait du produit à du produit, et serait verte pour rien. 🔒 SL5 lèvera ce gel écran par écran. Ce fichier disparaîtra alors — il n'est pas une couche d'architecture, c'est un échafaudage daté. ================================================================================================= */ /* ---- Apparence CLAIRE — copie littérale du bloc « html.ideale-monde-saas » ------------------------- */ html.ideale-monde-saas body:has(.ideale-gel-entree) { --ds-font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ds-r-xs: 6px; --ds-r-sm: 8px; --ds-r-md: 10px; --ds-r-lg: 14px; --ds-r-xl: 20px; --ds-r-2xl: 28px; --ds-r-pill: 999px; --ds-rayon-avatar: 23%; --ds-avatar-fond: #2B303C; --ds-s-1: 4px; --ds-s-2: 8px; --ds-s-3: 12px; --ds-s-4: 16px; --ds-s-5: 20px; --ds-s-6: 24px; --ds-s-8: 32px; --ds-s-10: 40px; --ds-s-12: 48px; --ds-s-16: 64px; --ds-bg-body: #FFFFFF; --ds-bg-canvas: #F5F7F8; --ds-bg-surface: #FFFFFF; --ds-bg-surface-2: #F7F9FA; --ds-bg-surface-3: #EFF3F3; --ds-bg-inset: #E8EDED; --ds-bg-hover: #F0F3F3; --ds-bg-active: #E4EFEF; --ds-bg-sidebar: #FFFFFF; --ds-border: #E0E6E7; --ds-border-strong: #79898C; --ds-border-subtle: #EBEFEF; --ds-text-strong: #0E1517; --ds-text: #2C3739; --ds-text-muted: #5B686C; --ds-text-subtle: #8A979B; --ds-text-on-brand: #FFFFFF; --ds-brand: #15565F; --ds-brand-hover: #114851; --ds-brand-active: #0E3A42; --ds-brand-subtle: #E4EFEF; --ds-brand-subtle-2: #CFE4E4; --ds-brand-border: #B4D2D3; --ds-brand-text: #124E57; --ds-success: #1B8A5A; --ds-success-subtle: #E4F4EC; --ds-success-text: #0E6B43; --ds-success-border: #B6E0CA; --ds-warning: #B06A00; --ds-warning-subtle: #FAEFD8; --ds-warning-text: #875200; --ds-warning-border: #EACF9A; --ds-danger: #C93A2E; --ds-danger-subtle: #FBE7E4; --ds-danger-text: #A62A20; --ds-danger-border: #F1C1BA; --ds-info: #2563C9; --ds-info-subtle: #E6EDFB; --ds-info-text: #1E52A8; --ds-info-border: #BFD1F1; --ds-chart-1: #15565F; --ds-chart-2: #3E888F; --ds-chart-3: #7CB8BD; --ds-chart-4: #2563C9; --ds-chart-5: #B06A00; --ds-chart-grid: #E5EAEA; --ds-chart-track: #EDF1F1; --ds-focus-ring: 0 0 0 3px rgba(21, 86, 95, .26); --ds-shadow-xs: 0 1px 2px rgba(14, 30, 34, .06); --ds-shadow-sm: 0 1px 3px rgba(14, 30, 34, .09), 0 1px 2px rgba(14, 30, 34, .05); --ds-shadow-md: 0 6px 18px -4px rgba(14, 30, 34, .12), 0 2px 6px -2px rgba(14, 30, 34, .07); --ds-shadow-lg: 0 18px 40px -8px rgba(14, 30, 34, .20), 0 6px 14px -6px rgba(14, 30, 34, .10); --ds-overlay: rgba(12, 22, 24, .42); --ideal-cyan: #5FE0EF; --ideal-picot: #C6402F; --ds-marque-disque: #1B1C1E; --ds-marque-encre: #FFFFFF; --ds-marque-picot: var(--ideal-picot); --ds-login-forme-fond: #F0F0F1; --ds-login-visage-fond: #0E0F12; --ds-login-visage-texte: #EAECFF; --ds-visage-marque-disque: #FFFFFF; --ds-visage-marque-encre: #1B1C1E; --ds-champ-fond: #FFFFFF; --ds-champ-bord: #D7D9E0; --ds-champ-texte: #1B1C1E; --ds-champ-libelle: #5A5D66; --ds-bouton-fond: #14161C; --ds-bouton-texte: #FFFFFF; --ds-avatar-encre: #FFFFFF; --ds-avatar-tuile: 30px; --ds-champ-rayon: 7px; --ds-champ-hauteur: 38px; --ds-champ-texte-taille: 12.5px; --ds-champ-libelle-taille: 11.5px; --ds-bouton-hauteur: 36px; --ds-bienvenue-taille: 25px; --ds-bienvenue-graisse: 500; --ds-pied-taille: 10.5px; --ds-pied-hauteur: 44px; /* Témoin du gel : #000001 côté produit, #369369 ici. Lu au navigateur. */ --ds-gel-temoin: #369369; } /* ---- Apparence SOMBRE — copie littérale du bloc « html.ideale-monde-saas[data-theme="dark"] » ------ */ html.ideale-monde-saas[data-theme="dark"] body:has(.ideale-gel-entree) { --ds-bg-body: #080B0C; --ds-bg-canvas: #0B0F10; --ds-bg-surface: #13181A; --ds-bg-surface-2: #1A2124; --ds-bg-surface-3: #232B2E; --ds-bg-inset: #0E1314; --ds-bg-hover: rgba(255, 255, 255, .055); --ds-bg-active: #0F3138; --ds-bg-sidebar: #0E1314; --ds-border: #252D30; --ds-border-strong: #5F7175; --ds-border-subtle: #1B2225; --ds-text-strong: #F2F6F6; --ds-text: #CFD7D9; --ds-text-muted: #93A0A3; --ds-text-subtle: #697579; --ds-text-on-brand: #010D0C; --ds-brand: #2E8C95; --ds-brand-hover: #379AA3; --ds-brand-active: #45AAB2; --ds-brand-subtle: #0F3138; --ds-brand-subtle-2: #123C43; --ds-brand-border: #1C4C53; --ds-brand-text: #67BEC6; --ds-success: #33B37B; --ds-success-subtle: #0F2C21; --ds-success-text: #57C892; --ds-success-border: #1E4B39; --ds-warning: #DFA23C; --ds-warning-subtle: #2C2410; --ds-warning-text: #E8B65E; --ds-warning-border: #4A3C1A; --ds-danger: #E56A5D; --ds-danger-subtle: #2E1512; --ds-danger-text: #F08579; --ds-danger-border: #552420; --ds-info: #5B9BF0; --ds-info-subtle: #122139; --ds-info-text: #82B2F3; --ds-info-border: #26375A; --ds-chart-1: #3FA3AC; --ds-chart-2: #6FC0C8; --ds-chart-3: #2E8C95; --ds-chart-4: #5B9BF0; --ds-chart-5: #E0A23C; --ds-chart-grid: #1F2729; --ds-chart-track: #1A2124; --ds-focus-ring: 0 0 0 3px rgba(103, 190, 198, .32); --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); --ds-shadow-md: 0 8px 22px -6px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .5); --ds-shadow-lg: 0 22px 48px -10px rgba(0, 0, 0, .7), 0 8px 16px -8px rgba(0, 0, 0, .55); --ds-overlay: rgba(0, 0, 0, .62); --ds-marque-disque: #FFFFFF; --ds-marque-encre: #1B1C1E; --ds-login-forme-fond: #0E0F12; --ds-login-visage-fond: #F0F0F1; --ds-login-visage-texte: #23252C; --ds-visage-marque-disque: #1B1C1E; --ds-visage-marque-encre: #FFFFFF; --ds-champ-fond: #2B303C; --ds-champ-bord: transparent; --ds-champ-texte: #EDEEF2; --ds-champ-libelle: #C9CBD2; --ds-bouton-fond: #FFFFFF; --ds-bouton-texte: #0E0F12; } /* ================================================================================================= ISOLATION DU SOCLE (#369, SL4) — LA MOITIÉ QUE LE BOUCLIER DE TOKENS NE FAIT PAS. ⚠️ CE FICHIER ÉTAIT UN BOUCLIER DE TOKENS, ET UN BOUCLIER DE TOKENS N'OPPOSE RIEN À UN SÉLECTEUR DE DESCENDANCE. Tant que « data-li » ne vivait que sur les racines de boîtes, la question ne se posait pas : aucun sélecteur du socle n'atteignait un écran d'entrée. Depuis que l'attribut est posé sur (Components/App.razor), TOUT élément du document en descend — enveloppe de gel comprise. Le témoin --ds-gel-temoin resterait vert (#369369) pendant que l'anneau de focus de la page de connexion changerait : une mesure verte pour rien. 🔑 CE QUI PASSE ENCORE, ET C'EST ÉNUMÉRABLE. AncrageSocleLangage369Tests mesure que, au-delà du préfixe, tout sélecteur du socle exige EN PLUS une classe « .li-* » — sauf CINQ génériques. Or les écrans d'entrée ne portent aucune classe « .li-* » (GelEntreeRendu369Tests le vérifie au navigateur). Ces cinq sélecteurs sont donc la surface EXACTE à neutraliser ici, ni plus ni moins : ① [data-li] * → box-sizing: border-box ② [data-li] *::before → idem ③ [data-li] *::after → idem ④ [data-li] :focus-visible → l'anneau du contrat ⑤ [data-li] [tabindex="-1"]:focus-visible → outline: none ⛔ Cette liste n'est pas décorative : si la sentinelle en trouve un sixième, ce bloc devient incomplet SANS ROUGIR. C'est pour cela que le banc rougit en NOMMANT le sélecteur nouveau. ⚠️ JUMEAU #203 : gel-entree-locataire.css porte le même bloc, dupliqué et non partagé. 🔒 Il disparaîtra avec ce fichier au SL5, quand ces écrans passeront à leur tour à la référence. ================================================================================================= */ /* ① — LES ÉLÉMENTS. La contre-règle REDIT la valeur du produit au lieu de la contredire, et c'est voulu : MudBlazor pose déjà « * { box-sizing: border-box } » globalement (mesuré dans MudBlazor.min.css), donc la valeur d'AVANT #369 à l'intérieur de l'enveloppe était border-box. La restituer explicitement rend la couverture VÉRIFIABLE — une bijection avec les cinq génériques du socle — au lieu de dépendre d'un jugement (« celui-là, pas besoin »). Un jugement ne se teste pas ; une bijection, si. */ html.ideale-monde-saas .ideale-gel-entree * { box-sizing: border-box; } /* ② ③ — LES PSEUDO-ÉLÉMENTS. Eux ne sont PAS visés par le reset de MudBlazor (le sélecteur « * » ne couvre ni ::before ni ::after) : ils valaient content-box avant #369, et les deux génériques du socle les feraient basculer. On les rend à leur valeur d'avant — ce sont les seules des cinq lignes dont l'effet pourrait déplacer une référence d'image, puisqu'elles changent une GÉOMÉTRIE et non un état d'interaction. */ html.ideale-monde-saas .ideale-gel-entree::before, html.ideale-monde-saas .ideale-gel-entree::after, html.ideale-monde-saas .ideale-gel-entree *::before, html.ideale-monde-saas .ideale-gel-entree *::after { box-sizing: content-box; } /* ④ — L'ANNEAU. « revert » rend la propriété à l'origine précédente (l'agent utilisateur) : c'est exactement l'état d'avant #369 pour tout élément que le produit ne traitait pas lui-même. ⛔ ON NE TOUCHE PAS À « border-radius » ICI, ET C'EST DÉLIBÉRÉ. La déclaration du socle vit dans la couche « socle-focus » : une règle non couchée — donc toutes celles du produit — l'emporte déjà sur elle, quelle que soit sa spécificité. Ajouter « border-radius: revert » ici ne réparerait rien et DÉTRUIRAIT les rayons d'auteur des écrans d'entrée (mesuré : champ 7 px, bouton 999 px, sélecteur de langue 10 px). */ html.ideale-monde-saas .ideale-gel-entree :focus-visible { outline: revert; outline-offset: revert; } /* … puis l'anneau que le PRODUIT portait avant #369, rendu à ses seuls porteurs. Cette règle vient d'app.css, où elle a été retirée : elle ne vit plus que pour le modèle d'entrée. Même spécificité que la précédente (0,3,1) — c'est l'ORDRE qui tranche, et il est écrit ici. */ html.ideale-monde-saas .ideale-gel-entree .mud-button-root:focus-visible, html.ideale-monde-saas .ideale-gel-entree .mud-icon-button:focus-visible, html.ideale-monde-saas .ideale-gel-entree .mud-nav-link:focus-visible, html.ideale-monde-saas .ideale-gel-entree a:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; } /* ⑤ — CE QUE SEUL LE PROGRAMME ATTEINT. On le CONSERVE plutôt que de le rendre à l'agent utilisateur : le produit portait déjà « h1:focus { outline: none } » (app.css) pour la même raison — le routeur pose le focus sur le titre à chaque navigation (FocusOnNavigate) — et la règle du socle en est un sur-ensemble qui ne peut QUE retirer un anneau, jamais en ajouter un. Le rendre à l'agent utilisateur dessinerait un cadre sur un élément que l'utilisateur n'a jamais visé, c'est-à-dire un CHANGEMENT, pas un retour en arrière. */ html.ideale-monde-saas .ideale-gel-entree [tabindex="-1"]:focus-visible { outline: none; } /* ================================================================================================= ⑥ LA TYPOGRAPHIE DU CORPS (#369, SL4) — un SIXIÈME vecteur, et il ne vient PAS du socle. ⚠️ CELUI-CI N'EST PAS COUVERT PAR LA SENTINELLE D'ANCRAGE, et c'est pour cela qu'il est écrit ici en toutes lettres. Les cinq génériques ci-dessus viennent de la feuille du socle, et un banc les énumère. Ce vecteur-ci vient d'une règle du PRODUIT : au #369, « html, body » d'app.css a cessé d'écrire sa pile de polices en dur pour consommer « var(--ds-font-ui) », et son interligne est passé de 1.45 à 1.55 — la valeur du contrat (c'est ce qui solde la dette « les boîtes n'héritent pas de la typographie du contrat »). 🔴 CONSÉQUENCE MESURÉE, ET ELLE EST L'INVERSE DE L'INTUITION. Le gel FIGE « --ds-font-ui » à sa valeur d'avant — « 'Hanken Grotesk', system-ui, … ». Or « html, body » ne consommait PAS ce token avant #369 : il écrivait « system-ui, … » en dur. Laisser faire aurait donc fait basculer les écrans d'entrée sur Hanken Grotesk, une police RÉELLEMENT EMBARQUÉE (woff2 self-hostée) — c'est-à-dire que le bouclier de tokens, en marchant parfaitement, aurait CHANGÉ l'apparence qu'il protège. *Un bouclier peut nuire par ce qu'il conserve, quand ce qui l'entoure change de source.* On restitue donc littéralement les deux valeurs d'avant #369. La taille (15 px) n'est pas touchée : elle n'a pas bougé. ⚠️ JUMEAU #203 : la feuille de l'autre monde porte le même bloc, dupliqué. ================================================================================================= */ html.ideale-monde-saas body:has(.ideale-gel-entree) { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif; line-height: 1.45; } /* ================================================================================================= ⑦ LA SECONDE FAMILLE DE TOKENS (#369, SL4) — CELLE QUE LE BOUCLIER NE COUVRAIT PAS. 🔴 CE BLOC EXISTE PARCE QUE LA MESURE A INFIRMÉ UNE HYPOTHÈSE, ET IL FAUT LE DIRE EN CLAIR. Le bouclier a été conçu autour d'une bijection : « le gel déclare exactement les mêmes tokens que le produit », vérifiée par GelEntreeStructure369Tests. Elle est exacte — mais elle ne porte que sur UNE famille, les « --ds-* » des feuilles de monde. Or app.css, la feuille HÉRITÉE, déclare sa PROPRE famille sur « :root » (--sh-*, --r-*, --ideale-*), non scopée à un monde et jamais comparée à quoi que ce soit. Au premier remappage de cette famille (#369 : les ombres passent aux --ombre-1/2/3 de la référence, le halo BLEU de la barre devient neutre), SIX références du modèle d'entrée ont bougé — mesuré : ~165 000 pixels sur 1 296 000, soit l'ombre de la carte de « .setup-shell », dont --sh-lg avait changé de 12/34 à 26/70. Le témoin est resté VERT, la bijection aussi : ils ne mesuraient pas cette famille-là. *Un bouclier ne protège pas de ce qu'il n'a pas compté. Et ce qu'il n'a pas compté, il le fait croire protégé — c'est exactement ce qu'une sentinelle d'image existe pour attraper, et elle l'a attrapé.* ⚠️ POURQUOI CE BLOC EST PORTÉ PAR L'ENVELOPPE, ET NON PAR « body:has(…) » COMME LES --ds-*. Deux raisons, et la seconde est décisive : ① ces tokens ne sont consommés que par des DESCENDANTS de l'enveloppe (ombres de cartes, de barre, de dialogues) — rien n'est peint sur body avec eux ; ② le porteur « body:has(…) » est l'ancre exacte que la bijection des --ds-* inspecte, et y ajouter des noms d'une AUTRE famille la ferait rougir en annonçant des « tokens en trop ». Deux familles, deux ancres, deux gardes. On fige TOUTE la famille, y compris ce qui n'a pas changé (rayons, largeurs de dialogue) : la couverture redevient une BIJECTION vérifiable au lieu d'une liste de « ceux dont on se souvient ». Tenu par RacineDocument369Tests. ⚠️ JUMEAU #203 : la feuille de l'autre monde porte le même bloc, dupliqué. ================================================================================================= */ html.ideale-monde-saas .ideale-gel-entree { /* Ombres — valeurs d'AVANT #369 (échelle « IDeal Evolution 01 », teintées de gris-bleu). */ --sh-sm: 0 1px 2px rgba(33, 40, 55, .06); --sh: 0 4px 14px rgba(33, 40, 55, .07); --sh-lg: 0 12px 34px rgba(33, 40, 55, .14); /* Le halo BLEU de la barre supérieure — c'est lui que la référence a fait disparaître du produit. */ --sh-topbar: 0 6px 6px rgba(31, 107, 255, .1); /* Rayons et largeurs de dialogue : INCHANGÉS par #369, figés quand même pour que la couverture soit une bijection et non un jugement (même raison que le « box-sizing: border-box » restitué plus haut). */ --r-sm: 6px; --r: 6px; --r-lg: 9px; --r-pill: 999px; --ideale-nav-hover: rgba(201, 210, 227, .5); --ideale-dialog-sm: 520px; --ideale-dialog-md: 640px; --ideale-dialog-lg: 860px; } /* Apparence SOMBRE — le bloc « [data-theme="dark"], .mud-theme-dark » d'app.css, tel qu'il était avant #369. */ html.ideale-monde-saas[data-theme="dark"] .ideale-gel-entree { --sh-sm: 0 1px 2px rgba(0, 0, 0, .40); --sh: 0 4px 14px rgba(0, 0, 0, .45); --sh-lg: 0 12px 34px rgba(0, 0, 0, .55); --sh-topbar: 0 2px 16px rgba(0, 0, 0, .35); --ideale-nav-hover: rgba(60, 78, 113, .5); } /* 📌 DEUX TOKENS DE CETTE FAMILLE NE SONT PAS FIGÉS, ET C'EST MESURÉ, PAS OUBLIÉ. « --g-blue / --g-amber / --g-green » (les dégradés KPI) et « --s-2 » ont été RETIRÉS du produit au #369 parce qu'ils n'avaient AUCUN consommateur — zéro occurrence de « var(--g-* ) » hors des trois classes .ideale-kpi-* (elles-mêmes sans porteur), zéro occurrence de « var(--s-2) » dans tout le dépôt. Un token que personne ne lit ne peut rien repeindre : les figer aurait ajouté du bruit et suggéré qu'ils servent. */