(un blob CSS qui respire), JAMAIS un MudAvatar — cette règle ne peut donc pas l'atteindre. */ html.ideale-monde-saas .mud-avatar { border-radius: var(--ds-rayon-avatar); } /* ============================================================================================= Vision UI Lot 2 + Interface ② — Présence de l'IA « IDeal » + écran de connexion split · périmètre SaaS Jumeau #203 de app-locataire.css (styles DUPLIQUÉS ; classes .ideale-ideal-* propres, jamais les .ideale-atlas-* partagées). Depuis ② l'avatar EST le logo animé : monochrome, colorway --ds-marque-* (bascule clair/sombre, jamais l'accent d'UI). Nom « IDeal » affiché en ITALIQUE. ============================================================================================= */ /* ---- Tokens FIXES de l'IA « IDeal » (ne se recolorent JAMAIS avec l'accent ni le mode) ---------- Depuis ② l'avatar (mono) tire ses couleurs de --ds-marque-* (plus bas) ; ne restent ici que le CYAN du caret de la phrase du login et le PICOT rouge (source unique, chaînée par la marque --ds-marque-picot). (L'ambiance « nuit indigo » du panneau a disparu au ③ : le panneau visage PERMUTE désormais avec le thème — cf. --ds-login-visage-fond — au lieu d'un fond fixe.) */ html.ideale-monde-saas { --ideal-cyan: #5FE0EF; --ideal-picot: #C6402F; } /* ---- Tokens de la MARQUE (le logo) — périmètre SaaS, jumeau #203 de app-locataire.css ----------- FIXES comme ceux de l'avatar : la marque bascule clair/sombre et ne suit JAMAIS l'accent d'UI. DEUX colorways, pas plus. Le PICOT chaîne sur celui de l'avatar (--ideal-picot) : la marque et l'avatar sont le même personnage — une seule source de vérité pour le rouge, jamais deux valeurs à resynchroniser. Exposés en --ds-* parce que la feuille du kit ne référence QUE des tokens --ds-* (contrainte ferme #286). ATTENTION : le DISQUE porte aussi le LOGOTYPE (le mot-symbole est posé sur la page, pas dans le disque) ; l'ENCRE est le visage, à l'intérieur du disque. Les confondre rend le nom invisible sur son propre fond. */ html.ideale-monde-saas { --ds-marque-disque: #1B1C1E; /* colorway « posé sur fond clair » */ --ds-marque-encre: #FFFFFF; --ds-marque-picot: var(--ideal-picot); } html.ideale-monde-saas[data-theme="dark"] { --ds-marque-disque: #FFFFFF; /* colorway « posé sur fond sombre » */ --ds-marque-encre: #1B1C1E; } /* ---- Tokens de l'ÉCRAN DE CONNEXION ③ (Interface ③) — deux colorways clair/sombre -------------- Valeurs arrêtées sur la maquette (Stéphane). La maquette EST le rendu SOMBRE (forme sombre, visage clair) ; le rendu CLAIR n'en est PAS le négatif paresseux — il a son propre équilibre. Doctrine : la colonne FORME suit le thème (--ds-login-forme-fond) ; le panneau VISAGE en est l'INVERSE (--ds-login-visage-fond) ; les champs, le bouton et le colorway de l'avatar CONTRASTENT toujours leur panneau. AUCUN fallback (un fallback masquerait un bug au lieu de le révéler). Jumeau #203 dans app-locataire.css. */ html.ideale-monde-saas { /* Colorway CLAIR (base) : forme claire, visage sombre. */ --ds-login-forme-fond: #F0F0F1; --ds-login-visage-fond: #0E0F12; --ds-login-visage-texte: #EAECFF; --ds-visage-marque-disque: #FFFFFF; /* visage SOMBRE → disque BLANC (contraste son panneau) */ --ds-visage-marque-encre: #1B1C1E; --ds-champ-fond: #FFFFFF; --ds-champ-bord: #D7D9E0; /* filet visible sur un panneau clair (le sombre n'en a pas) */ --ds-champ-texte: #1B1C1E; --ds-champ-libelle: #5A5D66; --ds-bouton-fond: #14161C; /* bouton foncé sur panneau clair — contraste le panneau */ --ds-bouton-texte: #FFFFFF; /* Encre & taille de la TUILE NEUTRE d'IDeal (le carré arrondi du descripteur sur --ds-avatar-fond, fixe). */ --ds-avatar-encre: #FFFFFF; --ds-avatar-tuile: 30px; /* Invariants (identiques dans les deux colorways) — valeurs arrêtées sur la maquette. */ --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; } html.ideale-monde-saas[data-theme="dark"] { /* Colorway SOMBRE (= la maquette) : forme sombre, visage clair. */ --ds-login-forme-fond: #0E0F12; --ds-login-visage-fond: #F0F0F1; --ds-login-visage-texte: #23252C; --ds-visage-marque-disque: #1B1C1E; /* visage CLAIR → disque SOMBRE */ --ds-visage-marque-encre: #FFFFFF; --ds-champ-fond: #2B303C; --ds-champ-bord: transparent; /* pas de filet en sombre (maquette) */ --ds-champ-texte: #EDEEF2; --ds-champ-libelle: #C9CBD2; --ds-bouton-fond: #FFFFFF; --ds-bouton-texte: #0E0F12; } /* ---- Avatar IDeal (Interface ② : LE LOGO qui s'anime) — face de la marque (MarqueIDeal, viewBox 200×200, SOURCE DE VÉRITÉ de la géométrie), rendue VIVANTE. Rond PARFAIT, MONOCHROME, plat : plus de dégradé, halo, ombre, anneau ni morph. Colorway = --ds-marque-* (l'avatar EST le logo : le disque contraste la page ; les couleurs vivent sur les éléments SVG). L'ANIMATION est l'organe vital : respire, cligne, suit le regard, sourit au survol. La MARQUE, elle, reste immobile. */ html.ideale-monde-saas .ideale-ideal-av { width: 66px; height: 66px; flex: 0 0 auto; cursor: pointer; overflow: visible; transition: transform .22s ease; } html.ideale-monde-saas .ideale-ideal-av:hover { transform: scale(1.12); } /* ⚠️ TAILLE PAR SCALE — un `transform` ne RÉSERVE pas sa place : l'avatar PEINT 1,85 × sa boîte mais n'en réserve que la taille nominale. Son seul usage (panneau de connexion) COMPENSE ce débordement par une marge qui DÉRIVE de --ideal-av-scale (voir plus bas). Le flat n'a plus ni halo ni ombre : le scale ne fait que grossir le disque. */ html.ideale-monde-saas .ideale-ideal-av--grand { --ideal-av-scale: 1.85; transform: scale(var(--ideal-av-scale)); } html.ideale-monde-saas .ideale-ideal-av--grand:hover { transform: scale(2.02); } html.ideale-monde-saas .ideale-ideal-av--mini { width: 44px; height: 44px; } /* Respiration : léger battement d'échelle du visage (~1,5 %). Le disque reste un CERCLE PARFAIT — un scale ne le déforme jamais. C'est tout l'intérêt du mono : la vie vient du MOUVEMENT, pas d'un contour qui morphe. */ html.ideale-monde-saas .ideale-ideal-souffle { transform-box: fill-box; transform-origin: center; animation: ideale-ideal-souffle 5s ease-in-out infinite; } /* Yeux : ce groupe reçoit le SUIVI DU REGARD (translate posé par ideal-presence.js, en unités du viewBox). */ html.ideale-monde-saas .ideale-ideal-yeux { transition: transform .12s ease-out; } /* Chaque œil CLIGNE (fermeture verticale), origine au centre de l'œil (transform-box:fill-box). */ html.ideale-monde-saas .ideale-ideal-oeil { transform-box: fill-box; transform-origin: center; animation: ideale-ideal-blink 5.4s infinite; } /* Sourire : s'accentue au survol (scaleY), origine au sommet du trait. */ html.ideale-monde-saas .ideale-ideal-sourire { transform-box: fill-box; transform-origin: center top; transition: transform .22s ease; } html.ideale-monde-saas .ideale-ideal-av:hover .ideale-ideal-sourire { transform: scaleY(1.35); } @keyframes ideale-ideal-souffle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } @keyframes ideale-ideal-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } } /* ---- Bulle flottante (bas-droite) : lanceur ---------------------------------------------------- */ /* Hauteur du pied de page fixe (③bis, défaut 5). La bulle IDeal reste TOUJOURS visible : elle se pose AU-DESSUS du pied (le pied ne gagne jamais). Le pied (.mud-main-content padding-bottom, app.css) ET le décalage bas de la bulle DÉRIVENT de ce seul token → si le pied change de hauteur, la bulle suit toute seule (un token, jamais un chiffre en dur). */ html.ideale-monde-saas { --ds-pied-hauteur: 44px; } html.ideale-monde-saas .ideale-ideal-bulle { position: fixed; right: 22px; bottom: calc(var(--ds-pied-hauteur) + 16px); z-index: 1300; border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0; } html.ideale-monde-saas .ideale-ideal-bulle .ideale-ideal-av--mini { transform: scale(.9); transition: transform .22s ease; } html.ideale-monde-saas .ideale-ideal-bulle:hover .ideale-ideal-av--mini { transform: scale(1.06); } html.ideale-monde-saas .ideale-ideal-bulle:focus-visible { outline: none; } html.ideale-monde-saas .ideale-ideal-bulle:focus-visible .ideale-ideal-av--mini { box-shadow: var(--ds-focus-ring); border-radius: 50%; } @keyframes ideale-ideal-rebond { 0% { transform: scale(.9); } 40% { transform: scale(1.14); } 70% { transform: scale(.98); } 100% { transform: scale(1); } } html.ideale-monde-saas .ideale-ideal-bulle--rebond .ideale-ideal-av--mini { animation: ideale-ideal-rebond .4s ease; } /* ---- Volet latéral droit redimensionnable ------------------------------------------------------ */ html.ideale-monde-saas .ideale-ideal-volet { position: fixed; right: 0; z-index: 1301; display: flex; flex-direction: column; background: var(--ds-bg-surface); color: var(--ds-text); border-left: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-lg); animation: ideale-ideal-volet-apparait .22s ease; } /* #321 F1 — largeur redimensionnable : la variable --volet-largeur (posée sur la RACINE par le module JS, donc partagée avec le décalage de l'écran-tâche ci-dessous) l'emporte ; à défaut, la largeur par défaut du mode. */ html.ideale-monde-saas .ideale-ideal-volet--compact { right: 22px; bottom: 22px; width: var(--volet-largeur, min(384px, 94vw)); height: min(560px, 74vh); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); } html.ideale-monde-saas .ideale-ideal-volet--plein { top: 0; bottom: 0; height: 100vh; width: var(--volet-largeur, min(440px, 96vw)); border-radius: 0; } /* #321 F1 — poignée de redimensionnement : bord GAUCHE du volet (ancré à droite), fine, curseur col-resize, focusable (anneau AA). Ne rogne pas le contenu (superposée). Masquée sur petit écran (voir media query). */ html.ideale-monde-saas .ideale-ideal-poignee { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; z-index: 2; cursor: col-resize; touch-action: none; background: transparent; } html.ideale-monde-saas .ideale-ideal-poignee:hover { background: var(--ds-border-subtle); } html.ideale-monde-saas .ideale-ideal-poignee:focus-visible { outline: 2px solid var(--ds-focus, var(--ds-brand)); outline-offset: -2px; } /* #310-C (revue UX) — volet PLEIN par-dessus un ÉCRAN-TÂCHE : jamais d'action recouverte. En pleine hauteur, le volet (fixed, z 1301) recouvrait la croix de sortie ET le volet d'action droit (bouton « Enregistrer ») de l'écran-tâche — violation des invariants §1/§2 pendant l'usage même que la doctrine encourage (« IDeal, seule surface flottante admise par-dessus une saisie »). Deux parades, par largeur (jumeau #203 strict) : · ≥ 1280 px : CÔTE-À-CÔTE — l'écran-tâche se décale de la largeur du volet (transition 225 ms, cohérente avec le shell) et TOUT reste visible : la conversation accompagne la saisie au lieu de la recouvrir ; · < 1280 px : le plein retombe au GABARIT COMPACT le temps de l'écran-tâche (l'état Plein du circuit est conservé — il se ré-exprime dès que la place existe ou de retour dans le shell standard). */ @media (min-width: 1280px) { html.ideale-monde-saas .kit-ecran-tache { transition: margin-right 225ms cubic-bezier(0, 0, 0.2, 1); } html.ideale-monde-saas:has(.ideale-ideal-volet--plein) .kit-ecran-tache { /* #321 F1 — le décalage suit la largeur choisie (même variable de racine que le volet) : jamais de contenu recouvert ni d'espace mort, quelle que soit la largeur redimensionnée. */ margin-right: var(--volet-largeur, min(440px, 96vw)); } } @media (max-width: 1279.98px) { html.ideale-monde-saas:has(.kit-ecran-tache) .ideale-ideal-volet--plein { top: auto; right: 22px; bottom: 22px; width: min(384px, 94vw); height: min(560px, 74vh); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); } } @keyframes ideale-ideal-volet-apparait { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } html.ideale-monde-saas .ideale-ideal-volet-entete { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ds-border-subtle); } html.ideale-monde-saas .ideale-ideal-volet-entete .ideale-ideal-av { width: 40px; height: 40px; cursor: default; } html.ideale-monde-saas .ideale-ideal-nom { font-style: italic; font-weight: 600; } html.ideale-monde-saas .ideale-ideal-volet-fil { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 14px; display: flex; flex-direction: column; gap: 10px; } /* #322 (G1/G2/G3) — chaque « tour » groupe un message et sa rangée d'actions/horodatage. La question reste à droite (bulle) ; la réponse coule « dans le blanc » à gauche, pleine largeur utile. */ html.ideale-monde-saas .ideale-ideal-tour { display: flex; flex-direction: column; gap: 3px; } html.ideale-monde-saas .ideale-ideal-tour--moi { align-self: flex-end; align-items: flex-end; max-width: 92%; } html.ideale-monde-saas .ideale-ideal-tour--ia { align-self: stretch; } html.ideale-monde-saas .ideale-ideal-msg { border-radius: var(--ds-r-md); padding: 8px 11px; } html.ideale-monde-saas .ideale-ideal-msg--moi { background: var(--ds-brand-subtle); color: var(--ds-brand-text); } /* #322 (G1) — la RÉPONSE « dans le blanc » : ni carte, ni bordure, ni fond ; le texte coule sur le fond du volet. */ html.ideale-monde-saas .ideale-ideal-msg--ia { padding: 2px 0; background: transparent; border: none; } /* L'attente « réfléchit » (avatar) reste un message IA (enfant direct du fil) : elle coule aussi dans le blanc, alignée à gauche. */ html.ideale-monde-saas .ideale-ideal-attente { align-self: flex-start; max-width: 92%; display: flex; align-items: center; gap: 8px; } /* #324 V5 — écran d'accueil (fil vide) : le titre REMONTE — on réduit l'espace mort sous l'en-tête pour un rythme naturel (en-tête → titre → sous-titre → suggestions → saisie). */ html.ideale-monde-saas .ideale-ideal-vide { text-align: center; padding: 6px 8px 14px; } html.ideale-monde-saas .ideale-ideal-proposition { margin: 4px 14px; padding: 10px 12px; border: 1px solid var(--ds-brand-border); background: var(--ds-brand-subtle); border-radius: var(--ds-r-md); } html.ideale-monde-saas .ideale-ideal-actions { padding: 6px 14px 0; } /* ---- Suggestions contextuelles (#311) : la bande qui fait qu'IDeal SUIT l'administrateur ---------------- Jumeau #203 de la règle d'app-locataire.css (feuilles scopées par monde, jamais de règle partagée). Les pastilles se renouvellent à chaque changement d'écran pendant que la conversation, elle, ne bouge pas. `flex: 0 0 auto` sur la ZONE est ESSENTIEL : le fil (flex: 1 1 auto) garde toute sa place et son propre défilement — la bande s'intercale au-dessus de la saisie sans jamais rogner la conversation. */ html.ideale-monde-saas .ideale-ideal-suggestions-zone { flex: 0 0 auto; padding: 6px 14px 0; } /* #321 F2 — RETOUR À LA LIGNE (flex-wrap) : plus AUCUN ascenseur horizontal, quelle que soit la largeur (F1) ou la longueur des libellés. Hauteur bornée (≈ 3 lignes) avec défilement VERTICAL discret si les suggestions sont nombreuses — jamais horizontal. */ html.ideale-monde-saas .ideale-ideal-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; max-height: 6.5rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } /* Chaque pastille garde son libellé sur une ligne (jamais coupé au milieu d'un mot) : c'est la BANDE qui passe à la ligne, plus le contenu qui défile latéralement. */ html.ideale-monde-saas .ideale-ideal-suggestions .ideale-ideal-sugg { white-space: nowrap; } /* La pastille est un BOUTON réel (focus clavier, activation Entrée/Espace, anneau de focus AA — jamais un div cliquable) simplement habillé en pastille. `nowrap` garantit un libellé lisible d'un bloc : c'est la bande qui défile, jamais le mot qui se coupe. */ /* #324 V3 — puces de suggestions COMPACTES et redessinées. Direction retenue (voir CR) : « fond très léger, sans bordure au repos, léger relief au survol » — substance et identité de marque sans la lourdeur de l'ancien contour plein toujours teinté. Le TEXTE ne change pas de taille (consigne) ; c'est la pilule qui se resserre (padding réduit) et se redessine. Cible tactile ~32px conservée (min-height 30 + padding). Tokens only, contraste AA (brand-text sur brand-subtle). */ html.ideale-monde-saas .ideale-ideal-sugg { border-radius: var(--ds-r-pill); text-transform: none; min-width: 0; min-height: 30px; padding: 3px 12px; background: var(--ds-brand-subtle); color: var(--ds-brand-text); border: 1px solid transparent; font-weight: 600; line-height: 1.3; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } html.ideale-monde-saas .ideale-ideal-sugg:hover { background: var(--ds-brand-subtle-2); border-color: var(--ds-brand-border); box-shadow: var(--ds-shadow-xs); } /* Focus clavier : anneau GLOBAL du projet (outline accent, app.css) conservé — pas d'outline:none ici. */ @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideale-ideal-sugg { transition: none; } } /* #323 P3-a — bandeau de prudence TOUT EN BAS, sous la saisie : micro-typo centrée, discrète, contraste AA préservé (token --ds-text-muted). Permanent : il porte la transparence IA depuis le retrait du badge (#322). */ html.ideale-monde-saas .ideale-ideal-avertissement { padding: 6px 12px 8px; text-align: center; } html.ideale-monde-saas .ideale-ideal-avertissement .mud-typography { font-size: .68rem; } /* #323 P3 — zone de saisie : les commandes s'alignent en BAS pour que le champ auto-extensible pousse vers le HAUT (le duo droit reste au ras de la dernière ligne, comme les assistants de référence). */ /* #324 V5 — rangée de saisie : on resserre le bas pour RAPPROCHER le bandeau de prudence du champ (le bandeau garde sa règle inchangée : padding 6px 12px 8px — verrou de test #323). */ html.ideale-monde-saas .ideale-ideal-saisie { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--ds-border-subtle); } html.ideale-monde-saas .ideale-ideal-champ { flex: 1 1 auto; } html.ideale-monde-saas .ideale-ideal-mic { flex: 0 0 auto; } /* #323 P3-b — bouton multirôle envoi / stop / coche (droite). */ html.ideale-monde-saas .ideale-ideal-envoi { flex: 0 0 auto; } /* #323 P3-d — visualiseur d'onde de dictée (remplace le champ pendant l'enregistrement) : occupe la place du champ, teinté « enregistrement » (rouge de danger), hauteur d'une ligne. Le dessin (barres réagissant au niveau réel, ou pulsation d'opacité sous mouvement réduit) est piloté côté JS via ce color (currentColor du canvas). */ html.ideale-monde-saas .ideale-ideal-onde-zone { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px; } html.ideale-monde-saas .ideale-ideal-onde { flex: 1 1 auto; height: 28px; width: 100%; color: var(--ds-danger); } html.ideale-monde-saas .ideale-ideal-onde-libelle { color: var(--ds-danger); font-weight: 600; white-space: nowrap; } /* ============================ #324 — finition visuelle de la zone de saisie (jumeau #203) ===================== Polissage PUR (aucune logique, aucun markup, aucune resx) : gabarit de boutons unifié carré-arrondi (V1), alignement au cordeau de la rangée (V2), puces compactes redessinées (V3), rythme vertical resserré (V5). Tokens uniquement, contraste AA, mouvement réduit respecté. Jumeau strict d'app-locataire.css. */ /* V2 — le champ auto-extensible pousse vers le HAUT (align-items:flex-end) ; on COLLE le bas VISIBLE du champ au bas des boutons en retirant la marge d'aide réservée (MudTextField dense réserve ~4px sous le champ, même sans texte d'aide) — sinon le duo droit flottait 4px sous l'axe du champ. Le display:none garde l'alignement si un texte d'aide venait à s'afficher. */ html.ideale-monde-saas .ideale-ideal-champ { margin-bottom: 0; } html.ideale-monde-saas .ideale-ideal-champ .mud-input-helper-text { display: none; } /* V1 — GABARIT UNIQUE des icônes-boutons de la rangée (💡, micro, croix, envoi, stop, coche) : carré à coins arrondis (token modéré ~8px, jamais un cercle), ~38px de côté, icône centrée optiquement. Bat le rayon pill du thème « nouveau » (spécificité + ordre source). Le clic fiable (#323 P3-f) reste garanti (glyphe transparent). */ html.ideale-monde-saas .ideale-ideal-saisie .mud-icon-button { width: 38px; height: 38px; min-width: 38px; flex: 0 0 auto; padding: 0; border-radius: var(--ds-r-sm); display: inline-flex; align-items: center; justify-content: center; box-shadow: none; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } html.ideale-monde-saas .ideale-ideal-saisie .mud-icon-button .mud-icon-root { font-size: 20px; color: inherit; } /* Anneau de focus : on s'appuie sur l'anneau GLOBAL du projet (outline accent, app.css) — jamais d'outline:none ici, qui retirerait l'indicateur de focus clavier (WCAG 2.4.7). box-shadow:none ne touche que l'élévation. */ @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideale-ideal-saisie .mud-icon-button { transition: none; } } /* V1 — ACCENT PLEIN : envoi + coche (le bouton PRINCIPAL « aller / valider »). Accent de la charte (--ds-brand), glyphe sur fond (--ds-text-on-brand). :not(.ideale-ideal-stop) exclut le stop, qui partage .ideale-ideal-envoi. */ html.ideale-monde-saas .ideale-ideal-envoi:not(.ideale-ideal-stop) { background: var(--ds-brand); color: var(--ds-text-on-brand); } html.ideale-monde-saas .ideale-ideal-envoi:not(.ideale-ideal-stop):hover { background: var(--ds-brand-hover); } html.ideale-monde-saas .ideale-ideal-envoi:not(.ideale-ideal-stop):active { background: var(--ds-brand-active); } /* Envoi DÉSACTIVÉ (champ vide) : gabarit conservé, gris de token propre (bat le disabled !important de MudBlazor, plus net que son voile noir translucide). « Envoi grisé champ vide » (V1). */ html.ideale-monde-saas .ideale-ideal-envoi:not(.ideale-ideal-stop):disabled, html.ideale-monde-saas .ideale-ideal-envoi:not(.ideale-ideal-stop).mud-disabled { background: var(--ds-bg-inset) !important; color: var(--ds-text-subtle) !important; } /* V1 — FANTÔME (ghost) du MÊME gabarit : micro, croix (annuler la dictée), stop (arrêter la génération) et la bascule 💡 — l'envoi est plein, le reste discret. « stop et croix » = déclinaison token cohérente (teinte adaptée). */ html.ideale-monde-saas .ideale-ideal-mic, html.ideale-monde-saas .ideale-ideal-stop, html.ideale-monde-saas .ideale-ideal-sugg-bascule { background: transparent; color: var(--ds-text-muted); } html.ideale-monde-saas .ideale-ideal-mic:hover, html.ideale-monde-saas .ideale-ideal-stop:hover, html.ideale-monde-saas .ideale-ideal-sugg-bascule:hover { background: var(--ds-bg-hover); color: var(--ds-text); } /* La bascule 💡 REPLIÉE s'aligne sur le ghost du micro (muted, même tonalité) ; DÉPLIÉE, MudBlazor la teinte accent (.mud-primary-text = --ds-brand, état actif) — on ne « muted » donc que l'état replié. Spécificité renforcée car MudBlazor colore le bouton enveloppé dans le MudBadge en --ds-text. */ html.ideale-monde-saas .ideale-ideal-saisie .ideale-ideal-sugg-bascule:not(.mud-primary-text) { color: var(--ds-text-muted); } /* #324 (revue adversariale) — le Stop est rendu Variant.Filled Color.Primary : MudBlazor le REMPLIT de marque à :focus-visible ET :active (.mud-button-filled-primary:focus-visible/:active et .mud-icon-button:active .mud-button-filled-primary, spécificité 0,3,0 — au-dessus du ghost de base 0,2,1). Sans garde, un utilisateur CLAVIER (focus) ou à l'activation verrait le Stop reprendre le fond de marque, le glyphe muted tombant alors sous 3:1. On maintient le ghost transparent sur ces deux états, spécificité renforcée (0,4,1 > 0,3,0). L'anneau de focus (box-shadow du gabarit) reste visible. Micro/croix/💡 ne sont pas « filled » → non concernés. */ html.ideale-monde-saas .ideale-ideal-saisie .ideale-ideal-stop:focus-visible, html.ideale-monde-saas .ideale-ideal-saisie .ideale-ideal-stop:active { background: transparent; } /* ============================ #335 — bouton flottant « Revenir en bas » du fil (jumeau #203) ================== Quand le fil est défilé vers le haut (seuil ~200 px, arbitré côté JS), un bouton apparaît en fondu, CENTRÉ au-dessus de la zone de saisie ; un clic ramène en bas (défilement doux). Apparition/disparition ET clic sont 100 % client (écouteur scroll du module — zéro aller-retour .NET, doctrine #308). L'hôte est positionné dans la rangée de saisie (position:relative), en dehors du flux flex (aucun impact sur la rangée). Carré-arrondi, gabarit #324 — JAMAIS rond (le cercle est réservé à l'avatar d'IDeal). Tokens uniquement, contraste AA, mouvement réduit respecté. Jumeau strict d'app-locataire.css. */ html.ideale-monde-saas .ideale-ideal-saisie { position: relative; } html.ideale-monde-saas .ideale-ideal-vers-bas-hote { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 3; transform: translateX(-50%) translateY(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } html.ideale-monde-saas .ideale-ideal-vers-bas-hote--visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideale-ideal-vers-bas-hote { transition: none; } } html.ideale-monde-saas .ideale-ideal-vers-bas { width: 38px; height: 38px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ds-border); border-radius: var(--ds-r-sm); background: var(--ds-bg-surface); color: var(--ds-text-muted); box-shadow: var(--ds-shadow-md); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } html.ideale-monde-saas .ideale-ideal-vers-bas:hover { background: var(--ds-bg-hover); color: var(--ds-text); box-shadow: var(--ds-shadow-lg); } html.ideale-monde-saas .ideale-ideal-vers-bas:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; } html.ideale-monde-saas .ideale-ideal-vers-bas .mud-icon-root { font-size: 20px; } @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideale-ideal-vers-bas { transition: none; } } /* ---- Voix (#306) : note d'erreur vocale présentable (les états « J'écoute… » / « Transcription… » sont désormais rendus DANS la zone de saisie — visualiseur d'onde #323 P3-d). ------------------------------------------------ */ html.ideale-monde-saas .ideale-ideal-note { margin: 0 14px 4px; } @media (prefers-reduced-motion: reduce) { /* #321 (revue) : l'apparition du volet (translation + opacité) suit la discipline maison — figée en mouvement réduit (comme le rebond de la bulle et les animations de la présence). */ html.ideale-monde-saas .ideale-ideal-volet { animation: none; } } /* ---- #321 F1 — petit écran : volet pleine largeur, poignée masquée -------------------------------------- La préférence de largeur est ignorée (width:auto + left/right:0 l'emportent sur --volet-largeur). Choisi à 768 px (téléphone + tablette portrait) : au-delà, le panneau latéral reprend tout son sens et redevient ajustable. */ @media (max-width: 767.98px) { html.ideale-monde-saas .ideale-ideal-volet--compact, html.ideale-monde-saas .ideale-ideal-volet--plein { left: 0; right: 0; width: auto; } html.ideale-monde-saas .ideale-ideal-poignee { display: none; } } /* ---- #321 F3 / #322 G2-G3 — barres d'actions sous chaque message : discrètes, tokens, jamais de débordement --- Base commune (réponse ET question) ; la réponse reste alignée à gauche (comportement #321 inchangé), la question s'aligne à droite et s'atténue au repos (pleine au survol/focus ; toujours visible au toucher). */ html.ideale-monde-saas .ideale-ideal-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 4px; } html.ideale-monde-saas .ideale-ideal-barre-question { justify-content: flex-end; } /* #322 (revue AA) — l'atténuation au repos ne porte QUE sur les BOUTONS d'action (révélés au survol/focus). L'horodatage est de l'INFORMATION persistante, pas une action : il reste à pleine opacité (--ds-text-muted tient l'AA ; l'atténuer via l'opacité du parent le ferait chuter sous 4,5:1, ce que l'opacité d'un ancêtre rend inévitable pour tout le sous-arbre — d'où l'atténuation ciblée sur les seules actions). */ html.ideale-monde-saas .ideale-ideal-barre-question .ideale-ideal-action { opacity: .62; transition: opacity .15s ease; } html.ideale-monde-saas .ideale-ideal-tour--moi:hover .ideale-ideal-barre-question .ideale-ideal-action, html.ideale-monde-saas .ideale-ideal-barre-question:focus-within .ideale-ideal-action { opacity: 1; } /* Tactile (pas de survol) : actions toujours pleinement visibles — jamais une action « cachée » derrière un hover absent. */ @media (hover: none) { html.ideale-monde-saas .ideale-ideal-barre-question .ideale-ideal-action { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideale-ideal-barre-question .ideale-ideal-action { transition: none; } } /* #322 (G2) — horodatage : micro-typo DISCRÈTE mais contraste AA (token --ds-text-muted, jamais --ds-text-subtle). */ html.ideale-monde-saas .ideale-ideal-horodatage { font-size: .68rem; color: var(--ds-text-muted); white-space: nowrap; } html.ideale-monde-saas .ideale-ideal-horodatage--fin { margin-left: 4px; } /* ============================ #323 — affinages des barres, clic fiable, marqueur d'arrêt ======================== */ /* P3-e — icônes des barres d'actions plus FINES (glyphe ~16px) ; la cible tactile reste généreuse (bouton ≥ ~32px). On réduit le DESSIN, jamais l'accessibilité. L'horodatage NE change PAS (taille validée par le pilotage). */ html.ideale-monde-saas .ideale-ideal-barre .ideale-ideal-action { min-width: 30px; } html.ideale-monde-saas .ideale-ideal-barre .ideale-ideal-action .mud-icon-root { font-size: 1rem; } /* P3-e — la barre RÉPONSE s'atténue aussi au repos (montée au survol/focus), comme la barre question. L'atténuation porte UNIQUEMENT sur les ACTIONS (jamais l'horodatage, qui est de l'information — verrou AA #322 conservé). */ html.ideale-monde-saas .ideale-ideal-barre-reponse .ideale-ideal-action { opacity: .62; transition: opacity .15s ease; } html.ideale-monde-saas .ideale-ideal-tour--ia:hover .ideale-ideal-barre-reponse .ideale-ideal-action, html.ideale-monde-saas .ideale-ideal-barre-reponse:focus-within .ideale-ideal-action { opacity: 1; } @media (hover: none) { html.ideale-monde-saas .ideale-ideal-barre-reponse .ideale-ideal-action { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideale-ideal-barre-reponse .ideale-ideal-action { transition: none; } } /* P3-f — CLIC FIABLE : le glyphe / le badge ne captent JAMAIS l'événement (ils faisaient rater le clic au centre de l'ampoule) → toute la surface du bouton répond, jusqu'au bord. Corrigé à la RACINE (pointer-events du glyphe), pas par un agrandissement cosmétique. Couvre TOUTES les icônes-boutons du volet (bascule, micro, envoi/stop/coche, barres d'actions, en-tête). */ html.ideale-monde-saas .ideale-ideal-volet .mud-icon-button .mud-icon-root, html.ideale-monde-saas .ideale-ideal-volet .mud-badge__badge { pointer-events: none; } /* #323 P1 — marqueur DISCRET « Génération arrêtée » (ni réponse, ni action, ni vote). */ html.ideale-monde-saas .ideale-ideal-arret { display: flex; align-items: center; gap: 6px; padding: 2px 0; } html.ideale-monde-saas .ideale-ideal-arret .mud-icon-root { font-size: 1rem; } /* #322 (G1) — sources DISCRÈTES en pied de réponse : reliées par un filet fin, jamais enfermées dans une carte. (Côté SaaS, l'assistant n'ancre pas sur un graphe : cette zone reste inutilisée par ReponseIDealSaaS ; la règle est conservée par PARITÉ visuelle avec le locataire.) */ html.ideale-monde-saas .ideale-ideal-sources { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ds-border-subtle); } /* #322 (G4) — zone de suggestions REPLIABLE : animation de hauteur par grille (0fr↔1fr), débranchée sous prefers-reduced-motion. Repliée, l'intérieur est visibility:hidden → retiré du parcours clavier et de l'arbre d'accessibilité (jamais un bouton focalisable invisible) ; la visibilité reste le temps de la fermeture puis se coupe. `flex: 0 0 auto` : la zone ne rogne jamais le fil (flex: 1 1 auto). */ html.ideale-monde-saas .ideale-ideal-suggestions-repli { flex: 0 0 auto; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; } html.ideale-monde-saas .ideale-ideal-suggestions-repli--ouvert { grid-template-rows: 1fr; } html.ideale-monde-saas .ideale-ideal-suggestions-repli-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility .22s; } html.ideale-monde-saas .ideale-ideal-suggestions-repli--ouvert .ideale-ideal-suggestions-repli-inner { visibility: visible; } @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideale-ideal-suggestions-repli, html.ideale-monde-saas .ideale-ideal-suggestions-repli-inner { transition: none; } } html.ideale-monde-saas .ideale-ideal-sugg-bascule { flex: 0 0 auto; } /* #322 (G3) — mini-confirm inline « remplacer le brouillon ? » : discret, au-dessus de la saisie, jamais un modal par-dessus le volet flottant. Ne rogne pas le fil (flex: 0 0 auto). */ html.ideale-monde-saas .ideale-ideal-confirm { flex: 0 0 auto; margin: 0 14px 4px; padding: 8px 10px; border: 1px solid var(--ds-brand-border); background: var(--ds-brand-subtle); border-radius: var(--ds-r-md); display: flex; flex-direction: column; gap: 4px; } html.ideale-monde-saas .ideale-ideal-confirm-actions { display: flex; justify-content: flex-end; gap: 6px; } /* ---- #321 F4 — présence « réfléchit » : on RÉUTILISE les keyframes existants (souffle/clignement) en n'accélérant que la DURÉE — géométrie et couleurs gravées intactes, aucun morph, aucun nouveau glyphe. ----- */ html.ideale-monde-saas .ideale-ideal-av--reflechit .ideale-ideal-souffle { animation-duration: 1.3s; } html.ideale-monde-saas .ideale-ideal-av--reflechit .ideale-ideal-oeil { animation-duration: 2.2s; } /* Sous prefers-reduced-motion, le figeage général coupe tout mouvement ; « réfléchit » signale l'activité par une pulsation d'OPACITÉ douce (jamais de translation ni de scale). Le !important + la spécificité battent le figeage. Keyframe au NOM GLOBAL PARTAGÉ avec le locataire (comme souffle/blink/volet-apparait) : définitions identiques dans les deux feuilles, aucune collision (chacune scopée à son monde). */ @keyframes ideale-ideal-reflechit-opacite { 0%, 100% { opacity: 1; } 50% { opacity: .6; } } @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideale-ideal-av--reflechit .ideale-ideal-souffle { animation: ideale-ideal-reflechit-opacite 1.8s ease-in-out infinite !important; } } /* ============================================================================================= Écran de connexion ③ (Interface ③) — PAGE PLEINE, split forme|visage + pied PLEINE LARGEUR. Plus de « box » : le formulaire EST la moitié gauche. La colonne FORME suit le thème (--ds-login-forme-fond) ; le panneau VISAGE en est l'INVERSE (--ds-login-visage-fond) → deux tons quel que soit le thème, qui PERMUTENT à la bascule clair/sombre. Champs, bouton, descripteur et colorway de l'avatar dérivent des tokens (aucune valeur en dur ici). Jumeau #203 dans app-locataire.css. =========== */ html.ideale-monde-saas .ideale-ideal-login { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; grid-template-areas: "forme visage" "pied pied"; min-height: 100vh; } /* Sous 900 px : une seule colonne (le panneau visage disparaît) + rangée du pied. */ @media (max-width: 900px) { html.ideale-monde-saas .ideale-ideal-login { grid-template-columns: 1fr; grid-template-areas: "forme" "pied"; } } /* ---- Colonne FORME (gauche) : tête ancrée (nom + langue), formulaire centré ---- */ html.ideale-monde-saas .ideale-ideal-login-forme { grid-area: forme; position: relative; display: flex; align-items: center; justify-content: center; padding: 24px 28px; background: var(--ds-login-forme-fond); } /* Tête ANCRÉE en absolu (nom à gauche, langue à droite) → le corps se centre sur TOUTE la hauteur de la colonne, au même niveau optique que le visage d'en face (et non décalé sous une bande d'en-tête). */ html.ideale-monde-saas .ideale-ideal-login-tete { position: absolute; top: 22px; left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } html.ideale-monde-saas .ideale-ideal-login-corps { width: 100%; max-width: 300px; } /* ---- Panneau VISAGE (droite) : la présence + la phrase tournante. Fond INVERSE du thème. ---- */ html.ideale-monde-saas .ideale-ideal-login-visage { grid-area: visage; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 48px 40px; background: var(--ds-login-visage-fond); color: var(--ds-login-visage-texte); } @media (max-width: 900px) { html.ideale-monde-saas .ideale-ideal-login-visage { display: none; } } /* L'avatar du panneau suit le colorway du PANNEAU (inverse du thème), porté par --ds-visage-marque-* — ce qui REMPLACE le forçage ② « disque toujours blanc » : le panneau n'est plus fixe, il permute. Aucun hex ici. */ html.ideale-monde-saas .ideale-ideal-login-visage .ideale-ideal-av { --ideal-av-taille: 80px; width: var(--ideal-av-taille); height: var(--ideal-av-taille); --ds-marque-disque: var(--ds-visage-marque-disque); --ds-marque-encre: var(--ds-visage-marque-encre); } /* On réserve la place réellement PEINTE par le scale de --grand (l'avatar peint taille×scale mais n'en réserve que la nominale). Marge DÉRIVÉE, jamais divergente du scale. L'avatar ② n'est pas touché : c'est la mise en page qui disait faux sur la place qu'il occupe. */ html.ideale-monde-saas .ideale-ideal-login-visage .ideale-ideal-av--grand { margin-block: calc(var(--ideal-av-taille) * (var(--ideal-av-scale) - 1) / 2); } html.ideale-monde-saas .ideale-ideal-login-message { max-width: 320px; text-align: center; font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ds-login-visage-texte); min-height: 3.2em; } html.ideale-monde-saas .ideale-ideal-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: var(--ideal-cyan); animation: ideale-ideal-caret 1s step-end infinite; } @keyframes ideale-ideal-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ---- Visage « remonté » sous 900 px : le panneau étant masqué, la présence apparaît en petit au-dessus du titre, dans la colonne formulaire (le seul rond de l'écran reste UNIQUE — l'un OU l'autre selon la largeur). */ html.ideale-monde-saas .ideale-ideal-login-visage-mobile { display: none; } @media (max-width: 900px) { html.ideale-monde-saas .ideale-ideal-login-visage-mobile { display: block; width: 56px; height: 56px; margin: 0 0 18px; } } /* ---- Pied de page — court sur TOUTE la largeur (sous les deux panneaux), fond de la colonne formulaire. ---- */ html.ideale-monde-saas .ideale-ideal-login-pied { grid-area: pied; display: flex; align-items: center; justify-content: center; padding: 8px 16px; background: var(--ds-login-forme-fond); font-size: var(--ds-pied-taille); /* Pas de border-top ici : le FILET est porté par le composant .ideale-pied-copyright (③bis, défaut 2 — sinon deux traits se superposaient au-dessus du pied). */ } /* ---- « Bienvenue » + descripteur (tuile neutre --ds-avatar-fond OU identité du client) ---- */ html.ideale-monde-saas .ideale-login-bienvenue { margin: 0 0 6px; line-height: 1.2; font-size: var(--ds-bienvenue-taille); font-weight: var(--ds-bienvenue-graisse); color: var(--ds-champ-texte); } html.ideale-monde-saas .ideale-login-descripteur { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; min-width: 0; color: var(--ds-champ-libelle); } html.ideale-monde-saas .ideale-login-descripteur-texte { font-size: 13px; min-width: 0; } /* Tuile NEUTRE d'IDeal : carré ARRONDI (doctrine ① : --ds-rayon-avatar, jamais un rond) sur le fond neutre --ds-avatar-fond — le token créé au ①, ENFIN consommé — encre claire fixe --ds-avatar-encre. */ html.ideale-monde-saas .ideale-login-descripteur-tuile { width: var(--ds-avatar-tuile); height: var(--ds-avatar-tuile); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-rayon-avatar); background: var(--ds-avatar-fond); color: var(--ds-avatar-encre); } /* Logo d'entreprise du client (prompt 231) : carré arrondi, jamais rogné. */ html.ideale-monde-saas .ideale-login-descripteur-logo { width: auto; height: var(--ds-avatar-tuile); max-width: 132px; flex: 0 0 auto; object-fit: contain; border-radius: var(--ds-rayon-avatar); } /* AvatarHabille (identité du client) dans le descripteur : dimensionné à la tuile ; sa FORME (carré arrondi ①) et son dégradé d'habillage — le fond du client — restent INCHANGÉS (on ne fait que le dimensionner). */ html.ideale-monde-saas .ideale-login-descripteur .mud-avatar { width: var(--ds-avatar-tuile); height: var(--ds-avatar-tuile); font-size: 13px; } /* ---- Champs & bouton du formulaire ③ — surcharge TOKENISÉE, SCOPÉE au login (n'affecte ni Login.razor ni les autres POST natifs, qui gardent la base .ideale-form-field d'app.css). ---- */ html.ideale-monde-saas .ideale-ideal-login .ideale-form-label { margin: 14px 0 5px; font-weight: 600; font-size: var(--ds-champ-libelle-taille); color: var(--ds-champ-libelle); } html.ideale-monde-saas .ideale-ideal-login .ideale-form-field { height: var(--ds-champ-hauteur); padding: 8px 12px; border: 1px solid var(--ds-champ-bord); border-radius: var(--ds-champ-rayon); background: var(--ds-champ-fond); color: var(--ds-champ-texte); font-size: var(--ds-champ-texte-taille); } html.ideale-monde-saas .ideale-ideal-login .ideale-form-field:hover { border-color: var(--ds-border-strong); } html.ideale-monde-saas .ideale-ideal-login .ideale-form-field:focus { outline: none; border-color: var(--ds-brand); box-shadow: var(--ds-focus-ring); } /* Champ mot de passe + bouton « œil » (afficher/masquer), ancré à droite dans le champ. */ html.ideale-monde-saas .ideale-ideal-login .ideale-login-champ-mdp { position: relative; } html.ideale-monde-saas .ideale-ideal-login .ideale-login-champ-mdp .ideale-form-field { padding-right: 42px; } html.ideale-monde-saas .ideale-ideal-login .ideale-login-oeil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--ds-champ-libelle); } html.ideale-monde-saas .ideale-ideal-login .ideale-login-oeil:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: var(--ds-r-sm); } /* Bouton « Se connecter » : PILULE, contraste le panneau formulaire (blanc sur sombre / foncé sur clair). */ html.ideale-monde-saas .ideale-ideal-login .ideale-login-bouton { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: var(--ds-bouton-hauteur); margin-top: 20px; border: 0; border-radius: var(--ds-r-pill); background: var(--ds-bouton-fond); color: var(--ds-bouton-texte); font-family: var(--ds-font-ui); font-size: 13px; font-weight: 600; cursor: pointer; transition: filter .15s ease, transform .05s ease; } html.ideale-monde-saas .ideale-ideal-login .ideale-login-bouton:hover { filter: brightness(0.93); } html.ideale-monde-saas .ideale-ideal-login .ideale-login-bouton:active { transform: translateY(1px); } html.ideale-monde-saas .ideale-ideal-login .ideale-login-bouton:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); } /* ---- prefers-reduced-motion : avatar figé, message fixe, aucun mouvement ------------------------ */ @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideale-ideal-souffle, html.ideale-monde-saas .ideale-ideal-oeil, html.ideale-monde-saas .ideale-ideal-sourire, html.ideale-monde-saas .ideale-ideal-bulle--rebond .ideale-ideal-av--mini, html.ideale-monde-saas .ideale-ideal-caret { animation: none !important; } html.ideale-monde-saas .ideale-ideal-yeux { transition: none !important; } } /* ============================================================================================= Vision UI Lot 3 (#285) — SHELL LATÉRAL « Pro · 2026 » (menu 1F). Scopé au MONDE SaaS (#203 : règles DUPLIQUÉES, jamais partagées ; jumeau dans app-locataire.css). Tokens du design system (--ds-*). ============================================================================================= */ /* ---- Conteneur du tiroir : plein hauteur, flyout autorisé à déborder du rail ---- */ html.ideale-monde-saas .ideal-drawer-shell .mud-drawer-content { height: 100%; padding: 0; overflow: visible; } html.ideale-monde-saas .mud-drawer.ideal-drawer-shell { overflow: visible; } /* ---- Aside : colonne pleine hauteur ---- */ html.ideale-monde-saas .ideal-shell { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--ds-bg-surface); color: var(--ds-text); font-family: var(--ds-font-ui); letter-spacing: -0.006em; } /* ---- 1) En-tête : sélecteur d'espace + burger ---- */ html.ideale-monde-saas .ideal-shell-entete { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px; } html.ideale-monde-saas .ideal-shell--replie .ideal-shell-entete { justify-content: center; padding: 10px 6px 8px; } html.ideale-monde-saas .ideal-espace { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--ds-bg-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); cursor: pointer; text-align: left; color: inherit; transition: border-color .15s; } html.ideale-monde-saas .ideal-espace:hover { border-color: var(--ds-border-strong); } html.ideale-monde-saas .ideal-espace-pastille { width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--ds-brand); color: var(--ds-text-on-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } html.ideale-monde-saas .ideal-espace-texte { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; } html.ideale-monde-saas .ideal-espace-nom { display: block; font-size: 12.5px; font-weight: 700; color: var(--ds-text-strong); text-overflow: ellipsis; overflow: hidden; } html.ideale-monde-saas .ideal-espace-plan { display: block; font-size: 10.5px; color: var(--ds-text-muted); text-overflow: ellipsis; overflow: hidden; } html.ideale-monde-saas .ideal-burger { width: 38px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-bg-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); color: var(--ds-text-muted); cursor: pointer; transition: border-color .15s, color .15s; } html.ideale-monde-saas .ideal-burger:hover { border-color: var(--ds-border-strong); color: var(--ds-text-strong); } html.ideale-monde-saas .ideal-burger--rail { width: 44px; height: 38px; } /* ---- Expansion au survol/focus (#305) : le menu complet en SURIMPRESSION au-dessus du contenu, PENDANT que le MudDrawer reste réduit (74 px) — le contenu de page ne bouge pas (aucun saut de layout). L'overlay s'appuie sur la chaîne overflow:visible du tiroir (ci-dessus) et les tokens du monde. Transition douce (opacité + léger glissement), coupée si l'utilisateur préfère réduire les animations. */ html.ideale-monde-saas .ideal-shell--etendu { position: absolute; top: 0; left: 0; height: 100%; width: 280px; z-index: 30; border-right: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-lg); animation: ideal-shell-etendu-saas .16s ease; } @keyframes ideal-shell-etendu-saas { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.ideale-monde-saas .ideal-shell--etendu { animation: none; } } /* #308 (recette) — pendant l'expansion en surimpression, le TIROIR passe AU-DESSUS de la bande basse fixe (.ideale-bas-fixe, z 1300). Pourquoi : MudBlazor décale cette bande de la largeur du TIROIR (74 px en rail, règle « .mud-drawer--closed ~ div ») et non de celle de l'overlay (280 px) ; la tranche x∈[74;280] du pied (« Aide ») passait donc SOUS la bande — rognée ET non cliquable (mesuré : elementFromPoint au centre du bouton renvoyait le copyright). Cran 1310 : au-dessus de la bande (1300), toujours SOUS les dialogues, popovers et snackbars MudBlazor (1400+). Rail et épinglé sont sains par construction (la bande démarre au bord du tiroir) : le cran ne s'applique QUE pendant l'overlay — aucune autre superposition modifiée. */ html.ideale-monde-saas .mud-drawer.ideal-drawer-shell:has(.ideal-shell--etendu) { z-index: 1310; } /* ---- Séparateurs ---- */ html.ideale-monde-saas .ideal-shell-sep { flex: none; height: 1px; background: var(--ds-border-subtle); margin: 4px 12px; } /* ---- 2) Navigation (déployée) ---- */ html.ideale-monde-saas .ideal-shell-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 10px; } html.ideale-monde-saas .ideal-shell--replie .ideal-shell-nav { padding: 6px 6px 10px; } /* Libellé de section du menu : --ds-text-muted et NON --ds-text-subtle (PAL1). Ces libellés portent la STRUCTURE de navigation (« PLATEFORME », « ADMINISTRATION »…) = information → WCAG AA, que subtle échoue (3,01:1 en clair / 3,77:1 en sombre) — d'autant plus critique à 9,5 px. muted = 5,77:1 / 6,65:1. */ html.ideale-monde-saas .ideal-nav-section { font-family: var(--ds-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--ds-text-muted); padding: 10px 8px 4px; text-transform: uppercase; } html.ideale-monde-saas .ideal-nav-item-hote { position: relative; } html.ideale-monde-saas .ideal-nav-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; margin-bottom: 1px; border: 0; border-radius: var(--ds-r-sm); cursor: pointer; text-align: left; font-size: 13px; background: transparent; color: var(--ds-text); font-weight: 600; transition: background .12s, color .12s; } html.ideale-monde-saas .ideal-nav-item:hover { background: var(--ds-bg-hover); } html.ideale-monde-saas .ideal-nav-item--n2, html.ideale-monde-saas .ideal-nav-item--n3 { font-size: 12.5px; font-weight: 500; color: var(--ds-text-muted); padding: 6px 9px; } html.ideale-monde-saas .ideal-nav-item.actif { background: var(--ds-brand-subtle); color: var(--ds-brand-text); font-weight: 700; } html.ideale-monde-saas .ideal-nav-item.actif::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 17px; background: var(--ds-brand); border-radius: 0 3px 3px 0; } html.ideale-monde-saas .ideal-nav-item-icone { flex: none; } html.ideale-monde-saas .ideal-nav-item-libelle { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.ideale-monde-saas .ideal-nav-item-badge { flex: none; background: var(--ds-bg-surface-3); color: var(--ds-text-muted); border-radius: var(--ds-r-xs); font-size: 10px; font-weight: 700; padding: 1px 6px; font-family: var(--ds-font-mono); } /* Raccourci clavier (Alt+1..5) : --ds-text-muted et NON --ds-text-subtle (PAL1) — un raccourci découvrable est une information, pas une décoration ; à 9,5 px, subtle (3,01:1) le rendait quasi illisible. */ html.ideale-monde-saas .ideal-nav-item-kbd { flex: none; font-family: var(--ds-font-mono); font-size: 9.5px; font-weight: 600; color: var(--ds-text-muted); border: 1px solid var(--ds-border); border-radius: 5px; padding: 1px 5px; background: var(--ds-bg-surface-2); } html.ideale-monde-saas .ideal-nav-item-chevron { flex: none; color: var(--ds-text-subtle); } html.ideale-monde-saas .ideal-nav-item--verrou { color: var(--ds-text-subtle); cursor: not-allowed; opacity: .7; } html.ideale-monde-saas .ideal-nav-enfants { margin: 1px 0 3px 19px; padding-left: 10px; border-left: 1px solid var(--ds-border); } /* ---- 2 bis) Rail d'icônes (mode réduit) ---- */ html.ideale-monde-saas .ideal-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; } html.ideale-monde-saas .ideal-rail-item { position: relative; width: 46px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; cursor: pointer; background: transparent; color: var(--ds-text-muted); transition: background .12s, color .12s; } html.ideale-monde-saas .ideal-rail-item:hover { background: var(--ds-bg-hover); color: var(--ds-text-strong); } html.ideale-monde-saas .ideal-rail-item.actif { background: var(--ds-brand-subtle); color: var(--ds-brand-text); } html.ideale-monde-saas .ideal-rail-item.actif::before { content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--ds-brand); border-radius: 0 3px 3px 0; } html.ideale-monde-saas .ideal-rail-pastille { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: var(--ds-r-pill); background: var(--ds-danger); border: 1.5px solid var(--ds-bg-surface); } /* (#305 : le flyout par groupe du mode réduit est REMPLACÉ par l'expansion en surimpression ci-dessus ; la carte « Conso IA » du pied a quitté le shell — côté SaaS l'information vit sur /plateforme/ia.) */ /* ---- 3) Pied : aide seule (#307 — carte profil remontée en barre du haut, indicateur de santé supprimé ; le pied ne porte plus que des liens de navigation, aucun bloc sans forme « rail » propre) ---- */ html.ideale-monde-saas .ideal-shell-pied { flex: none; padding: 6px 10px 10px; } html.ideale-monde-saas .ideal-shell--replie .ideal-shell-pied { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 6px 10px; } /* (.ideal-pied-cloche / .ideal-pied-theme / --rail retirées au ③bis ; .ideal-pied-statut / .ideal-pied-profil* retirées au #307 : tout le contenu non-navigation du pied vit désormais dans la barre du haut.) */ /* Pilotage support (Vision UI 5F-2) — carte VEDETTE du taux résolu par l'IA : filet d'accent de marque qui la distingue des tuiles KPI voisines (§E2, hiérarchie). Remplace un « border-left: 4px solid var(--mud-palette- primary) » posé en Style inline : la couleur vient désormais du token de monde, clair ET sombre. Style de PAGE (.ideale-*) → feuille du monde SaaS scopée, jamais kit-ui.css qui est commun aux deux mondes. */ html.ideale-monde-saas .ideale-support-vedette { border-left: 4px solid var(--ds-brand); } /* ====================================================================================================== EXP-9d (B) — CHASSE AU GRIS · jumelles écrites SÉPARÉMENT (#203 : on duplique, on ne factorise pas). Ces règles descendent de la feuille COMMUNE app.css, où elles portaient une dette : le gris legacy --s-2 (#EBEEF4) était la seule teinte BLEUE du shell, hors famille sarcelle. Réparer dans la commune aurait masqué la dette #203 au lieu de la solder. Aucune valeur nouvelle : jetons existants. ====================================================================================================== */ /* Le champ de recherche de la barre : gris de la FAMILLE (--ds-bg-inset, 180°) au lieu du bleu legacy. Spécificité (0,4,1) > (0,3,0) d'app.css, et cette feuille est chargée APRÈS : la jumelle gagne. */ html.ideale-monde-saas .ideale-recherche-globale .mud-input.mud-input-outlined { background-color: var(--ds-bg-inset) !important; } /* En SOMBRE, --ds-bg-inset est très proche de la barre : sans filet, le champ n'aurait plus de contour du tout. On le lui rend au repos — le seul endroit du chantier où blanchir RETIRAIT de la lisibilité. */ html.ideale-monde-saas[data-theme="dark"] .ideale-recherche-globale .mud-input.mud-input-outlined { box-shadow: inset 0 0 0 1px var(--ds-border); } /* Décision ③ (9a) enfin appliquée au JUMEAU : le menu latéral en gris très doux, pour que le canevas blanc respire. Le locataire l'a depuis 9a (app-locataire.css) ; le scope y avait été volontairement restreint. ⚠️ Cette règle ÉCRASE par la CASCADE le `background` de la règle de base plus haut (même spécificité, déclarée après) : NE PAS « nettoyer » cette dernière en croyant supprimer un doublon — elle porte position/display/height/color/font, que cette surcharge ne redéclare pas. */ html.ideale-monde-saas .ideal-shell { background: var(--ds-bg-canvas); } html.ideale-monde-saas[data-theme="dark"] .ideal-shell { background: var(--ds-bg-surface-2); }