/* ── Netaix shared design tokens & base styles ────────────────────── Loaded BEFORE page-specific CSS (app.css, admin inline, etc.). Contains only styles shared across 2+ pages. ────────────────────────────────────────────────────────────────── */ [x-cloak] { display: none !important; } /* ── Design tokens (dark mode default) ───────────────────────────── */ :root { /* THEME-V4 (2026-08-26) — neutres PURS, couleur RARE. * * Ce que la v3 avait gagne et qu'on garde : TOUT jeton defini ici est * redefini dans body.light-mode (huit ne l'etaient pas, dont --text-0, * blanc sur blanc en clair, et --danger a 2,77 : c'etait en production). * * Ce qui change. La v3 posait des gris FROIDS (#12141A, #868D95, #383E48 : * la composante bleue y depasse la rouge) SOUS un accent bleu (#5A9CFC) et * un appel bleu different (#0073D4). Le bleu etait donc a la fois le fond, * les gris, l'accent et l'appel — d'ou « du bleu partout, l'app n'a pas * d'ame ». La correction n'est pas de bannir une teinte, c'est de la sortir * du SOL : ici les neutres sont PURS (R=G=B, chroma nulle), ils ne peuvent * plus rien teinter, et la couleur ne sert QU'A la selection et aux etats. * * SOURCE DE VERITE : frontend/css/shell-2026.css, charge en dernier, qui * recouvre --accent/--cta/--surface* sous body.ux-shell. Ce bloc RECOPIE ses * valeurs pour les ecrans HORS coquille — sans quoi ils gardent l'ancienne * charte, ce qui etait exactement le cas avant ce passage. Toute retouche * de l'accent la-bas doit etre repercutee ici : il n'existe pas de moyen * d'heriter, shell-2026.css ne declare que sous body.ux-shell. * * --text-3 reste sous 4,5 volontairement : mentions non essentielles. */ /* RAMPE FROIDE (2026-08-30) — alignee sur la charte v4 de shell-2026.css. Elle etait en gris PURS (R=G=B : #151515, #2B2B2B, #383838…). Un gris pur se lit CHAUD a cote d'un accent bleu — c'est le « cote legerement ambre » deja signale et corrige dans l'application, mais shared.css etait reste en arriere. Consequence : les dix pages publiques et les consoles admin/SA, qui n'ont PAS shell-2026.css, servaient un noir different de celui de l'application (retour Manu : « les pages partagees n'ont pas le code couleur du fond du theme dark »). Le decalage bleu-rouge suit la meme progression que la coque : de 4 sur les fonds a 13 sur les gris de texte. --ground et --frame N'EXISTAIENT PAS ici : une page publique n'avait aucun moyen de reprendre le fond de fenetre de l'application. */ --ground: #07090C; /* fond de fenetre, sous les cartes */ --frame: #121519; /* carte de contenu, identique a --bg ici */ --bg: #121519; --surface: #1A1E24; --composer-bg: #181B20; /* le champ de saisie : plus proche du fond que --surface, c'est le FILET qui le dessine */ --surface-2: #232830; --surface-hover: #2A313A; --elevated: #272D36; /* modales et menus flottants — ADR-0006 D3 */ --border: #333A44; /* Le filet des cartes. A #2B3037 il valait 1,22 contre --surface : invisible, donc les cartes n'avaient pas d'arete et flottaient dans le fond. A 1,50 il se voit sans devenir un trait. C'est la recette des interfaces sombres reussies — carte a peine plus claire, MAIS decoupee par un filet. */ --border-strong: #454E5A; /* filet de modale — suit --border */ /* filet de modale */ --text-0: #FFFFFF; --text-1: #FFFFFF; /* Quasi blanc, neutre pur. Ce qui fait qu'un ecran sombre parait net, c'est l'ECART avec --text-2 (x3,3 ici), pas le blanc absolu — lequel scintille sur un fond profond. */ --text-2: #A2ABB6; --text-3: #828D99; /* etait var(--text-3) : 3,74 sur --bg, sous 4,5 PARTOUT */ --accent: #2E7BF6; /* Bleu FONCTIONNEL, recopie de shell-2026.css. Ce n'est pas le retour du bleu d'avant : celui-la etait partout — dans le fond (#12141A), dans les gris (#868D95), dans l'accent ET dans l'appel. Ici la page est un neutre PUR de chroma nulle et le bleu ne peint plus que la selection et les etats. C'est la rarete qui lui rend sa fonction. */ --accent-rgb: 46,123,246; --accent-hover: #5596FF; /* un cran plus clair, meme teinte (10,22 sur --bg) */ /* Encre posee SUR --accent. Il est PALE en sombre et FONCE en clair : une valeur en dur ne peut pas etre juste des deux cotes. Un blanc ecrit en dur donne 2,24 ici et 1,79 sur le survol — c'est le defaut trouve 122 fois. */ --accent-fg: #FFFFFF; /* 4,3 sur --accent en sombre */ --accent-vivid: #4D9BFF; /* niveau eleve UNIQUEMENT — ADR-0006 D1. Reste au-dessus de --accent en saturation, sinon le « vif » se lit plus terne que l'accent courant. */ --accent-dim: rgba(46,123,246,0.14); /* suit --accent-rgb, sinon la teinte des pastilles reste sur l'ancien gris */ --accent-border: rgba(46,123,246,0.30); /* Le signe reste NEUTRE, il ne prend pas la couleur des boutons (retour Manu, 2026-08-25 : « il devrait etre en anthracite fonce »). J'avais applique la coherence avec le CTA aux deux themes, ce qu'il ne demandait pas. Valeurs de R1 : le signe se distingue par sa VALEUR, pas par sa teinte, et laisse la couleur aux elements interactifs. */ --mark: #E4E4E4; --mark-fg: #191919; /* pose SUR --mark : 8,52 en sombre */ --mark-hover: #FFFFFF; /* survol : un cran PLUS CLAIR du signe */ --danger: #ED3D48; /* un vrai rouge. #C08078 avait la BONNE teinte (31 deg) mais C* 27,8 : trop delave, il se lisait terre cuite. */ --danger-dim: rgba(237,61,72,0.16); --warning: #DAA71E; --warning-dim: rgba(218,167,30,0.16); --success: #0EBE6E; /* L* 61 -> 68 : le vert des credits paraissait sombre. C* 65, contraste 7,81 sur --bg (etait 6,23). */ /* C* 17 -> 48 : a 17 le bandeau d'etat etait invisible, 1,14 de rapport de luminance avec la page. */ --success-dim: rgba(14,190,110,0.16); /* --info : declaree par shell-2026.css (bleu « suivi en direct »), elle n'existait pas ici — donc var(--info) ne resolvait a RIEN hors coquille. */ --info: #2E9BFF; --info-ink: #5CB2FF; --info-dim: rgba(46,155,255,0.16); /* ---- Couleur d'appel ---------------------------------------------- * --cta porte les appels a l'action et l'information importante, RIEN * d'autre. THEME-V4 : il ne diverge plus de --accent. Deux familles de * couleur (accent bleu clair + appel navy) donnaient deux bleus proches * mais jamais egaux, et personne ne savait lequel employer. Une seule * teinte, deux roles : --accent teinte, --cta engage. */ --cta: #2E7BF6; /* = --accent : une seule teinte, deux roles. */ --cta-edge: #5596FF; /* filet facultatif */ --cta-rgb: 46,123,246; /* Le survol s'ECLAIRCIT en sombre et s'ASSOMBRIT en clair : dans les deux cas l'ecart avec le libelle augmente au lieu de se refermer. */ --cta-hover: #5596FF; --cta-fg: #FFFFFF; /* le libelle pose SUR --cta */ --cta-dim: rgba(46,123,246,0.16); /* --cta est un APLAT. --cta-ink est la meme teinte, un cran plus claire, pour les etats actifs ECRITS en couleur (lien, icone active, onglet). Il doit RENFORCER au survol, jamais affaiblir. */ --cta-ink: #6FA8FF; /* ---- Echelle semantique (ADR-0006 D7, D10) ------------------------ * Huit teintes, une par ROLE declare, jamais choisies par circonstance. * Sans liste fermee, chaque couleur a une bonne raison locale et * l'ensemble n'en a aucune : c'est ainsi que 184 valeurs distinctes se * sont accumulees sur 18 pages. * Elles ne s'emploient QUE dans de petits objets satures — pastille, * tuile d'icone, point d'etat, filet de selection. Jamais en aplat de * surface, jamais en couleur de texte courant, jamais sur une courbe * (les donnees se tracent en --text-1). * Ecart minimum entre deux teintes : 19 degres. * THEME-V4 : les deux BLEUS de l'echelle sont sortis. --data-2 passe au * violet, --data-7 (« bleu poudre » #58A3FF) devient un GRAPHITE neutre — * il etait a deux doigts de l'ancien accent, donc chaque graphique * repeignait l'ancienne charte bleue sans qu'on le voie. */ --data-1: #F06115; /* support terre cuite */ --data-2: #8B5CD6; /* acquisition violet */ --data-3: #00AA8D; /* sauvegardes sarcelle */ --data-4: #EE9F1B; /* a traiter ambre */ --data-5: #EF5E56; /* incidents rouge brique */ --data-6: #D862BF; /* conseil prune */ --data-7: #B0B0B0; /* trafic graphite */ --data-8: #799E20; /* Teintes de pastille : 14 %% de la couleur, la valeur ou le libelle tient encore 4,5 sur son propre fond. */ --data-1-dim: rgba(240,97,21,0.14); --data-2-dim: rgba(139,92,214,0.14); --data-3-dim: rgba(0,170,141,0.14); --data-4-dim: rgba(238,159,27,0.14); --data-5-dim: rgba(239,94,86,0.14); --data-6-dim: rgba(216,98,191,0.14); --data-7-dim: rgba(176,176,176,0.14); --data-8-dim: rgba(121,158,32,0.14); /* facturation olive */ } /* DASHBOARD-UX-V2 — sections repliables du tableau de bord projet */ .dash-sec-head{width:100%;min-height:36px;display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;font-family:inherit;padding:8px 0;text-align:left} .dash-sec-head:hover .dash-sec-label{color:var(--text-2)} .dash-sec-head:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent-dim);border-radius:6px} .dash-sec-label{font-size:0.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:600} .dash-sec-count{font-size:0.62rem;color:var(--text-3);font-variant-numeric:tabular-nums} .dash-sec-chevron{flex:none;color:var(--text-3);transition:transform .15s ease} .dash-sec-chevron.open{transform:rotate(90deg)} :root{ /* suite des tokens :root (deux blocs :root fusionnent, CSS valide) */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 14px; /* 12 -> 14 (2026-08-26) : rayons genereux des refs premium */ /* Chat tab tokens (Obsidian-inspired) — barre légèrement plus sombre, tab actif fusionne avec le contenu (= var(--bg)) via overlap. */ --chat-tab-bar-bg: #141414; --chat-tab-bar-border: #262626; --chat-tab-bg: transparent; --chat-tab-bg-hover: rgba(255,255,255,0.05); --chat-tab-bg-active: var(--bg); --chat-tab-text: #8A8A8A; --chat-tab-text-hover: #B4B4B4; --chat-tab-text-active:#E4E4E4; --chat-tab-accent: var(--accent); --chat-tab-radius: 8px; /* Unified edge tab system (Sprint TOPBAR-V1 W1, 2026-06-17) — boutons mini permanents en bord viewport pour rappeler une surface réduite (Aide, Doc Editor, Learn rail, Prompts assistés, Workstation pin). Ancrage haut commun (pas top:50% — instable selon hauteur topbar). Stacking déterministe via $store.edgeTabs.stackTopFor(side, id). */ --edge-tab-top: calc(var(--topbar-total, 92px) + 96px); --edge-tab-gap: 12px; --edge-tab-width: 44px; --edge-tab-height: 64px; --edge-tab-z: 60; /* ════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 · F1 — Fondation tokens (AJOUT non-cassant). Ces tokens ne remplacent AUCUNE valeur existante: rien ne les consomme encore (adoption progressive en F2+). Objectif : une source unique pour couleur de marque, typo, espacement, élévation, z-index, mouvement. Réf : design-system/DESIGN_SYSTEM_V1.md §3. ──────────────────────────────────────────────────────────────────── */ /* Marque — SEULES définitions autorisées de la couleur de marque. Remplacer progressivement les 419 var(--accent) / 50 var(--accent) en dur par ces tokens. */ /* PIEGE (mesure le 2026-09-15) — ces deux alias sont declares sur :root, donc sur , et une propriete personnalisee se resout la ou elle est DECLAREE. body.light-mode redefinit --accent a partir de : trop tard. Les deux alias valent donc l'accent SOMBRE (#2E7BF6) dans les DEUX themes. C'est ce qui rendait le libelle de phase et le bouton stop bleu vif en clair. Ne les utiliser que pour une teinte volontairement invariante (c'est le cas de workflow-inspector.css, qui le documente). Pour la teinte du theme : var(--accent) ou var(--cta). */ --brand-cyan: var(--accent); --brand-navy: var(--accent); /* Échelle typographique modulaire (remplace les ~39 tailles ad-hoc) */ --fz-2xs: 0.6875rem; /* 11 */ --fz-xs: 0.75rem; /* 12 */ --fz-sm: 0.8125rem; /* 13 */ --fz-md: 0.875rem; /* 14 */ --fz-base: 0.9375rem; /* 15 */ --fz-lg: 1.0625rem; /* 17 */ --fz-xl: 1.3125rem; /* 21 */ --fz-2xl: 1.75rem; /* 28 */ --fz-3xl: 2.125rem; /* 34 */ /* Familles de police (UI = pile système, fallback identique au rendu actuel ; --font-display / --font-mono = cibles premium adoptées en phases visuelles). */ --font-ui: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; /* Espacement (base 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; /* Rayons (étend les --radius-sm/md/lg existants, conservés tels quels) */ --r-xl: 18px; --r-pill: 999px; /* Élévation (remplace à terme les ~21 box-shadow ad-hoc) */ --elev-1: 0 1px 2px rgba(0,0,0,.18), 0 12px 28px -20px rgba(0,0,0,.6); --elev-2: 0 18px 50px -24px rgba(0,0,0,.7); --elev-3: 0 50px 120px -50px rgba(0,0,0,.85); /* ── Échelle de niveaux CANONIQUE (DESIGN_SYSTEM.md §Layering) ── RÈGLE : tout z-index passe par un token. Jamais de 9999/10000/99999. Ladder bas→haut : contenu au fond, menus & toasts toujours au premier plan. */ --z-content: 0; /* fond / contenu scrollable — toujours au fond */ --z-base: 1; /* éléments de base au-dessus du fond */ --z-rail: 30; /* rail gauche persistant */ --z-sticky: 40; /* barres collantes (topbar, tab-bar) */ --z-panel: 45; /* panneaux détachés (projet, historique) à côté du rail */ --z-popover: 200; /* (legacy) petits popovers ancrés */ --z-overlay: 300; /* takeovers plein écran (Atelier, Mails Pro, Historique) */ --z-slideover: 300; /* (alias legacy = --z-overlay) */ --z-modal: 500; /* modales centrées + backdrop */ --z-menu: 700; /* menus & dropdowns TÉLÉPORTÉS au body — au-dessus de tout (sauf toasts) */ --z-toast: 900; /* toasts / notifications transitoires */ --z-tour: 950; /* onboarding / coach-marks */ /* Mouvement */ --ease: cubic-bezier(.2,.8,.2,1); --dur-fast: 140ms; --dur: 200ms; --dur-slow: 280ms; /* Breakpoints CANONIQUES (convention — les media queries restent en dur, CSS ne permet pas de var() dans @media) : mobile : max-width 767.98px (= isMobile JS, à unifier en F6/F7) desktop : min-width 1024px tablette: 768–1023.98px → suit les règles mobile par défaut Tout NOUVEAU code n'utilise QUE 768 / 1024. Ne plus introduire 640/720/767/600… */ } /* ── Light mode variable overrides ───────────────────────────────── */ body.light-mode { /* THEME-V3 — chaque jeton de :root est redefini ici, sans exception. --ground et --frame manquaient : ajoutes plus tard a :root, ils n'avaient jamais ete repris ici. Consequence mesuree le 2026-09-01 sur la console : `body { background: var(--ground, var(--bg)) }` servait donc #07090C — un quasi-noir — SOUS un texte passe en #121212. Fond sombre, texte sombre, ecran illisible, alors que tous les autres jetons avaient bien bascule. C'est le piege connu du jeton sombre pose sur :root sans equivalent clair : il ne bascule pas, et le defaut ne se voit qu'en thema clair. Valeurs reprises telles quelles du theme clair de l'application (css/shell-2026.css), pour que les deux coques servent le meme fond. */ --ground: #E6EBF0; --frame: #FFFFFF; --bg: #EFEFEF; --surface: #FFFFFF; --composer-bg: #FFFFFF; /* en clair, il reste une surface pleine */ --surface-2: #F5F5F5; --surface-hover: #EAEAEA; --elevated: #FFFFFF; --border: #DADADA; --border-strong: #BEBEBE; --text-0: #000000; --text-1: #121212; --text-2: #5C5C5C; --text-3: #6B6B6B; /* 3,15 -> 4,54 sur la surface la PLUS defavorable (#EAECEF, la barre laterale). Reste sous --text-2 (4,99 au meme endroit) : la hierarchie tient, la lisibilite revient. */ /* Couleur d'appel, theme clair (ADR-0006 D10). * Le libelle bascule en BLANC ici, alors qu'il est anthracite en sombre : * #318CE7 sur blanc ne donne que 3,10, il faut assombrir a #006DC4, et sur * cette valeur c'est le blanc qui passe (5,27) et non l'anthracite. */ --cta: #1560D8; --cta-edge: #1560D8; --cta-rgb: 21,96,216; --cta-hover: #0E4EB4; --cta-fg: #FFFFFF; --cta-dim: rgba(21,96,216,0.12); --cta-ink: #0E4EB4; /* en clair l'aplat passe deja en texte : 6,0 */ /* Echelle semantique, theme clair : meme teinte, assombrie jusqu'a 4,5 * sur --bg. Ne jamais reutiliser les valeurs sombres ici, elles tombent * entre 1,9 et 3,1 sur fond clair. */ --data-1: #9D4315; --data-2: #5B3AA0; --data-3: #106A5E; --data-4: #865303; --data-5: #A33B36; --data-6: #864978; --data-7: #5F5F5F; --data-8: #50661D; /* Teintes de pastille : 14 %% de la couleur, la valeur ou le libelle tient encore 4,5 sur son propre fond. */ --data-1-dim: rgba(157,67,21,0.14); --data-2-dim: rgba(91,58,160,0.14); --data-3-dim: rgba(16,106,94,0.14); --data-4-dim: rgba(134,83,3,0.14); --data-5-dim: rgba(163,59,54,0.14); --data-6-dim: rgba(134,73,120,0.14); --data-7-dim: rgba(95,95,95,0.14); --data-8-dim: rgba(80,102,29,0.14); --accent: #1560D8; --accent-rgb: 21,96,216; --accent-hover: #0E4EB4; --accent-fg: #FFFFFF; /* 6,58 sur --accent en clair */ --accent-vivid: #0B49A8; --accent-dim: rgba(21,96,216,0.10); --accent-border: rgba(21,96,216,0.26); --mark: #1C1C1C; /* --mark plus fonce que l'accent : le signe est une masse, le libelle un trait — ADR-0006 R1. */ --mark-fg: #FFFFFF; /* pose SUR --mark : 11,20 en clair */ --mark-hover: #000000; /* survol : un cran plus PROFOND du signe */ /* SEND-BTN (2026-09-14) — jetons du bouton d'envoi, definis EN CLAIR SEULEMENT : en sombre il reste le signe (--mark), et cet etat-la ne doit pas bouger. MAJ 2026-09-15 (retour Manu) : l'aplat verni navy->cyan essaye entre-temps « faisait cheap ». Le dessin reste donc celui d'origine — un APLAT PLEIN ET MAT, sans degrade ni relief. MAJ 2026-09-16 (retour Manu) : l'anthracite #333A44 devient le BLEU DE LA CHARTE, celui de la pastille AUTO. Ce n'est pas une couleur de plus : c'est --cta, l'aplat des appels a l'action, et « envoyer » EST l'action principale du composer. En l'ecrivant `var(--cta)` plutot qu'en recopiant le nombre, le bouton suit la palette courante sans qu'on ait deux valeurs a tenir : navy #1F4E79 sous la coque, #1560D8 dans la palette historique. Blanc sur navy : 8,6:1 ; sur #1560D8 : 6,5:1. Mat, sans halo colore — c'est le halo, pas le bleu, que le retour du 2026-08-30 reprochait au bouton « + ». */ --send: var(--cta); --send-hover: var(--cta-hover); --send-fg: #FFFFFF; --danger: #C0261F; --danger-dim: rgba(154,68,56,0.10); --warning: #8A5D08; --warning-dim: rgba(122,93,27,0.10); --success: #1C6B3F; --success-dim: rgba(63,107,78,0.12); --info: #0B5FA8; --info-ink: #0B5FA8; --info-dim: rgba(11,95,168,0.12); --chat-tab-bar-bg: #E8E8E8; --chat-tab-bar-border: #DADADA; --chat-tab-bg-hover: rgba(0,0,0,0.04); --chat-tab-bg-active: var(--bg); --chat-tab-text: #5C5C5C; --chat-tab-text-hover: #3A3A3A; --chat-tab-text-active:#121212; /* elevations sur fond clair — ombre neutre froide, alignee sur la charte */ --elev-1: 0 1px 2px rgba(0,0,0,.05), 0 12px 28px -20px rgba(0,0,0,.28); --elev-2: 0 18px 44px -24px rgba(0,0,0,.30); --elev-3: 0 40px 90px -45px rgba(0,0,0,.36); } /* ── Base body ───────────────────────────────────────────────────── */ body { background-color: var(--bg); color: var(--text-1); transition: background-color 0.2s, color 0.2s; scrollbar-color: var(--border) transparent; } /* ════════════════════════════════════════════════════════════════════════ PM28.8 (2026-05-28) — Toggle pill notifications CSS pur (pas de Tailwind arbitrary values) pour que le toggle s'affiche identiquement dans app.html / admin.html / super-admin.html, y compris quand le partial settings-panel.html est lazy-loaded (Tailwind CDN JIT ne génère pas les classes invisibles au boot). ════════════════════════════════════════════════════════════════════════ */ .notif-toggle { position: relative; display: inline-flex; width: 2.75rem; height: 1.5rem; align-items: center; border-radius: 9999px; transition: background-color 0.15s ease; flex-shrink: 0; cursor: pointer; border: none; padding: 0; } .notif-toggle-off { background-color: var(--surface-2); } .notif-toggle-on { background-color: var(--accent); } body.light-mode .notif-toggle-off { background-color: var(--border-strong); } body.light-mode .notif-toggle-on { background-color: var(--accent); } .notif-toggle-thumb { display: inline-block; width: 1rem; height: 1rem; border-radius: 9999px; background-color: #ffffff; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .notif-toggle-thumb-off { transform: translateX(0.25rem); } .notif-toggle-thumb-on { transform: translateX(1.5rem); } /* ════════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 · F2 — Librairie de composants namespacée .ds-* ZÉRO collision avec le legacy (.btn-primary/.badge/.card/.input-field… utilisés 250-380× dans app). Le nouveau shell (F3) et les panneaux consomment .ds-* ; le legacy migre ensuite, surface par surface, derrière flag (R2 additif-d'abord). Tokens : F1 (shared.css §F1). Accent restreint (direction « industry-grade sobre »). ════════════════════════════════════════════════════════════════════════ */ /* ── Boutons ──────────────────────────────────────────────────────────── */ .ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); font-family:var(--font-ui);font-size:var(--fz-sm);font-weight:600;line-height:1; padding:9px 14px;border-radius:var(--radius-md);border:1px solid var(--border); background:var(--surface-2);color:var(--text-1);cursor:pointer; transition:background var(--dur-fast),border-color var(--dur-fast),filter var(--dur-fast)} .ds-btn:hover{border-color:var(--text-3);background:var(--surface-hover)} .ds-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-dim)} .ds-btn:disabled{opacity:.45;cursor:default} .ds-btn--primary{background:var(--cta);border-color:transparent;color:var(--cta-fg)} .ds-btn--primary:hover{filter:brightness(1.08);background:var(--accent)} .ds-btn--ghost{background:transparent;border-color:transparent;color:var(--text-2)} .ds-btn--ghost:hover{background:var(--surface-2);color:var(--text-1)} .ds-btn--danger{background:var(--danger-dim);border-color:color-mix(in srgb, var(--danger) 35%, transparent);color:var(--danger-ink)} .ds-btn--danger:hover{background:color-mix(in srgb, var(--danger) 18%, transparent)} .ds-btn--sm{padding:6px 10px;font-size:var(--fz-xs)} .ds-btn--icon{padding:0;width:34px;height:34px} /* ── Badges (jeu sémantique UNIQUE — remplace les 3 systèmes) ─────────── */ .ds-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fz-2xs); font-weight:700;letter-spacing:.04em;text-transform:uppercase; padding:2px 8px;border-radius:var(--radius-sm); background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)} .ds-badge--ok{background:color-mix(in srgb, var(--success) 12%, transparent);color:var(--success-ink);border-color:color-mix(in srgb, var(--success) 30%, transparent)} .ds-badge--warn{background:var(--warning-dim);color:var(--warning-ink);border-color:color-mix(in srgb, var(--warning) 30%, transparent)} .ds-badge--danger{background:var(--danger-dim);color:var(--danger-ink);border-color:color-mix(in srgb, var(--danger) 30%, transparent)} .ds-badge--info{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-border)} .ds-badge--neutral{background:var(--surface-2);color:var(--text-3)} /* ── Inputs ───────────────────────────────────────────────────────────── */ .ds-input{width:100%;font-family:var(--font-ui);font-size:var(--fz-md);color:var(--text-1); background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md); padding:9px 12px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)} .ds-input::placeholder{color:var(--text-3)} .ds-input:focus{outline:none;border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-dim)} /* ── Toggle (réutilise le pattern .notif-toggle, alias .ds-) ──────────── */ .ds-toggle{position:relative;display:inline-flex;width:2.75rem;height:1.5rem;align-items:center; border-radius:var(--r-pill);border:none;padding:0;cursor:pointer;flex-shrink:0; background:var(--surface-2);transition:background var(--dur-fast)} .ds-toggle.is-on{background:var(--accent)} .ds-toggle__thumb{width:1rem;height:1rem;border-radius:var(--r-pill);background:#fff; margin-left:.25rem;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:transform var(--dur-fast)} .ds-toggle.is-on .ds-toggle__thumb{transform:translateX(1.25rem)} body.light-mode .ds-toggle{background:var(--border-strong)} /* DLP-ACCESSIBLE-V1 lot C — la ligne ci-dessus (0,2,1) BAT `.ds-toggle.is-on` (0,2,0) : en theme clair la bascule restait grise une fois allumee. Defaut jamais vu parce que `.ds-toggle` ne servait nulle part. Meme motif que l'interrupteur DLP du 2026-09-15, l'autre cote de la cascade. */ body.light-mode .ds-toggle.is-on{background:var(--accent)} /* ── Tabs ─────────────────────────────────────────────────────────────── */ .ds-tabs{display:inline-flex;gap:4px;background:var(--surface-2);border:1px solid var(--border); border-radius:var(--r-md,11px);padding:3px} .ds-tab{font-size:var(--fz-sm);font-weight:600;color:var(--text-2);background:none;border:none; padding:7px 13px;border-radius:8px;cursor:pointer;transition:.15s} .ds-tab:hover{color:var(--text-1)} .ds-tab.is-on{background:var(--accent-dim);color:var(--cta-ink);box-shadow:inset 0 0 0 1px var(--accent-border)} /* ── Chips ────────────────────────────────────────────────────────────── */ .ds-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fz-xs);font-weight:600; color:var(--text-2);background:var(--surface-2);border:1px solid var(--border); padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;transition:.15s} .ds-chip:hover{color:var(--text-1);border-color:var(--text-3)} .ds-chip.is-on{color:var(--cta-ink);background:var(--accent-dim);border-color:var(--accent-border)} /* ── Toast ────────────────────────────────────────────────────────────── */ .ds-toast{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fz-sm); background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:12px 14px;box-shadow:var(--elev-2);color:var(--text-1)} .ds-toast--ok{border-color:color-mix(in srgb, var(--success) 30%, transparent)} .ds-toast--danger{border-color:color-mix(in srgb, var(--danger) 30%, transparent)} /* ── Modale (backdrop blur PARTOUT — corrige admin/SA) ────────────────── */ .ds-modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center; background:var(--overlay, rgba(0,0,0,.55));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:var(--sp-4);animation:dsFade var(--dur) var(--ease)} .ds-modal{width:min(480px,100%);max-height:92vh;overflow:auto;background:var(--surface); border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--elev-3); animation:dsRise var(--dur) var(--ease)} @keyframes dsFade{from{opacity:0}to{opacity:1}} @keyframes dsRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ── Modale : variantes de taille + sections (audit modales 2026-08-26). Une seule anatomie pour ~45 modales : hd/body/ft partagent les paddings --sp-*, la croix est un carre 36px, le footer aligne ses .ds-btn a droite. Additif pur : aucune modale existante ne casse. ── */ .ds-modal--sm{width:min(400px,100%)} .ds-modal--lg{width:min(640px,100%)} .ds-modal--xl{width:min(860px,100%)} .ds-modal__hd{display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)} body.ux-shell .ds-modal__hd h2,body.ux-shell .ds-modal__title,.ds-modal__hd h2,.ds-modal__title{font-family:var(--font-ui);font-size:var(--fz-lg,16px);font-weight:600;letter-spacing:0;color:var(--text-1);margin:0} .ds-modal__body{padding:var(--sp-5);color:var(--text-1)} .ds-modal__ft{display:flex;justify-content:flex-end;gap:var(--sp-2); padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border)} .ds-modal__x{margin-left:auto;width:36px;height:36px;display:grid;place-items:center; border:none;background:transparent;border-radius:var(--radius-md);color:var(--text-2);cursor:pointer} .ds-modal__x:hover{background:var(--surface-hover);color:var(--text-1)} .ds-modal__badge{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:var(--radius-md)} .ds-modal__badge--danger{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger-ink,var(--danger))} .ds-modal__badge--warning{background:color-mix(in srgb, var(--warning) 12%, transparent);color:var(--warning-ink,var(--warning))} .ds-modal__badge--success{background:color-mix(in srgb, var(--success) 12%, transparent);color:var(--success-ink,var(--success))} @media (max-width: 640px){ .ds-modal--sheet{align-self:end;width:100%;max-height:88vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none} .ds-modal-backdrop:has(.ds-modal--sheet){padding:0;place-items:end center} } /* ── Slide-over (panneau secondaire) ──────────────────────────────────── */ .ds-slideover{position:absolute;top:0;right:0;bottom:0;width:min(320px,100%);z-index:var(--z-slideover); background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--elev-3); transform:translateX(100%);transition:transform var(--dur-slow) var(--ease); display:flex;flex-direction:column} .ds-slideover.is-open{transform:none} /* ── Empty state ──────────────────────────────────────────────────────── */ .ds-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2); padding:var(--sp-8) var(--sp-4);color:var(--text-3)} .ds-empty__title{font-size:var(--fz-md);font-weight:600;color:var(--text-1)} /* ── Barre de commande (« Demandez à Naix… ») ─────────────────────────── */ .ds-cmd{display:flex;align-items:center;gap:var(--sp-3);background:var(--surface); border:1px solid var(--border);border-radius:16px;padding:7px 7px 7px 14px;box-shadow:var(--elev-2)} .ds-cmd:focus-within{border-color:var(--accent-border)} .ds-cmd input{flex:1;background:none;border:none;color:var(--text-1);font:inherit;font-size:var(--fz-md);padding:7px 0} .ds-cmd input:focus{outline:none} .ds-cmd input::placeholder{color:var(--text-3)} .ds-cmd__send{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex-shrink:0; background:var(--cta);color:var(--cta-fg);border:none;cursor:pointer} .ds-cmd__send:disabled{opacity:.4;cursor:default} /* ── Menu overflow / popover ──────────────────────────────────────────── */ .ds-menu{min-width:220px;background:var(--surface);border:1px solid var(--border); border-radius:12px;box-shadow:var(--elev-3);padding:6px;z-index:var(--z-menu)} .ds-menu button{width:100%;text-align:left;display:flex;align-items:center;gap:10px; font-size:var(--fz-sm);font-weight:500;color:var(--text-1);background:none;border:none; padding:9px 10px;border-radius:8px;cursor:pointer} .ds-menu button:hover{background:var(--surface-2)} .ds-menu__sep{height:1px;background:var(--border);margin:5px 6px} /* REFONTE-UX-V1 F5 — segment Qualité (Eco/Auto/Max). incr.4 : popover « + ». incr.5 : fusionné dans le picker modèle (chip Auto). Sélecteur généralisé (popover ET model-picker-dropdown). */ .ux-qbtn{flex:1;width:auto;justify-content:center;text-align:center;gap:4px; display:inline-flex;align-items:center; padding:6px 8px;font-size:11px;font-weight:600;border:1px solid var(--border); border-radius:8px;color:var(--text-2);background:var(--surface-2);cursor:pointer} .ux-qbtn:hover{background:var(--surface);color:var(--text-1)} .ux-qbtn-on{border-color:var(--brand-cyan);color:var(--brand-cyan); background:color-mix(in srgb, var(--brand-cyan) 12%, transparent)} .ux-q-chevron.is-exp{transform:rotate(180deg)} /* Picker : bandeau « Modèle automatique » allégé (description sur 1 ligne) + groupes fournisseurs repliables (chevron pivote vers la droite si replié). */ body.ux-shell .ux-auto-desc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Carte « Modèle automatique » en tête de liste (multi-lignes : titre + desc + 3 boutons Qualité) → alignement haut + curseur (c'est un div clickable, pas un button). */ .ux-auto-card{align-items:flex-start !important;cursor:pointer} /* REFONTE-UX (2026-06-26) — sélecteur de modèle LISIBLE sur mobile : l'app cache .pill-label + .pill-chevron sur mobile → il ne restait qu'une boîte opaque sans indiquer le modèle actif. On ré-affiche le nom (tronqué) + le chevron en coquille. */ @media (max-width: 767.98px) { body.ux-shell .chat-toolbar.chat-toolbar-bar [data-tour="model-pill"] > button .pill-label { display: inline !important; max-width: 88px; font-size: 0.62rem !important; } body.ux-shell .chat-toolbar.chat-toolbar-bar [data-tour="model-pill"] > button .pill-chevron { display: inline-block !important; } body.ux-shell .chat-toolbar.chat-toolbar-bar [data-tour="model-pill"] > button { height: 30px; gap: 4px; padding-left: 7px; padding-right: 7px; } } .ux-grp-chevron{transition:transform .15s ease} .ux-grp-chevron.is-col{transform:rotate(-90deg)} /* TABLETTE PORTRAIT (768-1023, retour Manu) — on privilégie l'icône Incognito à « Vue divisée » : compare masqué ici (l'incognito est ré-affiché via isTablet côté HTML). Paysage (≥1024) inchangé : les deux restent. */ @media (min-width: 768px) and (max-width: 1023.98px) { .compare-split-btn { display: none !important; } } /* REFONTE-UX — chips Capacité compactes (pills taille-contenu, pas étirées comme .ux-qbtn flex:1 qui les rendait « trop grosses »). Mieux intégrées, accent du workspace à l'état actif. */ .ux-capchip{display:inline-flex;align-items:center;justify-content:center;height:27px;padding:0 12px; font-size:0.7rem;font-weight:600;line-height:1;border:1px solid var(--border);border-radius:999px; color:var(--text-2);background:var(--surface-2);cursor:pointer;white-space:nowrap; transition:color .14s ease,border-color .14s ease,background .14s ease} .ux-capchip:hover{color:var(--text-1);border-color:var(--accent-border)} .ux-capchip-on{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)} /* REFONTE-UX — « Améliorer » : bouton premium conditionnel dans le composer (ux-shell). */ /* Scopé sous .chat-toolbar pour battre `.chat-toolbar-bar button{color:var(--text-2)}` (spéc. 0,1,1) de app.css — sinon le texte reste gris. (0,2,0) > (0,1,1). */ .chat-toolbar .ux-enhance-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;margin:0 8px 0 4px; border-radius:999px;font-size:0.72rem;font-weight:600;letter-spacing:.01em;line-height:1;cursor:pointer; font-family:inherit;white-space:nowrap;position:relative; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 11%, transparent)); box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent), 0 1px 2px rgba(0,0,0,.16); transition:background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .12s ease} .chat-toolbar .ux-enhance-btn svg{width:13px;height:13px;flex-shrink:0;color:var(--accent)} .chat-toolbar .ux-enhance-btn:hover:not(:disabled){ border-color:color-mix(in srgb, var(--cta-ink) 62%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 4px 16px -5px rgba(var(--accent-rgb),.55)} .chat-toolbar .ux-enhance-btn:active:not(:disabled){transform:scale(.97)} .chat-toolbar .ux-enhance-btn:disabled{opacity:.5;cursor:default} /* CAUSE RACINE du texte coupé : `.chat-toolbar.chat-toolbar-bar > button{width:30px!important}` (app.css, icônes carrées) écrase la largeur → la pill collapse à 30px et « Améliorer » déborde sous l'icône voisine. Exemption ciblée (spéc. 0,3,1 + !important > 0,2,1). Idem svg forcé 16px. */ .chat-toolbar.chat-toolbar-bar > button.ux-enhance-btn{ width:auto!important;height:28px!important;border-radius:999px!important; padding:0 12px!important;justify-content:center!important;flex-shrink:0!important} .chat-toolbar.chat-toolbar-bar > button.ux-enhance-btn svg{width:13px!important;height:13px!important} /* Masquage réel : `.chat-toolbar.chat-toolbar-bar > button{display:flex!important}` (app.css) écrase le `display:none` inline d'x-show → le bouton restait visible en désactivé. La classe ux-enh-off (toggle Alpine quand <40 car. & pas en cours) masque avec spéc. supérieure (0,4,1 > 0,2,1). */ .chat-toolbar.chat-toolbar-bar > button.ux-enhance-btn.ux-enh-off{display:none!important} /* Retrait du fond gris derrière la barre d'outils (la carte est déjà blanche) — sous ux-shell, dark + light. Spéc. body.(light-mode.)ux-shell .chat-toolbar.chat-toolbar-bar > 0,2,1 d'app.css. */ body.ux-shell .chat-toolbar.chat-toolbar-bar{background:transparent!important;border:none!important;backdrop-filter:none!important} /* REFONTE-UX (2026-06-26, retour Manu) — sélecteur de modèle déplacé À DROITE, collé au trombone. On pousse le spacer (flex:1) en tête (order:-1) : le model-pill, premier enfant order-0 visible, se retrouve juste avant la rangée d'actions (trombone, micro, web, enhance, envoyer). ux-shell only. */ body.ux-shell .chat-toolbar.chat-toolbar-bar > .ux-composer-spacer{order:-1} body.ux-shell .chat-toolbar.chat-toolbar-bar > [data-tour="model-pill"]{margin-right:2px} /* Light mode — l'accent 22% sur blanc = invisible ; tint plus profond + relief blanc. svg en !important pour battre `body.light-mode .chat-toolbar svg{color:#475569!important}` (0,2,1). */ body.light-mode .chat-toolbar .ux-enhance-btn{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 52%, transparent); background:color-mix(in srgb, var(--accent) 13%, #fff); box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(0,0,0,.08)} body.light-mode .chat-toolbar .ux-enhance-btn svg{color:var(--accent)!important} body.light-mode .chat-toolbar .ux-enhance-btn:hover:not(:disabled){ border-color:color-mix(in srgb, var(--cta-ink) 70%, transparent); background:color-mix(in srgb, var(--accent) 19%, #fff); box-shadow:0 4px 14px -5px color-mix(in srgb, var(--accent) 50%, transparent)} /* Bouton Envoyer (composer) — app.css code l'ombre en cyan `rgba(0,176,240,.3)` codé en dur, qui ne matche pas l'accent du workspace (navy en white-label) → halo bleuté mal intégré, surtout en light. Ombre accent-aware + relief plus discret en light. Spéc. body.ux-shell… > 0,3,1 d'app.css. */ body.ux-shell .chat-toolbar.chat-toolbar-bar > button:last-child:not(:disabled){ box-shadow:0 2px 10px -1px color-mix(in srgb, var(--accent) 32%, transparent)!important} body.ux-shell .chat-toolbar.chat-toolbar-bar > button:last-child:hover:not(:disabled){ box-shadow:0 4px 16px -2px color-mix(in srgb, var(--accent) 46%, transparent)!important} body.light-mode.ux-shell .chat-toolbar.chat-toolbar-bar > button:last-child:not(:disabled){ box-shadow:0 1px 2px rgba(0,0,0,.10), 0 3px 10px -2px color-mix(in srgb, var(--accent) 24%, transparent)!important} body.light-mode.ux-shell .chat-toolbar.chat-toolbar-bar > button:last-child:hover:not(:disabled){ box-shadow:0 2px 4px rgba(0,0,0,.12), 0 5px 16px -3px color-mix(in srgb, var(--accent) 36%, transparent)!important} /* Fix (2026-07-10, retour Manu) — la flèche du bouton Envoyer restait slate-600 en light : la règle générique `body.light-mode .chat-toolbar svg{color:#475569!important}` (app.css) bat le currentColor blanc du bouton actif → flèche sombre sur rond navy. On force le blanc uniquement à l'état actif (l'état désactivé garde le gris). */ body.light-mode .chat-toolbar.chat-toolbar-bar > button:last-child:not(:disabled) svg{color:#fff!important} /* Globe Web : uniquement sous ux-shell (legacy = barre de modes). Gating CSS robuste (body.ux-shell fiable, contrairement à _uxShellOn() en x-show évalué stale à l'init). */ body:not(.ux-shell) .ux-web-toggle{display:none!important} /* REFONTE-UX-V1 F5 incr.6 — bouton épingler dans le picker modèle (étoile favori) */ .ux-pin-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; width:22px;height:22px;border-radius:6px;color:var(--text-3);opacity:0; cursor:pointer;transition:opacity .12s,color .12s,background .12s} .model-picker-item:hover .ux-pin-btn{opacity:.7} .ux-pin-btn:hover{background:var(--surface-2);color:var(--brand-cyan);opacity:1} .ux-pin-btn.is-pinned{opacity:1;color:var(--brand-cyan)} /* ═══════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 — HABILLAGE VISUEL (flag ux_shell_v1 → body.ux-shell) Esthétique des prototypes : Hanken Grotesk (UI) + Fraunces (display). PHASE 1 : surface chat. Additif & gaté (body sans .ux-shell = inchangé). ═══════════════════════════════════════════════════════════════════════ */ /* ── TOKENS de la coquille (neutres purs + filets translucides). Redéfinir les variables DS scope body.ux-shell aligne TOUTES les surfaces qui consomment var(--surface/--bg/--border/...) : chat, drawer/dock, cartes, sidebar, modales — sans override par composant. NB 2026-08-26 : frontend/css/shell-2026.css est chargé APRÈS et recouvre la plupart de ces jetons pour body.ux-shell. Ce bloc reste la référence pour ceux qu'il ne redéfinit pas (onglets de conversation, notamment) ; il doit donc rester DANS LA MÊME famille — neutre pur, jamais bleuté. ── */ body.ux-shell { /* C'est CE bloc qui s'applique dans l'app : le body porte la classe `ux-shell`, donc les jetons du :root sont ici RECOUVERTS. Une correction de fond qui oublierait ce bloc n'aurait aucun effet visible. 2026-08-26 — les valeurs passent en NEUTRE PUR (R=G=B). Elles etaient bleutees (#12141A : bleu 26 contre rouge 18), ce qui suffit a donner un ecran « froid » avant meme qu'un seul element colore soit peint. L'ecart carte/fond est TENU : sans separation entre couches, un fond profond ne donne pas de la profondeur mais du noir plat. */ --bg: #151515; --surface: #1D1D1D; /* cartes, panneaux, composer, drawers */ --surface-2: #2B2B2B; /* surfaces imbriquees / survol leger */ --surface-hover: #313131; --border: rgba(255,255,255,0.13); /* le filet qui DECOUPE la carte du fond */ --text-1: #F6F6F6; /* blanc franc : c'est l'ECART avec --text-2 qui fait qu'un ecran sombre parait net plutot que gris (x2,84 -> x3,36) */ --text-2: #A3A3A3; --accent-dim: rgba(var(--accent-rgb),0.14); --accent-border: rgba(var(--accent-rgb),0.24); /* Onglets thread : l'actif fusionne avec la surface chat (= le fond #101216). */ --chat-tab-bar-bg: color-mix(in srgb, var(--bg) 78%, #000); --chat-tab-bar-border: rgba(255,255,255,0.09); --chat-tab-bg-active: var(--bg); --chat-tab-bg-hover: rgba(255,255,255,0.06); --chat-tab-text-active:#EDEDED; /* Onglets inactifs : encore plus lisibles (retour Manu 2026-06-23 #2) — #868D95 → #9AA1A9 */ --chat-tab-text: #A3A3A3; --chat-tab-text-hover: #C9C9C9; } body.light-mode.ux-shell { /* Light plus LISIBLE : fond un cran plus marqué → les surfaces blanches ressortent ; texte muté plus foncé ; bordures plus nettes. 2026-08-26 : le « tint cool subtil » qui était volontairement conservé ici est SUPPRIMÉ — c'est lui qui rendait le thème clair légèrement bleuté. Gris purs (R=G=B), l'ambre porte seul la couleur. */ --bg: #EDEDED; --surface: #ffffff; --surface-2: #F5F5F5; --surface-hover: #E8E8E8; --border: #DCDCDC; --text-1: #121212; --text-2: #5C5C5C; --text-3: #6B6B6B; /* 3,15 -> 4,54 sur la surface la PLUS defavorable (#EAECEF, la barre laterale). Reste sous --text-2 (4,99 au meme endroit) : la hierarchie tient, la lisibilite revient. */ /* ACCENT ASSOMBRI en light : le bleu du thème sombre (#2E7BF6) ne donne que 3,1 sur blanc. #1560D8 tient 4,9 en gardant la teinte. Même famille dans les deux thèmes — plus de bascule cyan/navy, qui obligeait à re-déclarer un jeton à chaque composant. Valeurs recopiées de shell-2026.css. */ --accent: #1560D8; --accent-rgb: 21,96,216; --accent-hover: #0E4EB4; --accent-dim: rgba(21,96,216,0.10); --accent-border: rgba(21,96,216,0.26); --chat-tab-bar-bg: #E8E8E8; --chat-tab-bar-border: #DADADA; --chat-tab-bg-active: #ffffff; --chat-tab-text-active:#121212; /* REFONTE-UX (Manu 2026-06-23) — fix bug onglets récurrent : sans ces 2 tokens, le texte des onglets inactifs héritait de la valeur dark (#B9C0C7) → illisible sur la barre claire. Valeurs lisibles dark-on-light. */ --chat-tab-text: #5C5C5C; --chat-tab-text-hover: #3A3A3A; /* BUGFIX-PELEMELE-V1 B18 (2026-07-01) — var() se résout au scope du déclarant: `--chat-tab-accent: var(--accent)` sur :root (shared.css:43) fige le cyan dark var(--accent). Sans redéclaration ici, le liseré de l'onglet actif restait cyan en clair alors que le reste (bouton +, CTAs) passait navy. Re-déclaré dans le scope light → var(--accent) y vaut navy var(--accent). Le dark reste cyan (inchangé). */ --chat-tab-accent: var(--accent); } body.ux-shell { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; --ux-rail-w: 64px; } /* Mobile : le rail d'icônes devient une barre en haut → l'éditeur reprend toute la largeur. */ @media (max-width: 767.98px) { body.ux-shell { --ux-rail-w: 0px; --ux-rail-inset: 0px; } } /* CAP #4 (preview, réversible) — « coquille cadrée » en overlay : liseré fin + coins arrondis au bord du viewport, sans toucher le layout (pointer-events:none). */ body.ux-shell::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); } body.light-mode.ux-shell::after { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10); } /* Titres / display en Fraunces (sérif premium) */ body.ux-shell h1, body.ux-shell h2, body.ux-shell h3, body.ux-shell .welcome-v2-greeting, body.ux-shell .welcome-v2-greeting-question, body.ux-shell .markdown-body h1, body.ux-shell .markdown-body h2, body.ux-shell .markdown-body h3 { font-family: var(--font-display); letter-spacing: -0.01em; } /* Greeting accueil — plus éditorial */ body.ux-shell .welcome-v2-greeting { font-weight: 600; } /* Bulle utilisateur — radius asymétrique premium (prototype) */ body.ux-shell .message-bubble-user { border-radius: 16px 16px 5px 16px; } /* Contenu assistant — interligne éditorial plus aéré */ body.ux-shell .message-bubble-assistant .markdown-body, body.ux-shell .message-bubble-assistant .prose { line-height: 1.72; } /* Accueil — cartes de suggestion sobres : léger panel translucide (un cran au-dessus du fond navy, comme .qcard du proto), bordure fine, accent cyan réservé à la seule icône. Pas de tint cyan sur la carte (désaturation). */ body.ux-shell.ux-shell .naix-home-card { border-radius: 12px !important; background: rgba(255,255,255,0.028) !important; border: 1px solid var(--border) !important; padding: 13px 14px !important; box-shadow: none !important; } body.light-mode.ux-shell.ux-shell .naix-home-card { background: var(--surface) !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; } body.ux-shell.ux-shell .naix-home-card:hover { border-color: var(--accent-border, rgba(var(--accent-rgb), 0.40)) !important; background: rgba(255,255,255,0.045) !important; transform: translateY(-2px) !important; } /* Icône carte — carré cyan-soft discret (proto .qi), pas de remplissage vif. */ body.ux-shell.ux-shell .naix-home-card-icon { background: var(--accent-dim) !important; border: 1px solid var(--accent-border) !important; } /* greeting accueil — un cran plus présent (Fraunces déjà appliqué) */ body.ux-shell .welcome-v2-greeting { font-size: 1.7rem; line-height: 1.15; } /* Respiration entre échanges (lisibilité — retour Manu) : espace après chaque message, plus marqué après une réponse assistant avant le stream suivant. */ body.ux-shell .message-group { margin-bottom: 22px !important; } body.ux-shell .message-group:has(.message-bubble-assistant) { margin-bottom: 36px !important; } /* ── Composer : anneau de focus premium (glow cyan doux 4px, prototype) ── */ body.ux-shell .input-block-v2-inner:focus-within { border-color: rgba(var(--accent-rgb), 0.50) !important; box-shadow: 0 8px 30px -10px rgba(0,0,0,0.30), 0 0 0 4px var(--cyan-soft, rgba(var(--accent-rgb), 0.13)) !important; } body.light-mode.ux-shell .input-block-v2-inner:focus-within { box-shadow: 0 8px 26px -12px rgba(0,0,0,0.18), 0 0 0 4px var(--accent-dim) !important; } /* ── Message assistant ÉDITORIAL (prototype app-shell) : plus de « grosse carte », contenu flush sur le fond. Avatar = orbe Naix conservé (différenciateur). ── */ body.ux-shell .message-bubble-assistant { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding-top: 2px !important; padding-bottom: 2px !important; } body.ux-shell.light-mode .message-bubble-assistant { background: transparent !important; border: none !important; box-shadow: none !important; } /* le typewriter / image-only gardent leur logique ; on neutralise juste le cadre */ body.ux-shell .message-bubble-assistant.message-bubble-image-only { padding: 0 !important; } /* ── CTAs follow-up → pilules horizontales (prototype app-shell .cta) ── */ body.ux-shell .follow-ups-list { flex-direction: row; flex-wrap: wrap; gap: 7px; } body.ux-shell .follow-up-chip { width: auto; border-radius: 999px; padding: 7px 14px; font-weight: 600; } body.ux-shell .follow-up-chip:hover { transform: translateY(-1px); } /* ── Modales : finition premium quand flag on (blur + ombre + rayon) ── */ body.ux-shell .modal-overlay, body.ux-shell .ds-modal-backdrop { backdrop-filter: blur(6px); } body.ux-shell .modal-box { border-radius: var(--r-xl, 16px); box-shadow: var(--elev-3); } /* ── Sélecteurs d'option (choice pills) → approche pilule épurée (préférence Manu) : plus de boîte conteneur ni de label « CHOISISSEZ UNE OPTION », pilules neutres entièrement arrondies (comme les CTAs). État sélectionné en accent. ── */ body.ux-shell.ux-shell .choice-pills-container { background: transparent !important; border: none !important; padding: 8px 0 2px !important; margin: 10px 0 4px !important; } body.ux-shell.ux-shell .choice-pills-label { display: none !important; } body.ux-shell.ux-shell .choice-pill { border-radius: 999px !important; background: transparent !important; color: var(--text-1) !important; border: 1px solid var(--border) !important; padding: 9px 18px !important; font-weight: 500 !important; } body.ux-shell.ux-shell .choice-pill:hover:not(:disabled) { background: var(--surface-2) !important; border-color: var(--text-3) !important; } body.ux-shell.ux-shell .choice-pill.selected { background:color-mix(in srgb, var(--cta) 14%, transparent) !important; border-color:var(--cta) !important; color:var(--cta-ink) !important; } /* ── Pied de message : boutons d'action épurés (sans boîte) + badges discrets ── */ body.ux-shell.ux-shell .action-btn { background: transparent !important; border-color: transparent !important; color: var(--text-3) !important; border-radius: 8px !important; } body.ux-shell.ux-shell .action-btn:hover { background: var(--surface-2) !important; color: var(--text-1) !important; border-color: var(--border) !important; } /* badges modèle / tier / tokens — discrets, cohérents */ body.ux-shell.ux-shell .routing-badge { opacity: 0.92; font-weight: 500; } /* badges + actions sur UNE seule ligne (retour Manu) : on masque la rangée badges intra-bulle, ré-rendue inline dans .message-actions (cf. app.html). */ body.ux-shell.ux-shell .routing-meta-row { display: none !important; } /* ── Orb avatar STATIQUE (retour Manu : économie ressources). Canvas masqué + logo orb SVG. Orbs accueil/Naix/Studio realtime restent animés (boucle coupée uniquement pour .ai-orb-canvas via le guard JS body.ux-shell). ── */ body.ux-shell.ux-shell .msg-avatar-ai canvas.ai-orb-canvas { display: none !important; } /* Avatar IA = ROND premium (fond cyan doux + halo, comme la maquette), aligné en HAUT (à côté du titre, pas en bas), même taille que l'avatar user (36px). orb transparent. */ body.ux-shell.ux-shell .msg-avatar-ai, body.ux-shell.ux-shell .msg-row-assistant > .msg-avatar-ai { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.16) !important; /* 34 px et non 22 : le fichier reduit DEJA le N a 62 % de son cadre pour qu'il respire dans un cercle. A 22 px les deux reductions se cumulaient et le signe tombait a 38 % du diametre. A 34 il revient a 59 %. */ background: rgba(255,255,255,0.05) url('/images/orb-avatar.svg?v=3') center / 34px no-repeat !important; box-shadow: 0 2px 10px -4px rgba(255,255,255,0.16) !important; align-self: flex-start !important; margin-top: 2px !important; } body.light-mode.ux-shell .msg-avatar-ai, body.light-mode.ux-shell .msg-row-assistant > .msg-avatar-ai { background: rgba(0,0,0,0.05) url('/images/orb-avatar-navy.svg?v=3') center / 34px no-repeat !important; border-color: rgba(0,0,0,0.16) !important; } /* STREAM-ID-V1 (2026-07-21) — pendant le streaming, le slot logo-de-phase occupe l'avatar : on retire le glyphe orb du fond (sinon logo + icône de phase se superposent). Le rond ux-shell (fond cyan doux + halo) est conservé — même ancrage visuel que l'avatar final. */ body.ux-shell.ux-shell .msg-avatar-ai.phase-avatar-slot, body.ux-shell.ux-shell .msg-row-assistant > .msg-avatar-ai.phase-avatar-slot { background-image: none !important; } /* Alignement haut de la ligne assistant (avatar à côté du titre — maquette) */ body.ux-shell .msg-row-assistant { align-items: flex-start !important; } /* L'orbe flotte à gauche (hors flux, left:-44px) : on le remonte EN HAUT (top) au lieu de bottom:2px, pour qu'il soit à côté du titre de la réponse (maquette). */ @media (min-width: 768px) { body.ux-shell .msg-row-assistant > .msg-avatar-ai { top: 2px !important; bottom: auto !important; } /* Pied de message (badges+actions) aligné avec le contenu de la bulle (padding px-5 = 20px) */ body.ux-shell .message-actions { padding-left: 20px !important; } } /* ── FOND DE PAGE : PLAT, NEUTRE, SANS HALO (2026-08-26) ──────────────────── Le fond portait un `radial-gradient` teinte a l'accent (`rgba(var(--accent-rgb), .06)`), ancre au viewport et repete a l'identique sur le body ET sur #chat-main-wrapper. Deux consequences : la page entiere etait BAIGNEE dans la couleur d'accent — c'est une bonne part du « du bleu partout » — et le halo s'eteignait vers `transparent 60%`, ce qui a produit les aretes de fond signalees plusieurs fois. Les references fournies par Manu posent un fond PLAT ; la profondeur vient des couches (carte/fond) et de l'ombre, pas d'une teinte diffuse. Le fond CONSOMME --bg, il ne le repete pas : fige en dur, il ignorait toute correction du jeton sans que rien ne le signale. */ body.ux-shell { background: var(--bg) !important; } /* FIX 2026-06-26 (Manu) — bande/couture visible en bas de page en light : le body était #eef2f8 alors que la surface #chat-main-wrapper est #f3f6fb → dès que le wrapper ne couvre pas toute la hauteur, le body plus foncé apparaît en bas. En dark, body et wrapper partagent la même valeur (aucune couture) ; on aligne le light pareil → fond uniforme #f3f6fb, plus de démarcation. */ body.light-mode.ux-shell { background: var(--bg) !important; } /* REFONTE-UX (Manu 2026-06-23) — le garde le fond sombre #0c0d12 en light (la classe light-mode est sur , var(--bg) ne remonte pas au html) → un liseré sombre apparaît tout en bas (body lié à --app-height). On fait suivre le thème au html via :has() pour supprimer la démarcation. */ html:has(body.light-mode) { background: var(--bg, #EDEDED) !important; } html:has(body.ux-shell:not(.light-mode)) { background: var(--bg) !important; } /* SURFACE DE TRAVAIL = #chat-main-wrapper (toute la hauteur du centre : tabs + scroll + composer). Meme couleur PLATE que le body : une seule couche continue, donc aucune couture possible. Le point lumineux de l'ecran vient de l'orbe et de l'accent sur les commandes, jamais du fond. (Sous coquille, shell-2026.css transforme ce wrapper en CARTE flottante ; c'est le seul geste structurant du fond, et il est geometrique, pas colore.) */ body.ux-shell #chat-main-wrapper { background: var(--bg) !important; } body.light-mode.ux-shell #chat-main-wrapper { background: var(--bg) !important; } /* BUGFIX-PELEMELE-V1 B9 (2026-07-01) — couture horizontale sous le composer en clair : le fade .input-area-v2::before finissait sur var(--bg) (#eef2f8) alors que la surface #chat-main-wrapper est #f3f6fb → arête visible. Token unique --ux-shell-surface (dark #12161f / light #f3f6fb) partagé par le fade, pour que les deux ne divergent plus jamais (B9.2). Le dark était déjà OK (var(--bg) = #12161f = wrapper) mais on l'harmonise. */ body.ux-shell { --ux-shell-surface: var(--bg); } body.light-mode.ux-shell { --ux-shell-surface: var(--bg); } body.ux-shell .input-area-v2::before { background: linear-gradient(to bottom, transparent, var(--ux-shell-surface)) !important; } /* FOND UNIQUE = wrapper plat. On force TRANSPARENTS tous les conteneurs internes qui peignent un fond propre (sinon démarcation : leur teinte ≠ wrapper). Haute spécificité pour battre les règles `body.light-mode …` existantes (les 2 thèmes). */ body.ux-shell.ux-shell #chat-scroll-area, body.ux-shell.ux-shell #chat-scroll-area.onboarding-bg, body.light-mode.ux-shell.ux-shell #chat-scroll-area:not(.onboarding-bg), body.ux-shell.ux-shell .flex.flex-1.overflow-hidden, body.ux-shell.ux-shell .flex.flex-col.flex-1.min-h-0.overflow-hidden, body.light-mode.ux-shell.ux-shell .onboarding-bg { background: transparent !important; } /* Neutralise le glow décoratif de base (.onboarding-bg::before = 3 radials). */ body.ux-shell .onboarding-bg::before { display: none !important; } /* Header « Dans Projet » : conteneur transparent (gardait un linear-gradient → boîte/bande visible sur le navy plat). Le pill conserve son tint cyan. */ body.ux-shell.ux-shell .thread-project-header { background: transparent !important; } /* ═══ HOME REFONTE (cohérent prototype v5-premium .whome) ═══ */ /* Orb d'accueil premium : halo radial + anneau pulsé autour du canvas animé. */ body.ux-shell .welcome-v2-logo.naix-home-orb { width: 96px !important; height: 96px !important; } body.ux-shell #voice-orb-canvas { position: relative; z-index: 1; width: 76px !important; height: 76px !important; } body.ux-shell .naix-home-orb::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .15), transparent 70%); z-index: 0; pointer-events: none; } body.ux-shell .naix-home-orb::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .5); opacity: 0; animation: uxOrbPulse 3s ease-out infinite; z-index: 0; pointer-events: none; } @keyframes uxOrbPulse { 0% { transform: scale(.62); opacity: .42; } 100% { transform: scale(1.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { body.ux-shell .naix-home-orb::after { animation: none; opacity: .25; } } /* Cartes home : sous-titre descriptif TOUJOURS visible (comme la maquette .qcard), plus seulement au survol — finition premium, l'info aide à choisir. */ body.ux-shell.ux-shell .naix-home-card-desc { opacity: .68 !important; max-height: 44px !important; margin-top: 5px !important; } body.ux-shell.ux-shell .naix-home-card:hover .naix-home-card-desc { opacity: .9 !important; } /* Pilule notif contextuelle (proto .notif) : on réactive le briefing widget (masqué en HOME-COCKPIT) et on le rhabille en pilule ronde sous le meta. */ body.ux-shell .ws-briefing-widget { display: inline-flex !important; align-items: center; gap: 9px; margin: 4px auto 2px; padding: 8px 16px; border: 1px solid var(--border) !important; border-radius: 999px !important; background: var(--surface) !important; font-size: 0.8rem; color: var(--text-2); box-shadow: var(--elev-1); } body.ux-shell .ws-briefing-widget .ws-briefing-icon { color: var(--text-3); } body.ux-shell .ws-briefing-widget .ws-briefing-text { color: var(--text-2); } body.ux-shell .ws-briefing-widget .ws-briefing-cta { color: var(--accent); font-weight: 600; } body.ux-shell .ws-briefing-widget:hover { border-color: var(--accent-border, rgba(var(--accent-rgb), 0.40)) !important; } /* ── DÉCLUTTER HOME (retour Manu « trop saturé ») : on retire la ligne meta statique (« N conversations · N services ») redondante avec la pilule notif (qui, elle, est actionnable), on aère la composition. Greeting + question + pilule + cartes + composer = hiérarchie nette, accent cyan restreint. ── */ body.ux-shell .welcome-v2-subtitle { display: none !important; } /* Air : question un peu détachée du nom, pilule respirée, cartes espacées. */ body.ux-shell .welcome-v2-greeting-question { color: var(--text-2) !important; } body.ux-shell .welcome-v2 .naix-home-suggestions, body.ux-shell .welcome-v2 .ws-home-cockpit-grid { margin-top: 18px !important; } body.ux-shell .naix-home-card-name { font-weight: 600 !important; } /* --text-2 et non --text-3 : une description de carte est du CONTENU. A --text-3 elle sortait a 3,74, sous le seuil, pour un texte qu'on lit. */ body.ux-shell .naix-home-card-desc { color: var(--text-2) !important; } /* ════════════════════════════════════════════════════════════════════════ HOME PREMIUM (high-end, faible charge cognitive — retour Manu 2026-06-22) Peu d'éléments, mais finition soignée : nom en dégradé clippé, orb présent, cartes élevées au hover glow, rythme régulier. Accent cyan toujours restreint. ════════════════════════════════════════════════════════════════════════ */ /* Greeting éditorial — nom en dégradé clippé (proto .head h1 b). */ body.ux-shell.ux-shell .welcome-v2-greeting { font-size: 2rem !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; margin-bottom: 6px !important; } body.ux-shell.ux-shell .welcome-v2-greeting-accent { background: linear-gradient(110deg, var(--accent-hover), var(--accent) 55%, var(--text-1)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } body.light-mode.ux-shell.ux-shell .welcome-v2-greeting-accent { background: linear-gradient(110deg, var(--accent), var(--accent-hover) 60%, var(--mark)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ── La salutation SOUS l'horloge (SEUIL-V1, 2026-08-25) ──────────────────── Quand « le moment » est affiche, l'HEURE est le sujet de l'ecran. Une salutation en serif de 2 rem avec le prenom en degrade bleu lui disputait ce role : deux titres, deux familles, deux couleurs, pour une seule idee. Elle redevient une legende — meme famille que l'heure, plus petite, et la hierarchie portee par la VALEUR (blanc contre gris) plutot que par la teinte. Le bleu revient a l'heure, et a rien d'autre. Portee limitee par :has(.seuil-moment) : l'accueil sans le drapeau garde son traitement editorial d'origine, on ne casse rien en arriere. */ body:has(.seuil-moment) .welcome-v2-greeting, body.ux-shell.ux-shell:has(.seuil-moment) .welcome-v2-greeting { font-family: var(--font-ui) !important; font-size: 1.05rem !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.5 !important; color: var(--text-2) !important; margin-bottom: 2px !important; } body:has(.seuil-moment) .welcome-v2-greeting-accent, body.ux-shell.ux-shell:has(.seuil-moment) .welcome-v2-greeting-accent { background: none !important; -webkit-text-fill-color: var(--text-1) !important; color: var(--text-1) !important; font-weight: 500 !important; } body:has(.seuil-moment) .welcome-v2-greeting-question, body.ux-shell.ux-shell:has(.seuil-moment) .welcome-v2-greeting-question { font-size: 0.9rem !important; color: var(--text-3) !important; } body.ux-shell.ux-shell .welcome-v2-greeting-question { font-size: 0.98rem !important; font-weight: 400 !important; color: var(--text-2) !important; } /* Orb un cran plus présent + halo plus profond. */ body.ux-shell .welcome-v2-logo.naix-home-orb { width: 76px !important; height: 76px !important; margin-bottom: 14px !important; } body.ux-shell #voice-orb-canvas { width: 58px !important; height: 58px !important; } body.ux-shell .naix-home-orb::before { background: radial-gradient(circle, var(--accent-border), transparent 72%) !important; } /* Cartes premium : surface subtilement élevée (dégradé translucide), rythme égal, hover = lift + halo cyan doux. */ body.ux-shell.ux-shell .naix-home-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; padding: 15px !important; min-height: 116px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04) !important; transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .2s ease, box-shadow .2s ease, background .2s ease !important; } body.light-mode.ux-shell.ux-shell .naix-home-card { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; } body.ux-shell.ux-shell .naix-home-card:hover { transform: translateY(-3px) !important; border-color: var(--accent-border) !important; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%) !important; box-shadow: 0 14px 32px -16px rgba(var(--accent-rgb), 0.40) !important; } body.light-mode.ux-shell.ux-shell .naix-home-card:hover { background: var(--surface) !important; box-shadow:0 14px 30px -16px color-mix(in srgb, var(--cta) 30%, transparent) !important; } /* Icône carte premium : container plus net + glow subtil. */ body.ux-shell.ux-shell .naix-home-card-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: var(--accent-dim) !important; border: 1px solid var(--accent-border) !important; box-shadow: 0 0 16px -6px rgba(var(--accent-rgb), 0.5) !important; } /* Notif strip premium : verre dépoli léger. */ body.ux-shell.ux-shell .ws-briefing-widget { padding: 9px 18px !important; background: var(--surface) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; } body.light-mode.ux-shell.ux-shell .ws-briefing-widget { background: var(--surface) !important; } /* ── TOP BAR (habillage premium léger — hub d'outils + outil actif) ── La barre + le cluster `.ws-launcher` consomment déjà les tokens (verre navy). On donne au hub un peu plus de présence (verre + ombre douce) et à l'outil actif un glow subtil — finition « command bar » premium. ── */ /* Revele le cluster masque par le garde en ligne du : arriver ici veut dire que cette feuille est appliquee, donc que la mise en page tient. */ .ws-launcher { visibility: visible; } body.ux-shell .ws-launcher { background: color-mix(in srgb, var(--surface) 82%, transparent) !important; box-shadow: 0 4px 18px -8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04) !important; } body.light-mode.ux-shell .ws-launcher { box-shadow: 0 4px 16px -10px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.6) !important; } body.ux-shell .ws-launcher-btn-active { box-shadow: 0 0 14px -4px rgba(var(--accent-rgb), 0.45) !important; } /* Hairline bas de la top bar (séparation nette du contenu, proto .ctxbar). */ body.ux-shell .topbar-header { border-bottom: 1px solid var(--border) !important; } /* Session live (#29) : ligne d'aide sous le toggle composer. */ body.ux-shell .lc-chat-toggle-hint { width:100%; text-align:center; font-size:0.72rem; color:var(--text-3); padding:6px 14px 0; line-height:1.45; } /* ═══ CAP #2 — HOME SPECTACULAIRE (wow à l'ouverture, sans charge cognitive) ═══ Orb plus présent + halo profond, hero plus ample, plus d'air. Modéré pour rester above-the-fold (composer visible sur 1080p). */ body.ux-shell .welcome-v2-logo.naix-home-orb { width: 116px !important; height: 116px !important; margin-bottom: 20px !important; } body.ux-shell #voice-orb-canvas { width: 90px !important; height: 90px !important; } body.ux-shell .naix-home-orb::before { inset: 28px !important; background: radial-gradient(circle, var(--accent-dim), transparent 68%) !important; } /* Anneau pulsé adouci (aura trop forte — retour Manu). */ body.ux-shell .naix-home-orb::after { border-color: rgba(var(--accent-rgb), .3) !important; } @keyframes uxOrbPulse { 0% { transform: scale(.7); opacity: .28; } 100% { transform: scale(1.15); opacity: 0; } } /* UX (retour Manu 2026-06-23) — accueil moins « agressif », plus premium : greeting réduit (2.25rem → 1.55rem) pour matcher le raffinement prod. */ body.ux-shell.ux-shell .welcome-v2-greeting { font-size: 1.55rem !important; margin-bottom: 7px !important; } body.ux-shell.ux-shell .welcome-v2-greeting-question { font-size: 0.95rem !important; } body.ux-shell .welcome-v2 .naix-home-suggestions, body.ux-shell .welcome-v2 .ws-home-cockpit-grid { margin-top: 24px !important; } /* Vignettes : tailles ÉGALES (stretch) MAIS compactes — le sous-titre est clampé à 1 ligne pour limiter la hauteur de la plus grande carte (retour Manu : éviter à la fois « trop grosses » et « tailles différentes »). */ body.ux-shell.ux-shell .naix-home-suggestions { align-items: stretch !important; } body.ux-shell.ux-shell .naix-home-card-desc { -webkit-line-clamp: 1 !important; max-height: 1.4em !important; } body.ux-shell.ux-shell .naix-home-card-name { -webkit-line-clamp: 2 !important; } /* Icônes cartes : glyphe codé en dur #00B0F0 → navy en light (cohérence accent). */ body.light-mode.ux-shell.ux-shell .naix-home-card-icon, body.light-mode.ux-shell.ux-shell .naix-home-card-icon svg { color: var(--accent) !important; stroke: var(--accent) !important; } /* Orbe home en light : teinte navy (le canvas cyan manque de contraste sur fond clair). Filtre sur le canvas + glow/anneau navy. */ body.light-mode.ux-shell #voice-orb-canvas { filter: brightness(0.52) saturate(0.95) hue-rotate(8deg); } body.light-mode.ux-shell .naix-home-orb::before { background: radial-gradient(circle, rgba(var(--accent-rgb), .14), transparent 68%) !important; } body.light-mode.ux-shell .naix-home-orb::after { border-color: rgba(var(--accent-rgb), .35) !important; } /* ── BLOCS DE CODE en light : plus lisibles (retour Manu). Fond légèrement teinté + bordure nette pour détacher le bloc, et tokens de syntaxe assombris (surtout les commentaires, trop pâles). Dark inchangé. ── */ /* La separation d'avec la bulle vient de la SURFACE, pas d'un contour. Mesure : --surface-2 (#EEF2F7) contre une bulle quasi blanche donnait 1,17:1 — le bloc ne se detachait pas, d'ou le contour epais que Manu a juge inesthetique le 2026-08-31. Un cran plus soutenu suffit, et rend le trait discret a nouveau. */ body.light-mode.ux-shell .code-block, body.light-mode.ux-shell .markdown-body pre { background: var(--surface) !important; } /* Le code + tokens À L'INTÉRIEUR du bloc = AUCUN fond (sinon chaque ligne est surlignée — retour Manu). Seul le conteneur pre/code-block porte le fond. */ body.light-mode.ux-shell .hljs, body.light-mode.ux-shell .markdown-body pre code, body.light-mode.ux-shell .markdown-body pre code * { background: transparent !important; } /* Contour DECORATIF : le seuil WCAG de 3:1 vise les elements d'interface signifiants, pas un encadrement. L'y avoir applique donnait un cadre lourd. Un filet discret suffit des lors que la surface separe. */ /* UNE SEULE SURFACE (2026-08-31, retour Manu : « pas terrible au niveau design / couleurs »). Mesure de l'etat precedent : bandeau rgb(213,218,224) corps rgb(224,228,234) contour rgb(176,184,193) angles carres dans un conteneur arrondi Trois valeurs differentes empilees = le « cadre dans le cadre ». On garde la surface qui separe d'avec la bulle, et on supprime tout le reste : contour reduit a un filet a peine plus soutenu que la surface, bandeau fondu dans le corps, angle porte par le conteneur. */ body.light-mode.ux-shell .code-block { border-color: color-mix(in srgb, var(--text-2) 26%, var(--surface)) !important; border-radius: 12px !important; overflow: hidden !important; } /* Le bandeau ne porte plus de fond propre : il partage celui du bloc et n'est separe que par un filet. Le libelle et les deux actions suffisent a le distinguer, sans creer une seconde surface. */ body.light-mode.ux-shell .code-block-header { background: transparent !important; border-bottom-color: color-mix(in srgb, var(--text-2) 20%, var(--surface)) !important; } body.light-mode.ux-shell .code-block-lang { color: var(--text-2) !important; font-weight: 600; } /* ── FONTE DU CODE (2026-08-31) ───────────────────────────────────────────── Manu : « je ne vois pas vraiment de difference ». Mesure : la fonte etait `Courier New` (app.css:1862) — une machine a ecrire des annees 90, fine et peu lisible a l'ecran. Et surtout SANS graisses intermediaires : largeur du meme texte mesuree a 400, 500, 600 et 700 => 257,45 px dans les QUATRE cas. La regle `font-weight: 500` posee au tour precedent ne produisait donc RIEN. J'ai regle des contrastes pendant plusieurs passes sur une fonte qui etait elle-meme le probleme. On prend la pile systeme moderne, deja utilisee ailleurs dans app.css (l.2066) : SF Mono ou Menlo sur macOS, Consolas sur Windows, Liberation Mono sur Linux. Elles ont de vraies graisses, donc le 500 s'applique enfin. NON scope au theme clair : Courier New etait aussi peu lisible en sombre. C'est un defaut de lisibilite, pas un choix de couleur. */ body.ux-shell .markdown-body pre, body.ux-shell .markdown-body pre code, body.ux-shell .markdown-body pre code span, body.ux-shell .markdown-body :not(pre) > code, body.ux-shell .code-block code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace !important; font-variant-ligatures: none; } /* ── Coloration syntaxique : palette VS Code « Light+ » ───────────────────── Demande Manu 2026-08-31 : « comme dans Visual Studio Code », apres « fond plus clair et texte plus contraste ». On reprend les teintes exactes de l'editeur, qui repondent aux deux : fond BLANC et palette franchement contrastee. Ratios sur blanc, mesures : variable 15,3 · chaine 8,0 · fonction 6,5 · mot-cle 5,6 · commentaire 5,1 · type 4,8 · nombre 4,5. Toutes AA. Le bloc ne se distingue donc plus par sa surface mais par son FILET, comme dans GitHub ou VS Code lui-meme. */ /* Graisse 500 : la fonte a chasse fixe rendait trop fine a cette taille (retour Manu 2026-08-31, « texte plus epais pour une meilleure lisibilite »). VS Code rend en 400 mais dans une fonte plus grasse. */ body.light-mode.ux-shell .hljs, body.light-mode.ux-shell .markdown-body pre code, body.light-mode.ux-shell .markdown-body pre code span { font-weight: 500 !important; } body.light-mode.ux-shell .hljs, body.light-mode.ux-shell .markdown-body pre code { color: #000000 !important; } body.light-mode.ux-shell .hljs-comment, body.light-mode.ux-shell .hljs-doctag { color: #006400 !important; font-style: normal; } body.light-mode.ux-shell .hljs-keyword, body.light-mode.ux-shell .hljs-selector-tag { color: #8E00B3 !important; font-weight: 600; } body.light-mode.ux-shell .hljs-string, body.light-mode.ux-shell .hljs-attr, body.light-mode.ux-shell .hljs-addition, body.light-mode.ux-shell .hljs-regexp { color: #8F1212 !important; } body.light-mode.ux-shell .hljs-number, body.light-mode.ux-shell .hljs-literal { color: #076B46 !important; } body.light-mode.ux-shell .hljs-built_in, body.light-mode.ux-shell .hljs-type, body.light-mode.ux-shell .hljs-title.class_ { color: #1B6478 !important; } body.light-mode.ux-shell .hljs-title, body.light-mode.ux-shell .hljs-title.function_ { color: #634C1F !important; font-weight: 600; } body.light-mode.ux-shell .hljs-variable, body.light-mode.ux-shell .hljs-template-variable, body.light-mode.ux-shell .hljs-name, body.light-mode.ux-shell .hljs-params { color: #001080 !important; } body.light-mode.ux-shell .markdown-body :not(pre) > code { background: var(--accent-dim) !important; color: var(--text-1) !important; } /* Cartes home COMPACTES + premium (retour Manu : trop grosses). Hauteur au contenu (la grille égalise), padding serré, icône plus fine, radius doux. */ body.ux-shell.ux-shell .naix-home-card { min-height: 0 !important; padding: 13px 14px !important; border-radius: 12px !important; gap: 4px !important; } body.ux-shell.ux-shell .naix-home-card-icon { width: 26px !important; height: 26px !important; border-radius: 8px !important; margin-bottom: 9px !important; box-shadow: none !important; } body.ux-shell.ux-shell .naix-home-card-icon svg { width: 13px !important; height: 13px !important; } body.ux-shell.ux-shell .naix-home-card-name { font-size: 0.82rem !important; line-height: 1.3 !important; } body.ux-shell.ux-shell .naix-home-card-desc { font-size: 0.72rem !important; margin-top: 3px !important; } /* ── RAIL CURÉ (coquille) : menu « Plus » qui reloge les outils secondaires ── Le rail doit primer sur #chat-main-wrapper (qui le suit dans le DOM et le recouvrait → menu « Plus » qui passait derrière le fond, retour Manu). */ body.ux-shell #app-sidebar { position: relative; z-index: 46; } /* Atelier ouvert : la sidebar (rail + panneaux projets/documents) reste UTILISABLE au-dessus du takeover — l'utilisateur pioche un fichier sans quitter l'éditeur. */ body.ux-atelier-active #app-sidebar { z-index: calc(var(--z-overlay) + 2); } /* MAJ 2026-09-15 (retour Manu : « je clique sur Projets puis sur la grille et je ne vois pas les modules »). Le menu est TELEPORTE dans : son niveau doit donc etre --z-menu, le token prevu pour ce cas (DESIGN_SYSTEM.md §Layering). Il etait a 90 en dur, et le panneau Projets detache monte a --z-slideover (300) : le menu s'ouvrait bien, DERRIERE le panneau. */ body.ux-shell .ux-more-menu { position: absolute; left: calc(100% + 8px); top: 0; z-index: var(--z-menu); min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.55); } body.light-mode.ux-shell .ux-more-menu { box-shadow: 0 16px 40px -16px rgba(0,0,0,.30); } body.ux-shell .ux-more-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 8px; border: 0; background: transparent; color: var(--text-1); font-size: 0.85rem; font-weight: 500; cursor: pointer; text-align: left; transition: background .14s ease, color .14s ease; } body.ux-shell .ux-more-item:hover { background: var(--surface-hover); } body.ux-shell .ux-more-sep { height: 1px; margin: 5px 6px; background: var(--border); } body.ux-shell .ux-more-item i, body.ux-shell .ux-more-item svg { color: var(--text-2); flex-shrink: 0; } /* ── REFONTE-UX-V1 F3 — Panneau Historique (proto #53) ────────────── IMPORTANT : ces styles vivent en CSS (pas en inline) car Alpine `:style` avec une valeur string ÉCRASE l'attribut `style=""` statique (merge KO). Tout item qui porte un `:style`/`:class` dynamique doit donc tenir sa mise en page via une classe. */ body.ux-shell .ux-hist-pill { font-size: 0.78rem; font-weight: 500; border: 1px solid; border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: all .12s; white-space: nowrap; } body.ux-shell .ux-hist-item { position: relative; /* B4 — ancre le bouton suppression au survol */ display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 10px 11px; border: 0; background: none; border-radius: 12px; cursor: pointer; color: var(--text-1); transition: background .12s ease; margin-bottom: 1px; } body.ux-shell .ux-hist-item--active, body.ux-shell .ux-hist-item--selected { background: var(--accent-dim) !important; box-shadow: inset 0 0 0 1px var(--accent-border); } /* BUGFIX-PELEMELE-V1 B4 — suppression par item (survol) + case multi-sélection. */ body.ux-shell .ux-hist-del { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; } body.ux-shell .ux-hist-item:hover .ux-hist-del, body.ux-shell .ux-hist-del:focus-visible { opacity: 1; } body.ux-shell .ux-hist-del:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger-ink); } body.ux-shell .ux-hist-del i, body.ux-shell .ux-hist-del svg { width: 15px; height: 15px; } body.ux-shell .ux-hist-check { width: 16px; height: 16px; border-radius: 6px; border: 1.5px solid var(--border); flex-shrink: 0; margin-top: 2px; display: grid; place-items: center; transition: background .12s, border-color .12s; } body.ux-shell .ux-hist-check svg { width: 10px; height: 10px; color: #fff; } body.ux-shell .ux-hist-dot { width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0; margin-top: 5px; } /* Panneau Historique + backdrop : démarrent APRÈS le rail (64px) pour le garder visible — comme la maquette #53 (et non recouvrir la sidebar). Mobile → plein écran. */ /* L'historique s'inscrit SOUS la barre du haut, comme le panneau Projets. Il partait de top:0 et la recouvrait : un bandeau pleine hauteur qui masquait la barre du chat (Vue divisee, Incognito) au lieu de la laisser utilisable. Meme variable que Projets, pour que les deux bougent ensemble si la hauteur de la barre change. */ .ux-hist-after-rail { left: var(--ux-rail-w, 64px); } @media (max-width: 767.98px) { /* Sur mobile il n'y a pas de rail ni de barre a preserver : le panneau reprend toute la hauteur, sinon il perdrait de la place pour rien. */ .ux-hist-after-rail { top: 0 !important; } } @media (max-width: 767.98px) { .ux-hist-after-rail { left: 0; } } /* ── REFONTE-UX-V1 — Admin/SA sans top bar (maquette) ────────────────── Sous ux-shell, on masque le top-bar (fil d'Ariane) et chaque section porte son propre header (titre + sous-titre + actions), comme la maquette. */ body.ux-shell .top-bar { display: none !important; } /* Top nav globale admin (logo + thème + langue) : masquée sur desktop sous ux-shell (compte/thème/langue accessibles via le footer sidebar → Paramètres). Conservée < 1024px car elle porte le hamburger d'ouverture de la sidebar. */ @media (min-width: 1024px) { body.ux-shell .admin-topnav { display: none !important; } } /* ── REFONTE-UX-V1 — App sans top bar (maquette) ─────────────────────── Le top bar (.topbar-header : launcher Workstation + thème/notif/langue) est masqué. Les outils Workstation sont relogés dans le rail gauche ; thème/langue restent dans Paramètres ; notifications + compte sont déjà dans le rail. --topbar-total passe à 0 → la barre d'onglets (navigateur) remonte en tête. */ body.ux-shell .topbar-header { display: none !important; } body.ux-shell { --topbar-total: env(safe-area-inset-top, 0px) !important; } /* ── TOPBAR-REFONTE-V1 (2026-06-24) — retour du hub d'outils CENTRÉ ─────── Annule le retrait W6 ci-dessus SUR DESKTOP (≥768px) : la top bar revient (launcher Workstation centré + fil d'Ariane à gauche + loupe/Incognito/ cloche à droite), et la capsule verticale `.ux-ws-dock` est masquée (le hub centré la remplace ; le drawer outils reste). Mobile (<768px) : INCHANGÉ (bottom-nav + top bar masquée). Maquette : topbar-refonte-v2.html variante A. */ @media (min-width: 768px) { body.ux-shell .topbar-header { display: flex !important; } body.ux-shell { --topbar-total: calc(52px + env(safe-area-inset-top, 0px)) !important; } } /* La nav verticale droite est remplacée par le hub centré. */ /* COQUE 2026 : le dock droit est RESSUSCITE (il remplace le cluster centre). */ /* BUGFIX-PELEMELE-V1 B3 (2026-07-01) — jointure panneau Workstation docké ↔ topbar. Le drawer/dock calaient `top` en dur à 92px (topbar legacy 56 + tabs 36) → seam et chevauchement sous la refonte ux-shell (topbar 52px). On aligne l'offset sur la vraie pile topbar (var(--topbar-total)), et un x-effect (app.html:1055) bump +36px quand des onglets de chat sont présents, comme .right-context-panel. B3.2 : la topbar ux-shell a déjà son border-bottom → on retire le border-top du drawer pour supprimer la double-ligne. */ body.ux-shell { --ws-top-offset: var(--topbar-total); } body.ux-shell .ws-drawer { border-top: none; } /* Bouton Incognito top bar : identité violette (threads éphémères). */ body.ux-shell .topbar-incognito-btn:hover { background: color-mix(in srgb, var(--data-6) 12%, transparent) !important; color: var(--data-6-ink) !important; } body.light-mode.ux-shell .topbar-incognito-btn:hover { background: color-mix(in srgb, var(--data-6) 12%, transparent) !important; color: var(--data-6-ink) !important; } /* Thème + langue : déjà dans le rail/Paramètres → masqués de la top bar coquille (le cluster droit ne garde que loupe + Incognito + cloche). */ body.ux-shell .topbar-header .theme-toggle-btn, body.ux-shell .topbar-header .netaix-lang-toggle { display: none !important; } /* ── TOPBAR-REFONTE-V1 — Orbe d'accueil → Œil barré quand la session est incognito ── (validé Manu 2026-06-24). Quand le thread actif est éphémère, l'orbe Naix laisse place à un œil barré violet (aura douce + barre qui passe en continu). ux-shell only. */ body.ux-shell .naix-inc-orb { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; } body.ux-shell .naix-orb-incognito { position: relative; } body.ux-shell .naix-orb-incognito #voice-orb-canvas { display: none !important; } body.ux-shell .naix-orb-incognito .naix-inc-orb { display: grid; } body.ux-shell .naix-inc-orb svg { width: 100%; height: 100%; overflow: visible; } /* halos pseudo de l'orbe recolorés en violet pour cohérence */ body.ux-shell .naix-orb-incognito::before { background: radial-gradient(circle, color-mix(in srgb, var(--data-6) 12%, transparent), transparent 68%) !important; } body.ux-shell .naix-orb-incognito::after { border-color: color-mix(in srgb, var(--data-6) 32%, transparent) !important; } @keyframes naixIncAura { 0%,100% { opacity:.5; transform:scale(.96); } 50% { opacity:.82; transform:scale(1.05); } } body.ux-shell .naix-inc-aura { transform-box: fill-box; transform-origin: center; animation: naixIncAura 6s ease-in-out infinite; } @keyframes naixIncSlash { 0% { stroke-dashoffset:63; } 46% { stroke-dashoffset:0; } 60% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-63; } } body.ux-shell .naix-inc-slash { stroke-dasharray: 63; animation: naixIncSlash 3.8s cubic-bezier(.45,0,.2,1) infinite; } @media (prefers-reduced-motion: reduce) { body.ux-shell .naix-inc-aura, body.ux-shell .naix-inc-slash { animation: none !important; } } /* ── INCOGNITO-FULL-V1 (2026-06-24) — TOUTE l'interface bascule en mode incognito ── Quand un thread éphémère est actif, `body.ux-incognito` (toggué par l'x-effect du chat-main-wrapper) : l'accent passe au VIOLET (donc boutons, états actifs, greeting, composer… toute l'UI), une ambiance violette habille le fond, et les SURFACES mémoire/connecteurs sont masquées (le mode est isolé — voir aussi le gate backend). */ /* ── Palette du mode INCOGNITO — jetons dedies ────────────────────────────── Le violet ne suit pas la charte (neutres + ambre) : c'est volontaire, il SIGNALE un mode. Mais il etait ecrit en dur a onze endroits, sous six valeurs voisines (#8b7ddb, #8b7bff, #6c56e0, #6d5ca0...), donc impossible a retoucher d'un bloc. Une famille de jetons, deux themes, plus de litteral. */ :root { --incognito: #8B7DDB; /* l'accent du mode */ --incognito-rgb: 139,125,219; --incognito-hi: #8B7BFF; /* liseres, surlignages, bord haut d'onglet */ --incognito-hi-rgb: 139,123,255; --incognito-deep: #5A47D6; /* fin de degrade et halos portes */ --incognito-deep-rgb: 108,86,224; --incognito-ink: #B3A6FF; /* le mode ecrit en couleur */ --incognito-bg: #15121E; /* canevas du mode, plat */ } body.light-mode { --incognito: #6D5CA0; --incognito-rgb: 109,92,160; --incognito-hi: #6C54E0; --incognito-hi-rgb: 109,84,224; --incognito-deep: #5A47D6; --incognito-deep-rgb: 109,84,224; --incognito-ink: #5A47D6; --incognito-bg: #F1EDFA; } body.ux-shell.ux-incognito { --accent: var(--incognito); --accent-rgb: var(--incognito-rgb); --accent-hover: var(--incognito-hi); --accent-dim: rgba(var(--incognito-rgb),0.16); --accent-border: rgba(var(--incognito-rgb),0.34); --cta: var(--incognito); --cta-rgb: var(--incognito-rgb); --cta-hover: var(--incognito-hi); --cta-dim: rgba(var(--incognito-rgb),0.16); --cta-ink: var(--incognito-ink); --cta-fg: #14101F; } body.light-mode.ux-shell.ux-incognito { --accent-dim: rgba(var(--incognito-rgb),0.12); --accent-border: rgba(var(--incognito-rgb),0.30); --cta-dim: rgba(var(--incognito-rgb),0.12); --cta-fg: #FFFFFF; } /* Ambiance incognito : teinte violette UNIFORME et PLATE sur le canevas ET le body (même couleur) → AUCUNE démarcation de fond. On neutralise le dégradé radial fixe de la coquille normale (shared.css ~589, `transparent 60%` = le liseré que voyait Manu). */ body.ux-shell.ux-incognito, body.ux-shell.ux-incognito #chat-main-wrapper { background: var(--incognito-bg) !important; background-attachment: scroll !important; } body.light-mode.ux-shell.ux-incognito, body.light-mode.ux-shell.ux-incognito #chat-main-wrapper { background: var(--incognito-bg) !important; } /* Liseré violet sous la top bar = repère « session isolée ». */ body.ux-shell.ux-incognito .topbar-header { border-bottom-color: var(--accent-border) !important; } /* Mode déconnecté : on masque tout ce qui dépend de la mémoire / des connecteurs (bandeau notifs, cockpit accueil, cartes suggestions, hub Workstation, sous-titre récap). */ body.ux-shell.ux-incognito .ws-briefing-widget, body.ux-shell.ux-incognito .ws-home-cockpit-grid, body.ux-shell.ux-incognito .naix-home-suggestions, body.ux-shell.ux-incognito .welcome-v2-subtitle, body.ux-shell.ux-incognito .ws-launcher { display: none !important; } /* SEAM FIX (retour Manu : « toujours une séparation visible ») — le scrim dégradé du composer (`.input-area-v2::before`, 100px, fond → var(--bg)) ne matchait pas la teinte incognito plate → bande visible. Fond incognito uniforme → scrim inutile. */ body.ux-shell.ux-incognito .input-area-v2::before { display: none !important; } /* Contrôle/indicateur incognito à GAUCHE de la top bar (demande Manu). Icône seule au repos (démarre l'incognito au clic) ; chip violet + libellé « Incognito » quand le mode est actif (sert alors à le terminer). */ body.ux-shell .ux-inc-left-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px; border-radius: 999px; color: var(--text-3); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all .15s; } body.ux-shell .ux-inc-left-btn:hover { color: var(--data-6-ink); background: color-mix(in srgb, var(--data-6) 10%, transparent); } body.light-mode.ux-shell .ux-inc-left-btn:hover { color: var(--data-6-ink); background: color-mix(in srgb, var(--data-6) 10%, transparent); } body.ux-shell .ux-inc-left-btn.ux-inc-on { padding: 5px 12px 5px 9px; color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); } body.ux-shell .ux-inc-left-label { font-size: 12px; font-weight: 600; } /* Item rail Workstation : badge de compteur en pastille. */ body.ux-shell .ux-rail-ws-badge { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px; border-radius: 8px; font-size: 9px; font-weight: 700; text-align: center; background: var(--accent, var(--accent)); color: var(--accent-fg); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; } body.ux-shell .ux-rail-ws-badge.urgent { background: var(--danger); } /* ── Panneau utilisateur (menu compte refondu, ux-shell) ──────────────── */ .ux-acct-credits { padding: 11px 13px 12px; border-bottom: 1px solid var(--border); } .ux-acct-credits-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--text-3); } .ux-acct-credits-row b { font-size: 13px; font-weight: 600; color: var(--text-1); } .ux-acct-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 6px; } .ux-acct-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); } .ux-acct-manage { background: none; border: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent, var(--accent)); } .ux-acct-theme { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--border); } .ux-acct-theme-lbl { flex: 1; font-size: 13px; color: var(--text-2); } .ux-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; } .ux-seg-btn { font-size: 11px; font-weight: 600; color: var(--text-3); background: none; border: 0; padding: 4px 11px; border-radius: 6px; cursor: pointer; transition: all .12s ease; } .ux-seg-btn.on { background: var(--accent-dim, var(--accent-dim)); color: var(--accent, var(--accent)); box-shadow: inset 0 0 0 1px var(--accent-border, rgba(var(--accent-rgb), .3)); } /* ── Panneaux de droite (light) : accents bleus → navy refonte (#1F4E79) ── Harmonise le drawer notifications avec la coquille (retour Manu). */ body.light-mode.ux-shell .notif-card-action-primary { background: var(--accent-dim) !important; border-color: rgba(var(--accent-rgb), 0.30) !important; color: var(--accent) !important; } body.light-mode.ux-shell .notif-card-action-primary:hover { background: var(--accent-border) !important; border-color: rgba(var(--accent-rgb), 0.45) !important; } body.light-mode.ux-shell .notif-filter-active { background: var(--accent-dim) !important; border-color: rgba(var(--accent-rgb), 0.40) !important; color:var(--cta-ink) !important; } body.light-mode.ux-shell .notif-card-action-primary:focus-visible, body.light-mode.ux-shell .notif-filter-pill:focus-visible { outline-color: var(--accent) !important; } /* Permission banner + system link accents → navy aussi */ body.light-mode.ux-shell .notif-permission-banner > svg { color: var(--accent) !important; } /* ── Edge tab Workstation = CAPSULE COMPACTE FLOTTANTE (maquette #7) ────── Pas une colonne pleine hauteur opaque (= saturait l'interface). Capsule arrondie, hauteur auto, flottante au bord droit, centrée verticalement. */ body.ux-shell .ws-dock { top: 50px; /* top-aligné (cohérence avec l'ouverture des panneaux/modales, retour Manu) */ transform: none; right: 12px; height: auto; width: auto; padding: 7px 6px; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 14px 38px -12px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02); transition: right .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease; } body.light-mode.ux-shell .ws-dock { box-shadow: 0 14px 38px -14px rgba(0,0,0,.30); } /* UX (retour Manu 2026-06-23) — icônes du dock trop grosses → compactes/premium (cf prod). */ body.ux-shell .ws-dock .ws-dock-btn { width: 34px; height: 34px; border-radius: 10px; } body.ux-shell .ws-dock .ws-dock-btn svg, body.ux-shell .ws-dock .ws-dock-btn i { width: 18px !important; height: 18px !important; } body.ux-shell .ws-dock .ws-dock-sep { width: 22px; margin: 3px 0; } /* Quand un panneau est ouvert : la capsule se colle au bord GAUCHE du drawer (le drawer est au bord droit) et se top-aligne. Cf. maquette #7. */ body.ux-shell:has(.ws-drawer.ws-drawer-open) .ws-dock, body.ux-shell:has(.ws-drawer.ws-drawer-pinned) .ws-dock { right: calc(var(--ws-drawer-width, 400px) + 12px); top: 50px; transform: none; } /* BUGFIX-PELEMELE-V1 B3 (2026-07-01) — ce `top: 38px` datait de la refonte W6 où la top bar ux-shell était MASQUÉE (seuls les 38px d'onglets restaient). TOPBAR-REFONTE-V1 (2026-06-24) a RAMENÉ la top bar (52px) sans réaligner le drawer → il chevauchait la top bar de 14px (le vrai seam signalé). On l'aligne sur --ws-top-offset (= var(--topbar-total), +36px si onglets via x-effect), comme .right-context-panel et l'atelier docké. */ body.ux-shell .ws-drawer { top: var(--ws-top-offset, 52px); height: calc(100dvh - var(--ws-top-offset, 52px)); right: 0; } body.ux-shell .ws-drawer.ws-drawer-pinned { right: 0; } body.ux-shell .ux-pagehead { display: flex; align-items: flex-end; gap: 16px; padding: 4px 0 18px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } body.ux-shell .ux-pagehead-main { flex: 1; min-width: 0; } body.ux-shell .ux-pagehead-title { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-size: 1.55rem; font-weight: 600; line-height: 1.1; color: var(--text-1); letter-spacing: -.01em; } body.ux-shell .ux-pagehead-sub { font-size: 0.85rem; color: var(--text-3); margin-top: 4px; } body.ux-shell .ux-pagehead-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } /* ── ADMIN-UX-REFONTE-V1 AD-1 — carré icône d'en-tête + scope sidebar (cohérence app) ── */ body.ux-shell .ux-pagehead { align-items: center; } body.ux-shell .ux-pagehead-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--accent); box-shadow: 0 0 18px -6px var(--accent-border); } body.ux-shell .ux-pagehead-ic svg, body.ux-shell .ux-pagehead-ic i { width: 20px; height: 20px; } body.ux-shell .adm-scope { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; } body.ux-shell .adm-scope-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--accent); } body.ux-shell .adm-scope-t { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-weight: 600; font-size: 15px; color: var(--text-1); } /* ── AD-3 — Listes & tables premium — SCOPÉ admin (body.admin-app) pour ne PAS toucher les .badge de l'app utilisateur (74 occurrences). Uplift toutes les tables admin. ── */ body.ux-shell.admin-app .table-head th { font-size: 11px !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); } body.ux-shell.admin-app .table-row { border-bottom: 1px solid var(--border); transition: background-color .14s; } body.ux-shell.admin-app .table-row:hover { background-color: var(--surface-2); } body.ux-shell.admin-app .badge { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } /* ── ADMIN-PANEL-V1 (2026-06-24) — Lanceur « Applications » + takeover Admin iframe ── */ /* Bouton grille topbar */ body.ux-shell .ux-apps-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px; border-radius: 10px; color: var(--text-3); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all .15s; } body.ux-shell .ux-apps-btn:hover { color:var(--cta-ink); background: var(--accent-dim); } body.ux-shell .ux-apps-btn.ux-apps-btn-active { color:var(--cta-ink); background: var(--accent-dim); border-color: var(--accent-border); } /* Popover applications */ body.ux-shell .ux-apps-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-menu); width: 244px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-3); } body.ux-shell .ux-apps-popover-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 2px 4px 8px; } body.ux-shell .ux-apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } body.ux-shell .ux-app-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-1); cursor: pointer; transition: all .15s; } body.ux-shell .ux-app-tile:hover { border-color: var(--accent-border); background: var(--surface-2); transform: translateY(-1px); } body.ux-shell .ux-app-tile-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--accent); } body.ux-shell .ux-app-tile-ic svg { width: 19px; height: 19px; } body.ux-shell .ux-app-tile-lbl { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; } body.ux-shell .ux-app-tile.ux-app-tile-active { border-color: var(--accent-border); } body.ux-shell .ux-app-tile-sa .ux-app-tile-ic { background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.35); color: #fb923c; } body.ux-shell .ux-app-tile-sa:hover { border-color: rgba(251,146,60,.4); } /* Takeover plein écran */ body.ux-shell .ux-admin-takeover { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; background: var(--bg); } /* ADMIN-PANEL-V1.2 (2026-06-26) — le rail du takeover veut être un clone du rail Accueil (#app-sidebar en ux-shell) : même fond, mêmes boutons .sidebar-nav-item. ⚠️ La largeur de 64px ci-dessous N'EST PLUS celle du rail de l'app. Le rail de l'app est passé à `var(--ux-rail-w)` (72px en desktop) posé en carte à 10px des bords ; ce clone était resté à 64px collé au bord, soit 14px de saut horizontal à l'ouverture du panneau (mesuré le 2026-09-16). La géométrie est reprise dans `shell-2026.css` (RAIL-PANNEAU-V1), juste sous la règle `#app-sidebar` pour que les deux se relisent ensemble. Les valeurs qui suivent restent le repli hors `ux-shell` desktop — ne pas les « corriger » isolément. */ body.ux-shell .ux-admin-rail { flex-shrink: 0; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; background: var(--bg); border-right: 1px solid var(--border); } body.light-mode.ux-shell .ux-admin-rail { background: var(--surface); } body.ux-shell .ux-admin-rail-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--text-3); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all .15s; } body.ux-shell .ux-admin-rail-btn svg { width: 19px; height: 19px; } body.ux-shell .ux-admin-rail-btn:hover { color:var(--cta-ink); background: var(--accent-dim); } body.ux-shell .ux-admin-rail-btn.ux-admin-rail-btn-active { color:var(--cta-ink); background: var(--accent-dim); border-color: var(--accent-border); cursor: default; } body.ux-shell .ux-admin-rail-sep { width: 24px; height: 1px; background: var(--border); margin: 4px auto; flex-shrink: 0; } body.ux-shell .ux-admin-rail-theme { margin-top: auto; } body.ux-shell .ux-admin-rail-home { margin-top: auto; } /* UX-QUALITE-V1 C3.2 (2026-08-20) — sortie explicite du takeover. Volontairement neutre et non rouge : c'est un retour a l'application, pas une deconnexion. */ body.ux-shell .ux-admin-rail-exit { margin-top: auto; } body.ux-shell .ux-admin-rail-exit:hover { color:var(--text-1); background: var(--surface-hover); } body.ux-shell .ux-admin-frame { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: var(--bg); } /* NETAIX-DOCS DS-2.4.c — takeover plein écran de l'atelier de documents (iframe). Non gaté par ux-shell (feature à part, flag docgen_structured). La fermeture se fait via le bouton « Retour » DANS l'atelier (postMessage close) + Échap. */ /* z-index au-dessus du bandeau « mise à jour » de l'app (z:100001) et des toasts, sinon la barre d'outils de l'atelier (Retour/Générer/Exporter) est masquée. */ /* Chrome de l'atelier = MÊME charte que l'app (tokens partagés, retour Manu : couleurs/police/boutons doivent matcher le reste de l'app). On mappe les vars internes sur les tokens app (déjà theme-aware → pas d'override light-mode). */ /* Réintégration app (Manu 2026-06-30) : l'éditeur ne couvre plus le rail d'icônes de gauche (nav.sidebar-nav-container, 64px) → on l'inset à droite du rail. */ /* z-index : token --z-overlay (échelle DESIGN_SYSTEM.md — l'ancien 100100 en dur passait au-dessus de TOUT, y compris les panneaux sidebar et le bandeau version). */ .ux-atelier-takeover { position: fixed; top: 0; right: 0; bottom: 0; left: var(--ux-panel-left, 93px); z-index: var(--z-overlay); background: var(--bg, #fff); display: flex; flex-direction: column; --uat-border: var(--border); --uat-field: var(--surface-2); --uat-muted: var(--text-3); font-family: inherit; color: var(--text-1); } /* Fond IDENTIQUE au plein écran de l'éditeur texte (.right-context-panel.doc-v2-fullscreen) = var(--bg) PLAT dans les deux thèmes (le halo radial teinté a été retiré le 2026-08-26 : il reposait l'accent sur toute la surface du panneau). */ body:not(.light-mode) .ux-atelier-takeover { background: var(--bg); } body.light-mode .ux-atelier-takeover { background: var(--bg); } /* DS-2.5.2-Incr.21 — MODE PANNEAU RÉDUIT (dock à droite, parité éditeur texte) : l'éditeur design devient un panneau étroit à droite → le chat/thread reste visible et utilisable à gauche (éditer en consultant des résultats). L'iframe se ré-ajuste seule (resize → _maybeFit). */ .ux-atelier-takeover.is-docked { /* MÊMES propriétés que le panneau docké de l'éditeur texte (.right-context-panel) (retour Manu #59) : largeur = docEditorWidth||420 (fixée inline), simple border-left, pas d'ombre. */ left: auto; width: 420px; border-left: 1px solid var(--border); box-shadow: none; } .ux-atelier-frame { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; background: #fff; } /* PARITÉ — Terminer (vert subtil = .doc-v2-edit-toggle.is-editing de l'éditeur texte). */ .ux-atelier-topbar .uat-tb-done { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:8px; color:var(--success-ink); background:color-mix(in srgb, var(--success) 13%, transparent); border:1px solid color-mix(in srgb, var(--success) 32%, transparent); cursor:pointer; transition:filter .15s; } .ux-atelier-topbar .uat-tb-done:hover { filter:brightness(1.1); } /* Barre d'outils du moteur design — MÊME fond que la barre de mise en forme du texte (.doc-v2-rich-toolbar = var(--surface-2)). */ .ux-atelier-toolbar { display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:7px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); color:var(--text-1); position:relative; z-index:5; } .ux-atelier-toolbar .uat-tool-btn { display:inline-flex; align-items:center; gap:6px; background:none; color:var(--text-2); border:1px solid transparent; border-radius:8px; padding:6px 11px; font-size:13px; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; } .ux-atelier-toolbar .uat-tool-btn:hover { background:var(--surface-2); color:var(--text-1); } /* « Générer avec l'IA » = même style que le bouton ✦ IA de l'éditeur texte (accent subtil, PAS cyan plein). */ .ux-atelier-toolbar .uat-tool-accent { color:var(--accent); background:var(--accent-dim); border:1px solid var(--accent-border); font-weight:600; } .ux-atelier-toolbar .uat-tool-accent svg { color:var(--accent); } .ux-atelier-toolbar .uat-tool-accent:hover { filter:brightness(1.08); background:var(--accent-dim); color:var(--cta-ink); } .ux-atelier-toolbar .uat-tool-adv { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3); cursor:pointer; white-space:nowrap; } .ux-atelier-toolbar .uat-tool-adv input { accent-color:var(--accent); } .ux-atelier-toolbar .uat-tool-sp { flex:1; } /* DS-2.5.2 polish — TOPBAR reconstruite côté hôte (au-dessus des onglets, comme l'éditeur prose). Theme-aware via vars locales. */ .ux-atelier-topbar { --uat-border:var(--border); --uat-field:var(--surface-2); --uat-muted:var(--text-3); display:flex; align-items:center; gap:10px; flex:0 0 auto; padding:10px 16px; /* TRANSPARENT comme l'en-tête de l'éditeur texte (.ux-docpanel-head) qui laisse voir le fond #eef2f8 du takeover → même couleur de topbar dans les 2 éditeurs. */ background:transparent; color:var(--text-1); font-family:inherit; } .ux-atelier-topbar .uat-tb-back { display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--text-2); border:1px solid transparent; border-radius:8px; padding:6px 11px; font-size:13px; cursor:pointer; transition:background .15s, color .15s; } .ux-atelier-topbar .uat-tb-back:hover { background:var(--surface-2); color:var(--text-1); } .ux-atelier-topbar .uat-tb-brand { font-size:14px; font-weight:600; letter-spacing:.3px; white-space:nowrap; } .ux-atelier-topbar .uat-tb-sub { color:var(--uat-muted); font-weight:400; } .ux-atelier-topbar .uat-tb-gen { width:300px; max-width:30vw; background:var(--uat-field) !important; color:var(--text-1) !important; border:1px solid var(--uat-border) !important; border-radius:8px; padding:7px 11px; font-size:13px; font-family:inherit; } .ux-atelier-topbar .uat-tb-gen:focus { outline:none; border-color:var(--accent) !important; } .ux-atelier-topbar .uat-tb-btn { background:none; color:var(--text-2); border:1px solid transparent; border-radius:8px; padding:6px 11px; font-size:13px; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; } .ux-atelier-topbar .uat-tb-btn:hover { background:var(--surface-2); color:var(--text-1); } .ux-atelier-topbar .uat-tb-accent { color:var(--accent); background:var(--accent-dim); border:1px solid var(--accent-border); font-weight:600; } .ux-atelier-topbar .uat-tb-accent:hover { filter:brightness(1.08); } .ux-atelier-topbar .uat-tb-status { font-size:12px; color:var(--uat-muted); min-width:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; } .ux-atelier-topbar .uat-tb-status.err { color:var(--danger-ink); } .ux-atelier-topbar .uat-tb-sp { flex:1; } .ux-atelier-topbar .uat-tb-adv { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--uat-muted); cursor:pointer; white-space:nowrap; } .ux-atelier-topbar .uat-tb-adv input { accent-color:var(--accent); } /* Génération IA : bouton explicite + popover (clarté). */ .ux-atelier-takeover .uat-tb-genwrap { position:relative; display:inline-flex; } .ux-atelier-takeover .uat-tb-genbtn { display:inline-flex; align-items:center; gap:6px; } .ux-atelier-takeover .uat-tb-genbtn svg { color:inherit; } .ux-atelier-takeover .uat-tb-genbtn.is-open { filter:brightness(1.05); } .ux-atelier-takeover .uat-tb-genpop { position:absolute; top:calc(100% + 8px); left:0; z-index:50; width:380px; max-width:80vw; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:0 18px 50px -12px rgba(0,0,0,.35); color:var(--text-1); } /* Bouton « Générer avec l'IA » déplacé au bout droit de la barre (parité éditeur texte) → le popover s'ancre à droite pour ne pas déborder de la fenêtre. */ .ux-atelier-takeover .uat-tb-genpop--right { left:auto; right:0; } .ux-atelier-takeover .uat-genpop-title { font-size:13px; font-weight:600; margin:0 0 8px; } .ux-atelier-takeover .uat-genpop-ta { width:100%; box-sizing:border-box; background:var(--uat-field) !important; color:var(--text-1) !important; border:1px solid var(--uat-border) !important; border-radius:8px; padding:9px 11px; font-size:13px; font-family:inherit; resize:vertical; min-height:66px; } .ux-atelier-takeover .uat-genpop-ta:focus { outline:none; border-color:var(--accent) !important; } .ux-atelier-takeover .uat-genpop-hint { font-size:12px; color:var(--uat-muted); margin:8px 0 0; line-height:1.45; } /* ATELIER-UX-V2 — fichiers d'inspiration dans le popover Générer */ .ux-atelier-takeover .uat-genpop-inspo { margin-top:10px; max-height:170px; overflow:auto; border:1px solid var(--uat-border); border-radius:8px; padding:8px; } .ux-atelier-takeover .uat-genpop-inspo-t { font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--uat-muted); margin:0 0 6px; } .ux-atelier-takeover .uat-genpop-inspo-f { display:flex; align-items:center; gap:8px; font-size:13px; padding:4px 4px; border-radius:6px; cursor:pointer; } .ux-atelier-takeover .uat-genpop-inspo-f:hover { background:var(--surface-hover); } .ux-atelier-takeover .uat-genpop-inspo-f.is-off { opacity:.45; cursor:not-allowed; } .ux-atelier-takeover .uat-genpop-inspo-f .fn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ux-atelier-takeover .uat-genpop-inspo-f .wc { margin-left:auto; font-size:11px; color:var(--uat-muted); white-space:nowrap; } .ux-atelier-takeover .uat-genpop-inspo-none { font-size:12px; color:var(--uat-muted); margin:2px 0 0; line-height:1.4; } .ux-atelier-takeover .uat-genpop-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; } .ux-atelier-takeover .uat-genpop-cancel { background:transparent; border:1px solid var(--uat-border); color:inherit; border-radius:8px; padding:7px 13px; font-size:13px; cursor:pointer; } .ux-atelier-takeover .uat-genpop-go { color:var(--accent); background:var(--accent-dim); border:1px solid var(--accent-border); border-radius:8px; padding:7px 15px; font-size:13px; font-weight:600; cursor:pointer; } .ux-atelier-takeover .uat-genpop-go:hover:not(:disabled) { filter:brightness(1.08); } .ux-atelier-takeover .uat-genpop-go:disabled { opacity:.5; cursor:default; } /* Parité éditeur texte : icône doc + titre éditable + état autosave + versions. */ .ux-atelier-topbar .uat-tb-back { padding:6px 8px; } .ux-atelier-topbar .uat-tb-docicon { color:var(--accent); flex:0 0 auto; margin-left:2px; } /* !important : bat la règle globale `body.light-mode input` (app.css) qui force un look slate sur tous les inputs → sinon le titre apparaît encadré (cf. éditeur texte dont le titre reste sans bordure). */ .ux-atelier-topbar .uat-tb-title { flex:0 1 340px; min-width:90px; background:transparent !important; border:1px solid transparent !important; border-radius:6px; padding:5px 8px; font-size:13px; font-weight:600; color:var(--text-1) !important; font-family:inherit; } .ux-atelier-topbar .uat-tb-title:hover { background:var(--surface-2) !important; } .ux-atelier-topbar .uat-tb-title:focus { outline:none; border-color:var(--accent) !important; background:var(--surface-2) !important; } .ux-atelier-topbar .uat-tb-savestate { font-size:12px; white-space:nowrap; color:var(--uat-muted); flex:0 0 auto; } .ux-atelier-topbar .uat-tb-savestate.saving span { color:var(--accent); } .ux-atelier-topbar .uat-tb-savestate.saved span { color:var(--success-ink); } .ux-atelier-topbar .uat-tb-savestate.dirty span { color:var(--warning-ink); } .ux-atelier-topbar .uat-tb-savestate.err span { color:var(--danger-ink); } .ux-atelier-topbar .uat-tb-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid transparent; background:none; color:var(--text-2); border-radius:8px; cursor:pointer; flex:0 0 auto; transition:background .15s, color .15s; } .ux-atelier-topbar .uat-tb-iconbtn:hover { background:var(--surface-2); color:var(--text-1); } .ux-atelier-topbar .uat-tb-iconbtn.on { color:var(--accent); background:var(--accent-dim); border-color:var(--accent-border); } /* ATELIER-UX-V1 B3 — Supprimer (parité poubelle éditeur texte : rouge au survol). */ .ux-atelier-topbar .uat-tb-danger:hover { color:var(--danger-ink); background:color-mix(in srgb, var(--danger) 10%, transparent); } /* BUGFIX-PELEMELE-V4 B22.1 — toggle Aperçu/Éditer dans la topbar atelier. Réutilise .doc-mode-toggle/.doc-mode-btn (app.css) mais avec libellés visibles pour parité avec le viewer V1 (2 options claires). */ .ux-atelier-topbar .uat-tb-modetoggle { flex:0 0 auto; margin-left:2px; } .ux-atelier-topbar .uat-tb-modetoggle .doc-mode-btn { width:auto; height:26px; gap:5px; padding:0 9px; } .ux-atelier-topbar .uat-tb-modetoggle .doc-mode-btn-label { font-size:12px; font-weight:600; } /* ERGO-PANEL-FIX (2026-07-30) — l'atelier design en PANNEAU RÉDUIT (~600px) débordait : « Terminer » et les icônes de droite (historique/plein écran/réduire/ supprimer/fermer) étaient tronqués car la topbar (12 enfants, gap 10px, toggle libellé) dépassait la largeur (~420px de large seulement en réduit). On resserre les gaps, on autorise le champ titre à se réduire fortement, et on garde le cluster de droite (save + Terminer + icônes) INSÉCABLE. En réduit, le toggle Aperçu/Éditer passe en icônes seules (tooltips + aria-label conservés → pas de perte d'info) et l'état d'enregistrement passe en pastille sans texte. Plein écran inchangé (largeur suffisante). Conteneur docké = .ux-atelier-takeover.is-docked (cf sidebar.html:3354). */ .ux-atelier-topbar { gap:7px; } .ux-atelier-topbar .uat-tb-title { flex:1 1 60px; min-width:48px; } .ux-atelier-topbar .uat-tb-done, .ux-atelier-topbar .uat-tb-savestate, .ux-atelier-topbar .uat-tb-iconbtn { flex:0 0 auto; } .ux-atelier-takeover.is-docked .ux-atelier-topbar { gap:5px; padding-left:12px; padding-right:12px; } .ux-atelier-takeover.is-docked .ux-atelier-topbar .uat-tb-modetoggle .doc-mode-btn-label { display:none; } .ux-atelier-takeover.is-docked .ux-atelier-topbar .uat-tb-savestate { max-width:0; overflow:hidden; opacity:0; } /* BUGFIX-PELEMELE-V4 B22.2 — mini-dialogue « quitter l'édition » (3 choix). */ .uat-exit-overlay { position:absolute; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; background:var(--overlay); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); padding:20px; } .uat-exit-dialog { width:100%; max-width:420px; background:var(--surface); color:var(--text-1); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 60px -14px rgba(0,0,0,.55); padding:22px 22px 18px; } .uat-exit-title { margin:0 0 6px; font-size:15px; font-weight:700; color:var(--text-1); } .uat-exit-msg { margin:0 0 18px; font-size:13px; line-height:1.5; color:var(--text-2); } .uat-exit-actions { display:flex; flex-direction:column; gap:8px; } .uat-exit-btn { width:100%; display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; font-size:13px; font-weight:600; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-1); cursor:pointer; transition:filter .15s, background .15s, color .15s; font-family:inherit; } .uat-exit-btn:hover { background:var(--bg); } .uat-exit-btn.uat-exit-primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); } .uat-exit-btn.uat-exit-primary:hover { filter:brightness(1.08); background:var(--accent); } .uat-exit-btn.uat-exit-danger { color:var(--danger-ink); border-color:color-mix(in srgb, var(--danger) 32%, transparent); background:color-mix(in srgb, var(--danger) 8%, transparent); } .uat-exit-btn.uat-exit-danger:hover { background:color-mix(in srgb, var(--danger) 14%, transparent); } /* Panneau historique des versions (overlay du takeover). */ .ux-atelier-takeover .uat-versions { position:absolute; top:54px; right:14px; z-index:60; width:332px; max-height:62vh; overflow:auto; background:var(--surface); color:var(--text-1); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 50px -12px rgba(0,0,0,.4); } .uat-versions-head { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--border); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; } .uat-versions-x { background:transparent; border:none; color:inherit; opacity:.6; cursor:pointer; padding:2px; } .uat-versions-x:hover { opacity:1; } .uat-versions-body { padding:6px; } .uat-versions-empty { font-size:12px; color:var(--text-3); padding:14px; margin:0; line-height:1.5; } .uat-version { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; } .uat-version:hover { background:var(--surface-2); } .uat-version-meta { display:flex; flex-direction:column; gap:1px; min-width:0; } .uat-version-date { font-size:13px; } .uat-version-by { font-size:11px; color:var(--text-3); } .uat-version-restore { flex:0 0 auto; font-size:12px; border:1px solid var(--accent-border); background:var(--accent-dim); color:var(--accent); border-radius:8px; padding:4px 10px; cursor:pointer; } .uat-version-restore:hover { filter:brightness(1.08); } /* DS-2.5.2 — barre d'onglets MIXTES en haut du takeover atelier. Auto-contenue (indépendante du gating ux-shell) + theme-aware (body.light-mode). */ /* Onglets EXACTEMENT identiques à ceux de l'éditeur texte (.doc-v2-tabs-bar / .doc-v2-tab) : même barre #e0e9f3, mêmes onglets 33px / min-width 88px (onglets dimensionnés au contenu — un titre court ne laisse plus de vide). */ .ux-atelier-tabs { display: flex; align-items: flex-end; gap: 2px; flex: 0 0 auto; overflow-x: auto; padding: 4px 6px 0; background: var(--chat-tab-bar-bg); border-bottom: 1px solid var(--chat-tab-bar-border, var(--border)); } .ux-atelier-tabs .uat-tab { display: inline-flex; align-items: center; gap: 7px; height: 33px; min-width: 88px; max-width: 264px; padding: 0 12px 1px 14px; border-radius: 8px 8px 0 0; cursor: pointer; color: var(--chat-tab-text); background: transparent; border: 1px solid transparent; border-bottom: none; font-size: 0.84rem; white-space: nowrap; flex: 0 1 auto; } .ux-atelier-tabs .uat-tab:hover { background: var(--chat-tab-bg-hover); color: var(--chat-tab-text-hover); } .ux-atelier-tabs .uat-tab-active { background: var(--chat-tab-bg-active); color: var(--chat-tab-text-active); margin-bottom: -1px; box-shadow:inset 0 2px 0 var(--cta), 0 -1px 6px -2px rgba(0,0,0,.18); } .ux-atelier-tabs .uat-kind { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--accent); } .ux-atelier-tabs .uat-kind-file { font-size: 9px; font-weight: 700; letter-spacing: .3px; color: var(--text-3); } .ux-atelier-tabs .uat-title { overflow: hidden; text-overflow: ellipsis; } .ux-atelier-tabs .uat-close { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: inherit; opacity: .5; cursor: pointer; padding: 2px; border-radius: 4px; } .ux-atelier-tabs .uat-close:hover { opacity: 1; background: rgba(127,127,127,.2); } /* Bouton « + » IDENTIQUE à celui de l'éditeur texte (.doc-v2-tab-new) : 26×26, aligné en bas comme les onglets, survol surface-2. */ .ux-atelier-tabs .uat-new { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0 0 3px 4px; border: 1px solid transparent; background: none; color: var(--text-3); cursor: pointer; border-radius: 8px; transition: background .15s, color .15s; } .ux-atelier-tabs .uat-new:hover { background: var(--surface-2); color: var(--text-1); } /* ════════════════════════════════════════════════════════════════════════ ATELIER-UX-V2 (2026-07-30) — REFONTE DU MODÈLE MENTAL (Pass 1, surface design). Une SEULE barre de contexte fusionne : (a) l'état lecture⇄édition via la pilule « Aperçu » (retour au viewer), et (b) les onglets des documents ouverts — TOUJOURS visibles (≥1), chacun étiqueté par sa nature (design / texte / format). La topbar est allégée : Titre + statut + Enregistrer + Terminer restent ; les actions secondaires (historique, plein écran, réduire, supprimer, fermer) passent sous un menu « ⋯ ». But : ne jamais perdre l'utilisateur — il voit toujours qu'il édite, ce qui est ouvert, et comment revenir en lecture. ═════════════════════════════ */ /* Apparition fluide (slide-in depuis la droite) — jouée à l'ouverture via la classe .uat-in (reflow-restart posé par le mixin). N'affecte pas l'iframe gardée chaude. */ @keyframes uatSlideIn { from { transform: translateX(14px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .ux-atelier-takeover.is-docked.uat-in { animation: uatSlideIn .18s cubic-bezier(.22,.61,.36,1); } /* Barre de contexte : pilule Aperçu + séparateur + onglets (réutilise le fond/typo de .ux-atelier-tabs défini plus haut). */ .ux-atelier-tabs .uat-ctx-preview { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 27px; margin: 0 0 4px 0; padding: 0 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .ux-atelier-tabs .uat-ctx-preview:hover { color: var(--text-1); background: var(--surface-2); border-color: var(--accent-border); } .ux-atelier-tabs .uat-ctx-preview svg { width: 15px; height: 15px; flex: 0 0 auto; } .ux-atelier-tabs .uat-ctx-div { flex: 0 0 auto; width: 1px; height: 18px; margin: 0 4px 7px; background: var(--border); } /* Étiquette de nature sur chaque onglet (design / texte / .ext) — discrète. */ .ux-atelier-tabs .uat-kindlabel { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-3); opacity: .8; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); } .ux-atelier-tabs .uat-tab-active .uat-kindlabel { color:var(--cta-ink); background: var(--accent-dim); opacity: 1; } /* Menu « ⋯ » (actions secondaires de la topbar allégée). */ .uat-more-wrap { position: relative; flex: 0 0 auto; display: inline-flex; } .uat-more-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; min-width: 208px; padding: 6px; background: var(--surface); color: var(--text-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.4); } .uat-more-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: transparent; color: var(--text-1); font-size: 13px; font-family: inherit; text-align: left; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; } .uat-more-item:hover { background: var(--surface-2); } .uat-more-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-3); } .uat-more-item:hover svg { color: var(--text-1); } .uat-more-item.is-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger-ink); } .uat-more-item.is-danger:hover svg { color: var(--danger-ink); } .uat-more-sep { height: 1px; margin: 5px 6px; background: var(--border); } /* Pass 3 — fine cloison verticale séparant le cluster Enregistrer/Terminer des contrôles de taille (plein écran / réduire en onglet) dans la topbar. */ .ux-atelier-topbar .uat-tb-vsep { flex: 0 0 auto; width: 1px; height: 18px; margin: 0 3px; background: var(--border); } /* Pass 3 — en panneau DOCKÉ étroit (~420px), le retour du toggle + des contrôles plein écran/réduire dans la topbar la faisait déborder. « Terminer » passe en icône seule (coche verte, tooltip conservé) → tout tient sans troncature. Plein écran = largeur suffisante → label « Terminer » visible. */ .ux-atelier-takeover.is-docked .ux-atelier-topbar .uat-tb-done span { display: none; } .ux-atelier-takeover.is-docked .ux-atelier-topbar .uat-tb-done { padding: 5px 7px; } /* ATELIER-UX-V2 Pass 4 — bouton de mode CONTEXTUEL UNIQUE (retour Manu : le toggle 2 états perturbe). Lecture → « Éditer » ; édition → « Aperçu ». TOUJOURS labellisé (jamais d'icône seule). Utilisé à l'identique dans l'atelier (topbar) ET le viewer (.doc-editor-header) → contrôle standardisé et non ambigu. */ .uat-tb-modebtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-1); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .uat-tb-modebtn:hover { background: var(--surface-2); border-color: var(--accent-border); } .uat-tb-modebtn svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); } .doc-mode-single { flex: 0 0 auto; display: inline-flex; align-items: center; } /* En panneau DOCKÉ, on masque l'icône décorative du document (gain de place) pour que le bouton de mode reste TOUJOURS labellisé sans faire déborder la topbar. */ .ux-atelier-takeover.is-docked .ux-atelier-topbar .uat-tb-docicon { display: none; } /* Pass 2 — étiquette de nature sur les onglets de la surface PROSE (.doc-v2-tabs-bar), miroir EXACT de .uat-kindlabel (surface design) → onglets standardisés partout. */ .doc-v2-tabs-bar .doc-v2-tab-kindlabel { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-3); opacity: .8; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); } .doc-v2-tabs-bar .doc-v2-tab-active .doc-v2-tab-kindlabel { color:var(--cta-ink); background: var(--accent-dim); opacity: 1; } @media (max-width: 767.98px) { body.ux-shell .ux-admin-rail { width: 100%; height: 48px; flex-direction: row; padding: 0 10px; border-right: 0; border-bottom: 1px solid var(--border); } body.ux-shell .ux-admin-rail .sidebar-nav-item { margin: 0; } body.ux-shell .ux-admin-takeover { flex-direction: column; } body.ux-shell .ux-admin-rail-home { margin-top: 0; margin-left: auto; } } /* ── AD-4 — Config & formulaires premium — SCOPÉ admin (body.admin-app.ux-shell). Uplift transverse des contrôles partagés (toggle, input/select/textarea, tabs/segmented, cartes config). Accent tokenisé → suit le navy light + l'incognito. Legacy intact. ── */ /* Toggle — accent tokenisé (fin du #00B0F0 en dur), piste plus douce */ body.ux-shell.admin-app .toggle-switch { width: 42px; height: 24px; border-radius: 12px; transition: background .2s, border-color .2s, box-shadow .2s; } body.ux-shell.admin-app .toggle-switch.active { background:var(--cta); border-color:var(--cta); box-shadow: 0 0 14px -4px var(--accent-border); } body.ux-shell.admin-app .toggle-switch::after { width: 18px; height: 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.28); } body.ux-shell.admin-app .toggle-switch.active::after { transform: translateX(18px); } /* Inputs / selects / textarea — focus glow accent tokenisé */ body.ux-shell.admin-app .input-field, body.ux-shell.admin-app input[type="text"], body.ux-shell.admin-app input[type="email"], body.ux-shell.admin-app input[type="number"], body.ux-shell.admin-app input[type="password"], body.ux-shell.admin-app input[type="url"], body.ux-shell.admin-app select, body.ux-shell.admin-app textarea { border-radius: 10px; transition: border-color .15s, box-shadow .15s; } body.ux-shell.admin-app .input-field:focus, body.ux-shell.admin-app input[type="text"]:focus, body.ux-shell.admin-app input[type="email"]:focus, body.ux-shell.admin-app input[type="number"]:focus, body.ux-shell.admin-app input[type="password"]:focus, body.ux-shell.admin-app input[type="url"]:focus, body.ux-shell.admin-app select:focus, body.ux-shell.admin-app textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-border); } /* Tabs — feel segmenté premium */ body.ux-shell.admin-app .tab { font-weight: 500; letter-spacing: .005em; } body.ux-shell.admin-app .tab.active { border-bottom-width: 2px; } /* Cartes config — hover lift discret + bord accent */ body.ux-shell.admin-app .card { transition: border-color .15s, box-shadow .15s; } body.ux-shell.admin-app .card:hover { border-color: var(--accent-border); box-shadow: 0 1px 18px -10px var(--accent-border); } /* Boutons primaires admin — glow accent tokenisé au hover (suit navy/incognito) */ body.ux-shell.admin-app .btn-primary { background: var(--cta); color: var(--cta-fg); } body.ux-shell.admin-app .btn-primary:hover:not(:disabled) { box-shadow: 0 0 20px -6px var(--accent-border), 0 0 0 1px var(--accent-border); } /* Toggle Tailwind peer isolé (MFA, security.html) → accent tokenisé sous ux-shell */ body.ux-shell.admin-app .peer:checked ~ .peer-checked\:bg-blue-500 { background-color: var(--accent) !important; } /* ── LIVE-WORKSPACE-V1 (V0) — Panneau session (slide-over, flag live_workspace_v1) ── Non gated ux-shell : utilise les tokens DS globaux (dark + light auto). */ .lw-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 332px; max-width: 90vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--elev-3, 0 24px 60px -20px rgba(0,0,0,.6)); display: flex; flex-direction: column; animation: lwSlideIn .22s cubic-bezier(.2,.8,.2,1); } @keyframes lwSlideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } } .lw-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px 12px; flex-shrink: 0; border-bottom: 1px solid var(--border); } .lw-head-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-dim, var(--accent-dim)); border: 1px solid var(--accent-border, rgba(var(--accent-rgb), .26)); color: var(--accent, var(--accent)); flex-shrink: 0; } .lw-head-title { font-family: var(--font-display, inherit); font-size: 1.05rem; font-weight: 600; flex: 1; } .lw-head-count { font-size: 11px; font-weight: 600; color: var(--success-ink); background: color-mix(in srgb, var(--success) 12%, transparent); border: 1px solid color-mix(in srgb, var(--success) 26%, transparent); border-radius: 99px; padding: 2px 8px; } .lw-scroll { flex: 1; overflow-y: auto; padding: 4px 0 16px; } .lw-sec { padding: 14px 16px; border-bottom: 1px solid var(--border); } .lw-sec:last-child { border-bottom: none; } .lw-sec-h { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 11px; } .lw-sec-h svg { color: var(--text-3); flex-shrink: 0; } .lw-sec-ct { margin-left: auto; font-size: 10px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px; } .lw-pr { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .lw-pr-av { position: relative; width: 28px; height: 28px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; display: grid; place-items: center; flex-shrink: 0; } .lw-pr-on { position: absolute; bottom: -1px; right: -1px; width: 8px; height: 8px; border-radius: 99px; background: var(--success); border: 2px solid var(--surface); } .lw-pr-info { min-width: 0; } .lw-pr-n { font-size: 13px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lw-pr-s { font-size: 11px; color: var(--text-3); } .lw-file { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: 8px; border: 0; background: none; cursor: pointer; text-align: left; transition: background .12s ease; margin-bottom: 2px; } .lw-file:hover { background: var(--surface-2); } .lw-file-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-dim, var(--accent-dim)); color: var(--accent, var(--accent)); } .lw-file-nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lw-empty { font-size: 12px; line-height: 1.5; color: var(--text-3); padding: 4px 2px; } .lw-empty--cta { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } .lw-cta { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--accent, var(--accent)); background: var(--accent-dim, var(--accent-dim)); border: 1px solid var(--accent-border, rgba(var(--accent-rgb), .26)); border-radius: 8px; padding: 7px 12px; cursor: pointer; transition: background .12s ease; } .lw-cta:hover { background: var(--accent-border); } .lw-add-btn { margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: all .12s ease; } .lw-add-btn:hover { color:var(--accent, var(--cta-ink)); border-color: var(--accent-border, rgba(var(--accent-rgb), .26)); background: var(--accent-dim, var(--accent-dim)); } .lw-sec.lw-dragover { outline: 2px dashed var(--accent, var(--accent)); outline-offset: -5px; background: var(--accent-dim, var(--accent-dim)); border-radius: 10px; } /* ── LW0.1 — Dock persistant (colonne droite, ≥1024px) ── */ .lw-panel--docked { position: fixed; top: calc(var(--topbar-total, 56px) + 36px); right: 0; bottom: 0; left: auto; width: 332px; max-width: 38vw; z-index: 55; box-shadow: -8px 0 32px rgba(0,0,0,.22); } @media (min-width: 1024px) { /* Pousse le composer (position:absolute;right:0) pour qu'il ne passe pas sous le dock — pattern .learn-rail-docked. */ body:has(.lw-panel--docked) .input-area-v2 { padding-right: 332px; transition: padding-right .18s ease; } /* Évite la superposition avec les autres panneaux right-dock. */ body:has(.lw-panel--docked) .naix-card.naix-docked, body:has(.lw-panel--docked) .help-panel, body:has(.lw-panel--docked) .doc-editor-panel, body:has(.lw-panel--docked) .panel-templates, body:has(.lw-panel--docked) .panel-automations, body:has(.lw-panel--docked) .learn-rail-docked { right: 332px !important; } } /* Bouton « + » du rail = carré cyan plein (maquette #30 .rail .plus). */ /* Retour de Manu (2026-08-25) : le « + » n'est plus un aplat permanent. Un aplat colore en permanence dans un rail attire l'oeil sans arret et affaiblit les autres etats actifs. Il devient neutre au repos, et ne s'allume qu'au survol, au focus et quand il est selectionne. */ body.ux-shell .sidebar-nav-item.ux-rail-new, body.ux-shell .sidebar-nav-item.ux-rail-primary { /* Pave plein a la couleur du SIGNE (retour Manu). --mark est neutre : il donne du rang au bouton sans en faire un signal, ce que --cta reserve aux etats. L'encre bascule de camp selon le theme, d'ou --mark-fg : sur le signe clair du theme sombre il faut de l'anthracite (8,03), sur le signe fonce du theme clair il faut du blanc (11,20). Pas de contour : le survol devient un simple changement de teinte sur la meme forme, au lieu d'un contour qui apparait — la transition etait jugee bizarre en sombre. */ background: var(--mark) !important; color: var(--mark-fg) !important; border: none !important; box-shadow: none !important; transition: background .18s ease, color .18s ease; } body.ux-shell .sidebar-nav-item.ux-rail-new:hover, body.ux-shell .sidebar-nav-item.ux-rail-new:focus-visible, body.ux-shell .sidebar-nav-item.ux-rail-new.active, body.ux-shell .sidebar-nav-item.ux-rail-new[aria-expanded="true"], body.ux-shell .sidebar-nav-item.ux-rail-primary:hover, body.ux-shell .sidebar-nav-item.ux-rail-primary:focus-visible { /* Le survol reste dans la famille du SIGNE : si le bouton porte --mark au repos, le faire virer au bleu introduirait une couleur etrangere a ce qu'il represente. --mark-hover est un cran plus profond en clair, un cran plus clair en sombre. */ background: var(--mark-hover) !important; color: var(--mark-fg) !important; box-shadow: 0 4px 14px -4px rgba(var(--cta-rgb), 0.45) !important; } body.ux-shell .sidebar-nav-item.ux-rail-new svg, body.ux-shell .sidebar-nav-item.ux-rail-primary svg { stroke-width: 2.2; } /* Light : boutons primaires remplis = NAVY (#1F4E79), comme la maquette (direction validée Manu). Le cyan reste pour les accents/états actifs. */ body.light-mode.ux-shell .sidebar-nav-item.ux-rail-new, body.light-mode.ux-shell .sidebar-nav-item.ux-rail-primary { background: var(--accent) !important; color: var(--accent-fg) !important; box-shadow: 0 4px 14px -5px rgba(var(--accent-rgb), 0.45) !important; } /* Croix blanche à l'intérieur du + navy (le SVG n'héritait pas du color). */ body.light-mode.ux-shell.ux-shell .sidebar-nav-item.ux-rail-new svg, body.light-mode.ux-shell.ux-shell .sidebar-nav-item.ux-rail-primary svg { stroke: #fff !important; color: #fff !important; } body.ux-shell.ux-shell .sidebar-nav-item.ux-rail-new svg { stroke: currentColor; } /* HOVER : garder le navy. La règle de base utilise un ID (#app-sidebar … button:hover) qui battait mes classes → on repasse par #app-sidebar pour gagner en spécificité. */ body.light-mode.ux-shell #app-sidebar .sidebar-nav-item.ux-rail-new:hover, body.light-mode.ux-shell #app-sidebar .sidebar-nav-item.ux-rail-primary:hover { background: var(--mark-hover) !important; color: var(--mark-fg) !important; } body.light-mode.ux-shell #app-sidebar .sidebar-nav-item.ux-rail-new:hover svg { stroke: var(--mark-fg) !important; } /* Ancree sur #app-sidebar, donc plus specifique que la regle de base : elle retablissait --accent-hover et le trait blanc tombait a 1,79 dessus. */ body.ux-shell #app-sidebar .sidebar-nav-item.ux-rail-new:hover { background: var(--mark-hover) !important; color: var(--mark-fg) !important; } body.ux-shell #app-sidebar .sidebar-nav-item.ux-rail-new:hover svg { stroke: var(--mark-fg) !important; } body.light-mode.ux-shell.ux-shell .send-btn-v2, body.light-mode.ux-shell.ux-shell .naix-home-input-send, body.light-mode.ux-shell.ux-shell .settings-btn-primary, body.light-mode.ux-shell.ux-shell .attach-offer-btn-primary, body.light-mode.ux-shell.ux-shell .proj-onboarding-btn-primary, body.light-mode.ux-shell.ux-shell .proj-conn-setup-btn-primary, body.light-mode.ux-shell.ux-shell .proj-conn-imap-submit { background: var(--cta) !important; border-color: var(--cta) !important; color: var(--cta-fg) !important; } body.light-mode.ux-shell.ux-shell .send-btn-v2:hover:not(:disabled), body.light-mode.ux-shell.ux-shell .naix-home-input-send:hover { background: var(--cta-hover) !important; } /* ── ONGLETS façon maquette : accent cyan en HAUT (au lieu de la barre gauche) + respiration + DÉSENCOMBREMENT (inactifs mutés → la barre se calme, l'actif ressort comme une carte ; cap #1 « strip d'onglets »). ── */ body.ux-shell .topbar2-wrapper { height: 38px; } /* FIX 2026-06-26 (Manu) — barre d'onglets cassée après aller/retour éditeur de texte : plusieurs chemins de fermeture (closeDocStudioStart, goHome…) laissent sidebarOpen=false, et le binding inline `left` du wrapper retombe alors à 0 → la barre d'onglets passe SOUS le rail (cf. capture). En coquille le rail fait toujours 64px (le panneau étendu est un overlay, le contenu ne décale jamais), donc le `left` au repos vaut invariablement 64px sur desktop. On le garantit en CSS (source de vérité, immunisé contre l'état JS) plutôt que de patcher chaque chemin de fermeture. Mobile (<768px) garde le binding (0). */ @media (min-width: 768px) { body.ux-shell .topbar2-wrapper { left: var(--ux-rail-w, 64px) !important; } } body.ux-shell .chat-tab { gap: 7px; min-width: 132px !important; padding: 0 11px 0 13px !important; opacity: .55; transition: opacity .15s ease, background .12s ease, color .12s ease; } body.ux-shell .chat-tab:hover { opacity: .85; } /* REFONTE-UX (2026-06-26) — Barre mobile « maquette mobile-refonte-v1 » : 5 slots Accueil · Historique · ＋(FAB central) · Outils · Naix. Cibles 48px, safe-area. FAB = cercle accent surélevé (centre). Coquille + mobile only. */ body.ux-shell .ux-mnav .mobile-nav-btn { min-height: 48px; } body.ux-shell .ux-mnav .mnav-fab { flex: 0 0 66px; } /* MATIERE DE L'ACTION PRINCIPALE (2026-08-30) — retour Manu : « le bouton + est en bleu, il faudrait une couleur coherente avec le theme ». Il prenait --cta avec un halo bleu sature : c'etait le seul aplat colore de l'ecran telephone, et il ne se rattachait a rien. Or la charte a deja une reponse : le bouton d'ENVOI, l'autre action principale, porte --mark. Les deux gestes sont de meme rang — « demarrer une conversation » et « envoyer » — ils doivent donc porter la meme matiere. --mark est theme-aware par construction (blanc casse en sombre, quasi noir en clair) : une seule regle suffit, la surcharge du theme clair disparait. L'ombre passe en neutre : un halo colore reintroduisait la couleur par la bande, alors que c'est precisement ce qu'on retire. */ body.ux-shell .ux-mnav .mnav-fab .mnav-fab-circle { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; margin: -22px auto 0; background: var(--mark); color: var(--mark-fg); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55); transition: transform .12s ease; } /* MAJ 2026-09-16 (retour Manu) — EN CLAIR SEULEMENT, le « + » passe au bleu de la charte, comme le bouton d'envoi (jeton --send, shared.css) : les deux gestes de meme rang gardent la meme matiere, et cette matiere est desormais --cta. Ce n'est pas le retour du defaut corrige le 2026-08-30 : ce jour-la le bouton portait --cta AVEC un halo bleu sature qui en faisait le seul aplat colore isole de l'ecran ; l'ombre reste donc neutre, seule la surface change. Le sombre ne bouge pas : --mark y vaut un blanc casse, juste sur le fond noir et coherent avec le bouton d'envoi, qui y garde --mark lui aussi. */ body.light-mode.ux-shell .ux-mnav .mnav-fab .mnav-fab-circle { background: var(--cta); color: var(--cta-fg); } body.ux-shell .ux-mnav .mnav-fab:active .mnav-fab-circle { transform: scale(.94); } body.ux-shell .ux-mnav .mnav-fab .mnav-fab-circle svg { width: 24px; height: 24px; } /* ═══ Studio Audio — Orb « maquette » (audio-studio-refonte-v1, 2026-06-26) ═══ Sphère réfractée + aura + anneau conique rotatif + ondes émises + égaliseur, piloté par l'état (idle/listening/thinking/speaking). DOM/CSS — remplace le canvas plat sous la coquille pour matcher le prototype validé. Light = nacre. */ .nco-stage { position: absolute; inset: 0; display: grid; place-items: center; } .nco-stage > * { position: absolute; border-radius: 50%; } .nco-aura { width: 200px; height: 200px; background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .05) 52%, transparent 72%); filter: blur(20px); animation: ncoAura 8s cubic-bezier(.2,.8,.2,1) infinite; opacity: .7; } .nco-ring { width: 160px; height: 160px; background: conic-gradient(from 0deg, transparent 0deg, transparent 268deg, rgba(160,228,255,.6) 340deg, rgba(160,228,255,0) 360deg); -webkit-mask: radial-gradient(circle, transparent 67.5%, #000 68.5%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 67.5%, #000 68.5%, #000 70%, transparent 71%); animation: ncoSpin 22s linear infinite; opacity: .85; } .nco-ring.nco-r2 { background: none; border: 1px solid rgba(255,255,255,.06); -webkit-mask: none; mask: none; animation: none; opacity: 1; filter: none; } .nco-wave { width: 104px; height: 104px; border: 1px solid rgba(160,228,255,.35); opacity: 0; } .nco-core { width: 104px; height: 104px; background: radial-gradient(circle at 50% 50%, #0e2c44, #061626 72%); box-shadow: inset 0 1px 1px rgba(255,255,255,.10), inset 0 -16px 36px rgba(0,0,0,.55), 0 18px 50px -16px rgba(var(--accent-rgb), .34), 0 0 0 1px rgba(255,255,255,.05); animation: ncoCore 5s cubic-bezier(.2,.8,.2,1) infinite; overflow: hidden; } .nco-core::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 56%, rgba(var(--accent-rgb), .42), transparent 58%); opacity: .45; animation: ncoGlow 4.5s ease-in-out infinite; } .nco-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.11), transparent 30%); opacity: .7; } .nco-bars { display: flex; gap: 4px; align-items: center; height: 40px; border-radius: 0; } .nco-bars span { position: relative; width: 3px; height: 11px; border-radius: 99px; background: linear-gradient(rgba(198,238,255,.92), rgba(var(--accent-rgb), .55)); } /* PAROLE */ .nco-stage.speaking .nco-bars span:nth-child(1) { animation: ncoEq .9s ease-in-out infinite; } .nco-stage.speaking .nco-bars span:nth-child(2) { animation: ncoEq .7s ease-in-out infinite .1s; } .nco-stage.speaking .nco-bars span:nth-child(3) { animation: ncoEq 1.1s ease-in-out infinite .05s; } .nco-stage.speaking .nco-bars span:nth-child(4) { animation: ncoEq .6s ease-in-out infinite .15s; } .nco-stage.speaking .nco-bars span:nth-child(5) { animation: ncoEq .85s ease-in-out infinite .08s; } .nco-stage.speaking .nco-wave { animation: ncoEmit 1.8s ease-out infinite; } .nco-stage.speaking .nco-wave.nco-w2 { animation-delay: .6s; } .nco-stage.speaking .nco-wave.nco-w3 { animation-delay: 1.2s; } .nco-stage.speaking .nco-core { animation: ncoCore 1.1s cubic-bezier(.2,.8,.2,1) infinite; } .nco-stage.speaking .nco-aura { animation-duration: 2.4s; opacity: 1; } /* ÉCOUTE */ .nco-stage.listening .nco-bars span:nth-child(1) { animation: ncoListen 1.6s ease-in-out infinite; } .nco-stage.listening .nco-bars span:nth-child(2) { animation: ncoListen2 1.6s ease-in-out infinite; } .nco-stage.listening .nco-bars span:nth-child(3) { animation: ncoListen3 1.6s ease-in-out infinite; } .nco-stage.listening .nco-bars span:nth-child(4) { animation: ncoListen2 1.6s ease-in-out infinite; } .nco-stage.listening .nco-bars span:nth-child(5) { animation: ncoListen 1.6s ease-in-out infinite; } .nco-stage.listening .nco-core { animation: ncoCore 3s cubic-bezier(.2,.8,.2,1) infinite; } .nco-stage.listening .nco-aura { opacity: 1; } /* RÉFLEXION */ .nco-stage.thinking .nco-bars span { animation: ncoThink 1.4s ease-in-out infinite; } .nco-stage.thinking .nco-bars span:nth-child(2) { animation-delay: .12s; } .nco-stage.thinking .nco-bars span:nth-child(3) { animation-delay: .24s; } .nco-stage.thinking .nco-bars span:nth-child(4) { animation-delay: .36s; } .nco-stage.thinking .nco-bars span:nth-child(5) { animation-delay: .48s; } .nco-stage.thinking .nco-core { animation: ncoCore 1.6s cubic-bezier(.2,.8,.2,1) infinite; } /* REPOS */ .nco-stage.idle .nco-bars span { animation: ncoRest 3s ease-in-out infinite; } .nco-stage.idle .nco-aura { animation-duration: 7s; opacity: .6; } @keyframes ncoSpin { to { transform: rotate(360deg); } } @keyframes ncoAura { 0%,100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.05); opacity: .8; } } @keyframes ncoCore { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } } @keyframes ncoGlow { 0%,100% { opacity: .35; } 50% { opacity: .7; } } @keyframes ncoEq { 0%,100% { height: 9px; } 50% { height: 28px; } } @keyframes ncoThink { 0%,12%,100% { height: 6px; opacity: .4; } 45% { height: 22px; opacity: 1; } } @keyframes ncoRest { 0%,100% { height: 5px; opacity: .4; } 50% { height: 9px; opacity: .7; } } @keyframes ncoListen { 0%,100% { height: 6px; } 50% { height: 12px; } } @keyframes ncoListen2 { 0%,100% { height: 6px; } 50% { height: 18px; } } @keyframes ncoListen3 { 0%,100% { height: 6px; } 50% { height: 28px; } } @keyframes ncoEmit { 0% { width: 104px; height: 104px; opacity: .32; } 100% { width: 184px; height: 184px; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .nco-aura, .nco-ring, .nco-core, .nco-core::before, .nco-bars span, .nco-wave { animation: none !important; } } /* Light — sphère nacrée + accents navy */ body.light-mode .nco-aura { background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .07) 52%, transparent 72%); opacity: .6; } body.light-mode .nco-ring { background: conic-gradient(from 0deg, transparent 0deg, transparent 268deg, rgba(var(--accent-rgb), .42) 340deg, rgba(var(--accent-rgb), 0) 360deg); opacity: .7; } body.light-mode .nco-ring.nco-r2 { border-color: var(--accent-dim); } body.light-mode .nco-core { background: radial-gradient(circle at 50% 36%, #ffffff, #e6f1fb 50%, #c4daed 100%); box-shadow: inset 0 2px 3px rgba(255,255,255,.95), inset 0 -16px 34px rgba(var(--accent-rgb), .15), 0 20px 50px -18px rgba(var(--accent-rgb), .4), 0 0 0 1px var(--accent-dim); } body.light-mode .nco-core::before { background: radial-gradient(circle at 50% 60%, rgba(var(--accent-rgb), .4), transparent 60%); opacity: .4; } body.light-mode .nco-core::after { background: linear-gradient(180deg, rgba(255,255,255,.8), transparent 34%); opacity: .9; } body.light-mode .nco-bars span { background: linear-gradient(rgba(var(--accent-rgb), .95), rgba(0,150,204,.7)); } body.light-mode .nco-wave { border-color: rgba(var(--accent-rgb), .26); } body.ux-shell .chat-tab.ctab-active { opacity: 1; } body.ux-shell .ctab-title { font-size: .8rem; } /* LIGHT : pas de mute par opacité (le texte clair deviendrait illisible) — on garde l'opacité pleine et on distingue par la COULEUR : inactif gris lisible, actif navy + gras. Retour Manu : onglets illisibles en light. */ body.light-mode.ux-shell.ux-shell .chat-tab { opacity: 1 !important; } body.light-mode.ux-shell.ux-shell .chat-tab .ctab-title { color: var(--text-2) !important; } body.light-mode.ux-shell.ux-shell .chat-tab:hover .ctab-title { color: var(--text-1) !important; } body.light-mode.ux-shell.ux-shell .chat-tab.ctab-active .ctab-title { color: var(--text-1) !important; font-weight: 600 !important; } /* Actif : accent cyan VERTICAL à GAUCHE (comme l'ancienne version, retour Manu 2026-06-26), plus de barre horizontale en haut qui « détachait » l'onglet de la page. */ body.ux-shell .chat-tab.ctab-active::before { left: 0 !important; right: auto !important; top: 0 !important; bottom: 0 !important; width: 3px !important; height: auto !important; transform: none !important; background: var(--chat-tab-accent) !important; border-radius: 0 !important; } /* Bulle utilisateur — neutre (prototype) au lieu du tint cyan */ body.ux-shell.ux-shell .message-bubble-user { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; color: var(--text-1) !important; box-shadow: none !important; } body.ux-shell.ux-shell.light-mode .message-bubble-user { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-1) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; } /* ── Coquille Panel (base — étendue en F3) ────────────────────────────── */ .ds-panel{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--surface)} .ds-panel__hd{display:flex;align-items:center;gap:var(--sp-3);padding:13px 14px; border-bottom:1px solid var(--border);flex-shrink:0} .ds-panel__hd b{font-size:var(--fz-md);font-weight:600;color:var(--text-1)} .ds-panel__body{flex:1;overflow-y:auto;min-height:0} /* ════════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 F4 — Éditeur document : barre unique v3 (flag ux_shell_v1) Maquette : design-system/explorations/doc-editor-refonte-v3.html "Une seule barre" : 3 suggestions arrondies + ⋯, UNE commande avec le sélecteur de mode (Modifier/Discuter) intégré à gauche + ligne d'aide. ════════════════════════════════════════════════════════════════════════ */ body.ux-shell .doc-editor-footer { padding: 10px 14px 14px; } /* Suggestions → pills arrondies (chips v3) */ body.ux-shell .doc-quick-row { padding: 0 0 2px; gap: 7px; flex-wrap: wrap; } body.ux-shell .doc-quick-chip { border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 500; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); } body.ux-shell .doc-quick-chip:hover { color: var(--text-1); border-color: var(--accent-border); background: var(--surface-2); } body.ux-shell .doc-quick-chip svg { color: var(--text-3); } body.ux-shell .doc-quick-chip-primary { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); } body.ux-shell .doc-quick-chip-primary:hover { background: var(--accent-dim); color:var(--cta-ink); } body.ux-shell .doc-quick-chip-primary svg { color: var(--accent); } body.ux-shell .doc-quick-more-btn { border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 500; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); } body.ux-shell .doc-quick-more-btn:hover { color: var(--text-1); border-color: var(--accent-border); } /* Commande unique (ed-cmd v3) */ body.ux-shell .doc-ai-input-row { gap: 10px; padding: 9px 11px; border-radius: 15px; margin: 10px 0 0; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px -16px rgba(0,0,0,.5); } body.ux-shell .doc-ai-input-row:focus-within { border-color: var(--accent-border); } body.ux-shell .doc-ai-icon { display: none; } /* remplacé par le sélecteur de mode */ body.ux-shell .doc-ai-input { font-size: 13px; padding: 6px 0; } body.ux-shell .doc-ai-send { width: 32px; height: 32px; padding: 0; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); } /* Sélecteur de mode intégré (Modifier/Discuter) */ body.ux-shell .doc-mode-pill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: 8px; padding: 6px 10px; transition: filter .15s, background .15s; } body.ux-shell .doc-mode-pill:hover { filter: brightness(1.08); } body.ux-shell .doc-mode-pill svg { width: 13px; height: 13px; flex-shrink: 0; } body.ux-shell .doc-mode-pill .doc-mode-caret { width: 10px; height: 10px; opacity: .75; } /* Ligne d'aide sous la commande */ body.ux-shell .doc-mode-hint { padding: 7px 2px 0; font-size: 11px; color: var(--text-3); line-height: 1.45; } body.ux-shell .doc-mode-hint b { color: var(--text-2); font-weight: 600; } /* Le segment Modifier/Discuter autonome est remplacé par le pill intégré */ body.ux-shell .doc-input-mode-seg { display: none !important; } body.ux-shell .doc-mode-toggle { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; } body.ux-shell .doc-mode-btn { /* display+gap+svg explicites : le styling de base (.doc-mode-btn) est mobile-only (@media max-width:1023.98px) → sur desktop l'icône n'était ni dimensionnée ni espacée et chevauchait le libellé (Aperçu/Éditer). On le fixe ici, valable à toutes largeurs. */ display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; padding: 5px 12px; border-radius: 6px; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); } body.ux-shell .doc-mode-btn svg { width: 14px; height: 14px; flex-shrink: 0; } body.ux-shell .doc-mode-btn .doc-mode-btn-label { display: inline; } /* Header panneau doc = contexte de container query : quand le panneau est étroit (docké), le toggle repasse en icône seule (labels masqués) pour éviter le chevauchement des contrôles d'en-tête (expand/kebab/minimize/close). Large/plein écran → labels visibles. */ body.ux-shell .ux-docpanel-head { container-type: inline-size; } @container (max-width: 600px) { body.ux-shell .doc-mode-btn .doc-mode-btn-label { display: none; } body.ux-shell .doc-mode-btn { padding: 5px 8px; } } body.ux-shell .doc-mode-btn.active { background: var(--accent-dim); color:var(--cta-ink); box-shadow: inset 0 0 0 1px var(--accent-border); } body.ux-shell .doc-mode-btn.active svg { color:var(--cta-ink); } /* ════════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 F6 — Mails : footer drawer (CTA Pro Mode + confiance) + bandeau confiance Pro Mode (maquette mails-refonte-v1.html). flag ux_shell_v1. ════════════════════════════════════════════════════════════════════════ */ body.ux-shell .ws-mails-drawer-footer { flex-shrink: 0; margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); } body.ux-shell .ws-mails-pro-cta { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: 10px; padding: 9px 12px; transition: filter .15s, background .15s; } body.ux-shell .ws-mails-pro-cta:hover { filter: brightness(1.06); } body.ux-shell .ws-mails-pro-cta svg { width: 16px; height: 16px; } /* Bandeau confiance (souveraineté véridique : hébergement France + RGPD) */ body.ux-shell .ws-sovereign-footer { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); line-height: 1.3; } body.ux-shell .ws-sovereign-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--success); flex-shrink: 0; } body.ux-shell .mails-pro-sovereign-footer { margin-top: auto; padding: 12px 14px; flex-shrink: 0; } /* REFONTE-UX-V1 F6 — carte Résumé Pro Mode (maquette mails-refonte-v1 .ai-card). Apparaît après clic « Résumer ce mail » (pas d'appel auto). flag ux_shell_v1. */ body.ux-shell .mails-pro-summary-card { margin: 12px 12px 4px; padding: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } body.ux-shell .mails-pro-summary-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } body.ux-shell .mails-pro-summary-text { font-size: 13px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; } body.ux-shell .mails-pro-summary-loading { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); } body.ux-shell .mails-pro-summary-error { font-size: 12px; color: var(--text-3); } /* REFONTE-UX-V1 F4 — FUSION HEADER éditeur : la 2ᵉ barre (.doc-editor-header) est masquée ; ses contrôles (Aperçu/Modifier + type + actions) remontent dans le header de panneau unique. flag ux_shell_v1. */ body.ux-shell .doc-editor-header { display: none !important; } body.ux-shell .doc-fused-head-controls { /* flex-shrink:0 (2026-07-19) : les contrôles Aperçu/Éditer + badge type ne doivent JAMAIS rétrécir/chevaucher — c'est le TITRE (flex-1 + .truncate) qui absorbe le manque de place en s'ellipsant. Sans ça, à panneau étroit le titre poussait par-dessus la bascule et les actions (bandeau file-preview). */ display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; flex-shrink: 0; flex-wrap: nowrap; } /* ════════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 F6 → CORRECTION 2026-06-27 — Pro Mode mails : header UNIQUE. F6 avait RÉAFFICHÉ .mails-pro-header en partant du principe que « sous ux-shell la topbar Netaix est retirée ». Ce n'est PLUS vrai : la topbar ux-shell affiche le contexte Pro via .topbar-pro-context (sidebar.html, bouton Retour + titre Mails + badge + sync). Garder .mails-pro-header visible créait donc un DOUBLON de header (signalé Manu, prod). On masque donc .mails-pro-header sous ux-shell : la topbar fournit l'unique header. Specificité (0,3,0) avec !important pour gagner sur la base .mails-pro-header. ════════════════════════════════════════════════════════════════════════ */ body.ux-shell.mails-pro-active .mails-pro-header { display: none !important; } /* ════════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 — Onglets thread « carte arrondie » (maquette, validé Manu) + différenciation Incognito violet cohérente (maquette incognito-refonte-v1). flag ux_shell_v1. ════════════════════════════════════════════════════════════════════════ */ /* Onglets — forme EXACTE de la maquette (validé Manu) : l'onglet actif = carte à coins-haut arrondis, SANS bordure outline, distinguée par (a) un fond teinté (accent-dim) et (b) un HIGHLIGHT en haut (`inset 0 2px 0 accent`), bas fusionné au contenu (margin-bottom:-1px). Incognito = même forme en violet. */ /* Pas de barre horizontale sous les onglets : l'onglet actif fusionne avec la page (retour Manu 2026-06-26). La distinction barre/contenu reste via la teinte de fond. */ body.ux-shell .topbar2-wrapper { border-bottom: none; } body.ux-shell .chat-tab { border-radius: 9px 9px 0 0; border: none; height: 32px; margin: 0 1px -1px; padding-bottom: 0; align-self: flex-end; transition: background .14s, color .14s, box-shadow .14s; } body.ux-shell .chat-tab:hover:not(.ctab-active) { background: var(--chat-tab-bg-hover); } /* Onglet actif = fond contenu (blanc light / surface dark) qui « sort » de la barre + filet accent sur le dessus → vrai look onglet navigateur premium, nettement distinct des onglets inactifs (transparents). */ body.ux-shell .chat-tab.ctab-active { background: var(--chat-tab-bg-active); color: var(--chat-tab-text-active); /* Surbrillance = barre cyan VERTICALE à gauche via ::before (rectangle droit). Un inset box-shadow sur coin arrondi 9px produisait une « double courbe » parasite — retour Manu. */ box-shadow: 0 -1px 6px -2px rgba(0,0,0,.22); z-index: 2; } body.light-mode.ux-shell .chat-tab.ctab-active { box-shadow: 0 -2px 8px -3px var(--accent-border); } body.ux-shell .chat-tab.ctab-active::before { content: '' !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important; width: auto !important; height: 3px !important; transform: none !important; background: var(--chat-tab-accent) !important; border-radius: 9px 9px 0 0 !important; } body.ux-shell .chat-tab.ctab-incognito.ctab-active::before { background: var(--incognito-hi) !important; } /* Onglet Incognito = même forme, violet (highlight violet + fond violet) */ body.ux-shell .chat-tab.ctab-incognito.ctab-active { background: rgba(var(--incognito-hi-rgb),.14) !important; box-shadow: 0 -1px 6px -2px rgba(0,0,0,.22) !important; /* accent violet via ::before */ } body.ux-shell .chat-tab.ctab-incognito .ctab-title { color: var(--incognito-ink) !important; } body.light-mode.ux-shell .chat-tab.ctab-incognito.ctab-active { background: rgba(var(--incognito-hi-rgb),.10) !important; box-shadow: 0 -2px 8px -3px var(--accent-dim) !important; } body.light-mode.ux-shell .chat-tab.ctab-incognito .ctab-title { color: var(--incognito-ink) !important; } /* Onglets de l'ÉDITEUR de documents (.doc-v2-tab) — exactement la même forme. */ body.ux-shell .doc-v2-tabs-bar { background: var(--chat-tab-bar-bg) !important; border-bottom: 1px solid var(--border) !important; align-items: flex-end !important; padding: 4px 4px 0 !important; } body.ux-shell .doc-v2-tab { border-radius: 9px 9px 0 0 !important; border: none !important; background: transparent !important; color: var(--chat-tab-text) !important; margin: 0 1px -1px !important; padding: 8px 11px !important; } body.ux-shell .doc-v2-tab:hover:not(.doc-v2-tab-active) { background: var(--chat-tab-bg-hover) !important; color: var(--chat-tab-text-hover) !important; } body.ux-shell .doc-v2-tab-active { background: var(--chat-tab-bg-active) !important; color: var(--chat-tab-text-active) !important; box-shadow:inset 0 2px 0 var(--cta), 0 -1px 6px -2px rgba(0,0,0,.22) !important; z-index: 2; } body.light-mode.ux-shell .doc-v2-tab-active { box-shadow:inset 0 2px 0 var(--cta), 0 -2px 8px -3px var(--accent-border) !important; } /* Aura coquille incognito — calmée : liseré fin + halo doux (plus de pulse lourde) */ body.ux-shell .session-aura.incognito-active { box-shadow: inset 0 0 0 1.5px rgba(var(--incognito-hi-rgb),.42), inset 0 0 90px -34px rgba(var(--incognito-deep-rgb),.40), 0 0 70px -34px rgba(var(--incognito-deep-rgb),.40) !important; animation: none !important; } body.light-mode.ux-shell .session-aura.incognito-active { box-shadow: inset 0 0 0 1.5px rgba(var(--incognito-hi-rgb),.42), 0 0 60px -30px rgba(var(--incognito-hi-rgb),.28) !important; animation: none !important; } /* Bandeau incognito — calmé, cohérent */ body.ux-shell .incognito-banner { background: linear-gradient(90deg, rgba(var(--incognito-hi-rgb),.14), transparent) !important; border-top: 1px solid rgba(var(--incognito-hi-rgb),.34) !important; border-bottom: 1px solid rgba(var(--incognito-hi-rgb),.34) !important; box-shadow: none !important; color: var(--incognito-ink) !important; } body.light-mode.ux-shell .incognito-banner { background: linear-gradient(90deg, rgba(var(--incognito-hi-rgb),.10), transparent) !important; border-top-color: rgba(var(--incognito-hi-rgb),.30) !important; border-bottom-color: rgba(var(--incognito-hi-rgb),.30) !important; color: var(--incognito-ink) !important; } /* Composer cerclé violet quand une session incognito est active */ body.ux-shell:has(.session-aura.incognito-active) .input-block-v2-inner { border-color: rgba(var(--incognito-hi-rgb),.42) !important; box-shadow: 0 0 0 1px rgba(var(--incognito-hi-rgb),.30), 0 14px 40px -24px rgba(var(--incognito-deep-rgb),.45) !important; } body.light-mode.ux-shell:has(.session-aura.incognito-active) .input-block-v2-inner { border-color: rgba(var(--incognito-hi-rgb),.40) !important; box-shadow: 0 0 0 1px rgba(var(--incognito-hi-rgb),.22), 0 14px 40px -24px rgba(var(--incognito-hi-rgb),.30) !important; } /* Bouton Incognito du composer — toggle libellé, état clair */ /* doublé .ux-shell.ux-shell + !important : bat la règle générique des boutons du composer qui forçait width:30px (icône seule) → le libellé débordait sur le micro. */ body.ux-shell.ux-shell .ux-inc-btn { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; height: auto !important; flex: 0 0 auto !important; white-space: nowrap !important; min-width: max-content !important; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin: 0 4px; cursor: pointer; transition: color .15s, border-color .15s, background .15s, box-shadow .15s; } body.ux-shell .ux-inc-btn:hover { color: var(--text-1); border-color: var(--text-3); } body.ux-shell .ux-inc-btn svg { width: 15px; height: 15px; flex-shrink: 0; } body.ux-shell .ux-inc-btn-on { color: #fff; background: linear-gradient(135deg, var(--incognito-deep), var(--incognito-hi)); border-color: transparent; box-shadow: 0 6px 18px -8px rgba(var(--incognito-deep-rgb),.55); } body.ux-shell .ux-inc-btn-on:hover { color: #fff; } /* REFONTE-UX-V1 — fond « partout » dark (retour Manu) : le rail gauche + le dock droit RECULENT (navy le plus profond, comme le rail de la maquette = --bg-2 #0e131c) au lieu de ressortir en surface claire (#1b2330). Cohérence totale avec le centre (gradient navy). Light inchangé. */ body.ux-shell:not(.light-mode) #app-sidebar { background: var(--bg) !important; } body.ux-shell:not(.light-mode) .ws-dock { background: var(--bg) !important; } /* ════════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 — Éditeur DÉSATURÉ (retour Manu « ultra saturé », 2026-06-23) Refactor propre : le chrome de l'éditeur passe en NEUTRE (surface + texte clair) ; l'accent cyan est RÉSERVÉ au seul bouton d'envoi (le CTA). Plus de cyan-fill / cyan-text / cyan-border répétés sur Aperçu·Éditer·Discuter· PDF/HTML·suggestion-primaire. flag ux_shell_v1. ════════════════════════════════════════════════════════════════════════ */ /* Segment Aperçu/Éditer : conteneur neutre, actif = carte surélevée neutre */ body.ux-shell .doc-mode-toggle { background: var(--bg) !important; border: 1px solid var(--border) !important; } body.ux-shell .doc-mode-btn { color: var(--text-3) !important; } body.ux-shell .doc-mode-btn:hover { color: var(--text-1) !important; } body.ux-shell .doc-mode-btn.active { background: var(--surface-2) !important; color: var(--text-1) !important; box-shadow: none !important; } body.ux-shell .doc-mode-btn.active svg { color: var(--text-1) !important; } /* Sélecteur de mode Discuter/Modifier : neutre (était cyan-dim) */ body.ux-shell .doc-mode-pill { background: var(--surface-2) !important; color: var(--text-1) !important; border: 1px solid var(--border) !important; } body.ux-shell .doc-mode-pill svg, body.ux-shell .doc-mode-pill .doc-mode-caret { color: var(--text-2) !important; } /* Toggle PDF/HTML : neutre */ body.ux-shell .doc-editor-pdfhtml-toggle { background: var(--surface-2) !important; color: var(--text-2) !important; border-color: var(--border) !important; } body.ux-shell .doc-editor-pdfhtml-toggle svg { color: var(--text-3) !important; } body.ux-shell .doc-editor-pdfhtml-toggle.is-html { color: var(--text-1) !important; } /* Suggestion « primaire » : plus de pastille cyan saillante → neutre comme les autres */ body.ux-shell .doc-quick-chip-primary { background: var(--surface-2) !important; color: var(--text-1) !important; border-color: var(--border) !important; } body.ux-shell .doc-quick-chip-primary svg { color: var(--text-2) !important; } /* Badge type (Document) : neutre confirmé */ body.ux-shell .doc-kind-badge { color: var(--text-2) !important; } body.ux-shell .doc-kind-badge svg { color: var(--text-3) !important; } /* L'unique accent : le bouton d'envoi (CTA). On le garde cyan, légèrement adouci. */ body.ux-shell .doc-ai-send { background: var(--cta) !important; color: var(--cta-fg) !important; } /* Commande : focus neutre discret (était accent-border) */ body.ux-shell .doc-ai-input-row:focus-within { border-color: var(--text-3) !important; } /* ════════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 (éditeur v6, incr.1) — IA consolidée : la rangée de chips est retirée ; les actions rapides vivent dans un popover ✦ IA sur la barre de commande (zéro doublon). flag ux_shell_v1. ════════════════════════════════════════════════════════════════════════ */ body.ux-shell .doc-quick-row { display: none !important; } /* chips → ✦ IA */ body.ux-shell .doc-ia-btn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-border); flex-shrink: 0; cursor: pointer; transition: filter .15s; } body.ux-shell .doc-ia-btn:hover, body.ux-shell .doc-ia-btn-on { filter: brightness(1.1); } body.ux-shell .doc-ia-btn svg { width: 15px; height: 15px; } body.ux-shell .doc-ia-menu { position: absolute; bottom: calc(100% + 8px); left: 0; width: 244px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 -18px 50px -18px rgba(0,0,0,.6); padding: 6px; z-index: 40; max-height: 280px; overflow-y: auto; } body.ux-shell .doc-ia-menu-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 6px 9px 4px; } body.ux-shell .doc-ia-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 0; background: none; color: var(--text-1); font-size: 13px; border-radius: 8px; text-align: left; cursor: pointer; } body.ux-shell .doc-ia-menu-item:hover { background: var(--surface-2); } body.ux-shell .doc-ia-menu-item i, body.ux-shell .doc-ia-menu-item svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; } body.ux-shell .doc-ia-menu-item-disabled { opacity: .4; cursor: not-allowed; } /* REFONTE-UX-V1 v6 incr.2 — Éditeur V2 : lecture ⇄ édition. En LECTURE (.doc-v2-reading sur le panneau) : toolbar de formatage + barre IA masquées → vue document calme. « Éditer » réaffiche tout + Tiptap éditable. */ body.ux-shell .doc-v2-reading .doc-v2-rich-toolbar, body.ux-shell .doc-v2-reading .doc-editor-footer, body.ux-shell .doc-v2-reading .doc-quick-row { display: none !important; } body.ux-shell .doc-v2-edit-toggle { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 8px; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-border); cursor: pointer; transition: filter .15s; } body.ux-shell .doc-v2-edit-toggle:hover { filter: brightness(1.1); } body.ux-shell .doc-v2-edit-toggle svg { width: 14px; height: 14px; flex-shrink: 0; } body.ux-shell .doc-v2-edit-toggle.is-editing { color: var(--success-ink); background: color-mix(in srgb, var(--success) 13%, transparent); border-color: color-mix(in srgb, var(--success) 32%, transparent); } /* REFONTE-UX-V1 v6 incr.2 (V1) — artefacts (PDF/HTML/charts) : en LECTURE (mode preview) la barre IA + chips sont masquées → vue document calme. Le segment Aperçu/Éditer (.doc-mode-toggle) est le contrôle lecture⇄édition. */ body.ux-shell .doc-v1-reading .doc-editor-footer, body.ux-shell .doc-v1-reading .doc-quick-row { display: none !important; } /* ════════════════════════════════════════════════════════════════════════ REFONTE-UX-V1 v6 — Éditeur : PLUS DE BARRE DE COMMANDE EN BAS (cohérence maquette). La barre IA (Modifier/Discuter + champ + envoi) est retirée ; l'IA passe dans le ✦ flottant (champ libre + actions). Seul « Partager » reste, en bouton discret (footer transparent, sans bordure). flag ux_shell_v1. ════════════════════════════════════════════════════════════════════════ */ body.ux-shell .doc-editor-footer { border-top: none !important; background: transparent !important; padding: 0 12px 8px !important; } body.ux-shell .doc-editor-footer .doc-ai-input-row, body.ux-shell .doc-editor-footer .doc-input-mode-seg, body.ux-shell .doc-editor-footer .doc-suggest-chip, body.ux-shell .doc-editor-footer .doc-nochange-banner, body.ux-shell .doc-editor-footer .doc-chat-thread { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════ UNIFIED-EDIT-MODE-V1 U1 — Surface d'édition inline image/chart. Sous ux-shell, la barre IA est masquée (déplacée vers le ✦ flottant pour les docs texte). MAIS l'édition image/chart n'a pas d'équivalent ✦ → sans ça l'input + les pills sont inatteignables (bug B11). En mode Édition (docInlineEditActive → classe .doc-inline-edit-on), on RÉVÈLE la surface, même en mode lecture ux-shell (.doc-v1-reading). Spécificité supérieure aux règles de masquage ci-dessus → gagne le duel !important. ══════════════════════════════════════════════════════════════════════════ */ body.ux-shell .doc-quick-row.doc-inline-edit-on, body.ux-shell .doc-v1-reading .doc-quick-row.doc-inline-edit-on { display: flex !important; } body.ux-shell .doc-editor-footer.doc-inline-edit-on, body.ux-shell .doc-v1-reading .doc-editor-footer.doc-inline-edit-on { display: flex !important; flex-direction: column; gap: 8px; padding: 8px 12px 12px !important; } body.ux-shell .doc-editor-footer.doc-inline-edit-on .doc-ai-input-row { display: flex !important; } /* UNIFIED-EDIT-MODE-V1 U1.4 + U2.6 — barre de contexte (badge) + sélecteur de modèle image. Couleurs 100% tokens (--accent/--accent-dim/--accent-border) : en light-mode ux-shell --accent bascule sur navy #1F4E79 (charte) — un hex cyan en dur aurait produit un badge « texte navy sur fond cyan » incohérent. Voir DESIGN_SYSTEM.md §2. */ .doc-inline-edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 2px 2px 0; } .doc-inline-edit-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: 999px; padding: 3px 9px; } .doc-img-model-picker { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; } .doc-img-model-label { font-size: 11px; color: var(--text-2); flex-shrink: 0; } .doc-img-model-select { font-size: 12px; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 26px 4px 9px; cursor: pointer; max-width: 190px; min-width: 0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238890a4' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; transition: border-color .15s ease, box-shadow .15s ease; } .doc-img-model-select:hover { border-color:var(--cta-ink); } /* A11Y — l'ancien `:focus { outline: none }` supprimait TOUT indicateur clavier (ne restait qu'un changement de couleur de bordure 1px, insuffisant en SC 2.4.7). On garde l'anneau uniquement au clavier (:focus-visible), pattern identique à .ds-input:focus. */ .doc-img-model-select:focus { border-color: var(--accent); outline: none; } .doc-img-model-select:focus-visible { box-shadow: 0 0 0 3px var(--accent-dim); } body.light-mode .doc-img-model-select { color: var(--text-1); background: var(--surface); border-color: var(--border); } body.light-mode .doc-img-model-label { color: var(--text-2); } /* ✦ IA flottant (FAB) — remplace la barre. Dans le bloc éditeur position:relative. */ body.ux-shell .doc-ia-fab-wrap { position: absolute; right: 16px; bottom: 16px; z-index: 24; } body.ux-shell .doc-ia-fab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--accent-fg); cursor: pointer; border: none; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow: 0 10px 28px -10px rgba(var(--accent-rgb), .5); } body.light-mode.ux-shell .doc-ia-fab { box-shadow: 0 10px 28px -12px rgba(var(--accent-rgb), .5); } body.ux-shell .doc-ia-fab:hover { filter: brightness(1.06); } body.ux-shell .doc-ia-fab svg { width: 16px; height: 16px; } body.ux-shell .doc-ia-fab-pop { position: absolute; right: 0; bottom: calc(100% + 10px); width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 -22px 60px -18px rgba(0,0,0,.6); padding: 8px; max-height: 320px; overflow-y: auto; } body.ux-shell .doc-ia-fab-field { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; } body.ux-shell .doc-ia-fab-field svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; } body.ux-shell .doc-ia-fab-field input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-size: 13px; color: var(--text-1); } body.ux-shell .doc-ia-fab-field input::placeholder { color: var(--text-3); } body.ux-shell .doc-ia-fab-send { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); border: none; flex-shrink: 0; cursor: pointer; } body.ux-shell .doc-ia-fab-send svg { width: 13px; height: 13px; } body.ux-shell .doc-ia-fab-send:disabled { opacity: .4; cursor: not-allowed; } /* v6 — masque la ligne d'aide Modifier/Discuter obsolète (barre du bas retirée) */ body.ux-shell .doc-mode-hint { display: none !important; } /* REFONTE-UX-V1 v6 incr.3 — mini-menu sur sélection de texte (éditeur). */ body.ux-shell .doc-sel-bubble { position: fixed; transform: translate(-50%, calc(-100% - 8px)); z-index: 70; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px -10px rgba(0,0,0,.6); } body.ux-shell .doc-sel-bubble button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text-1); font-size: 13px; padding: 6px 9px; border-radius: 8px; cursor: pointer; } body.ux-shell .doc-sel-bubble button:hover { background: var(--surface-2); } body.ux-shell .doc-sel-ai { color: var(--accent) !important; font-weight: 600; } body.ux-shell .doc-sel-ai svg { width: 13px; height: 13px; } body.ux-shell .doc-sel-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; } /* v6 fix — chevauchement ✦ FAB (droite) ↔ Partager : Partager à gauche, FAB seul à droite */ body.ux-shell .doc-editor-footer .doc-export-row { justify-content: flex-start !important; padding-bottom: 4px; } /* REFONTE-UX-V1 v6 — « Type de document » retiré du header (incompréhensible) → relogé dans le ⋯ */ body.ux-shell .doc-fused-head-controls .doc-kind-badge-wrap { display: none !important; } body.ux-shell .doc-kebab-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 7px 12px 3px; } body.ux-shell .doc-kebab-item-active { color:var(--cta-ink) !important; } body.ux-shell .doc-kebab-item-active svg, body.ux-shell .doc-kebab-item-active i { color:var(--cta-ink) !important; } /* REFONTE-UX-V1 v6 — ⋯ : « Type de document » en accordéon (menu plus court) */ body.ux-shell .doc-kebab-accordion { font-weight: 600; } body.ux-shell .doc-kebab-accordion-val { margin-left: auto; color: var(--text-3); font-size: 11px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ux-shell .doc-kebab-chevron { color: var(--text-3); flex-shrink: 0; transition: transform .15s; } body.ux-shell .doc-kebab-subitem { padding-left: 30px !important; } /* DOC-INDUSTRY-V1 I5 — éditeur de diapositives PPTX (dans le drawer .doc-editor-v2-versions) */ .pptx-slide-editor { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 8px; } .pptx-slide-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 8px; } .pptx-slide-head { display: flex; align-items: center; justify-content: space-between; } .pptx-slide-num { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; } .pptx-slide-del { color: var(--text-3); padding: 3px; border-radius: 6px; transition: color .15s, background .15s; } .pptx-slide-del:hover { color: var(--danger-ink); background: color-mix(in srgb, var(--danger) 10%, transparent); } .pptx-slide-title { width: 100%; font-size: 14px; font-weight: 600; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg, #fff); color: var(--text-1); } .pptx-slide-body { width: 100%; font-size: 13px; line-height: 1.55; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg, #fff); color: var(--text-2); resize: vertical; font-family: inherit; } .pptx-slide-title:focus, .pptx-slide-body:focus { outline: none; border-color: var(--accent, var(--accent)); box-shadow: 0 0 0 2px var(--accent-dim, var(--accent-dim)); } .pptx-add-slide { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-2); font-size: 13px; font-weight: 500; transition: border-color .15s, color .15s; } .pptx-add-slide:hover { border-color:var(--accent, var(--cta-ink)); color:var(--accent, var(--cta-ink)); } .pptx-editor-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--surface-2, #fff) 40%); } /* DOC-INDUSTRY-V1 I6 — drawers Versions/PPTX en bottom-sheet (n'écrasent pas le header de l'éditeur) */ body.ux-shell .doc-art-drawer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 24; max-height: 64%; border-radius: 14px 14px 0 0; box-shadow: 0 -14px 40px -16px rgba(0,0,0,.55); } body.ux-shell:not(.light-mode) .doc-art-drawer { background: var(--surface); border-top: 1px solid var(--border); } body.light-mode.ux-shell .doc-art-drawer { background: var(--bg); border-top: 1px solid var(--border); } /* ════════════════════════════════════════════════════════════════════════ DOC-STUDIO-V1 DS-1 — Habillage UNIFIÉ « maquette v6 » des deux éditeurs (artefact HTML/PDF .html-edit-toolbar + Tiptap .doc-v2-rich-toolbar). Référence : design-system/explorations/doc-editor-refonte-v6.html (.tb/.tbtn). Dark : barre var(--bg-2) #0e131c · boutons 30px radius 7px · sep 18px. ════════════════════════════════════════════════════════════════════════ */ body.ux-shell .html-edit-toolbar, body.ux-shell .docx-edit-toolbar, body.ux-shell .doc-v2-rich-toolbar { background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; padding: 6px 10px !important; gap: 3px !important; align-items: center; flex-wrap: wrap; } body.light-mode.ux-shell .html-edit-toolbar, body.light-mode.ux-shell .docx-edit-toolbar, body.light-mode.ux-shell .doc-v2-rich-toolbar { background: var(--surface-2) !important; border-bottom: 1px solid var(--border) !important; } /* Boutons toolbar (les 2 familles) → .tbtn maquette */ body.ux-shell .docx-tb-btn, body.ux-shell .html-tb-color, body.ux-shell .doc-v2-tb-btn { min-width: 30px !important; height: 30px !important; padding: 0 7px !important; border-radius: 8px !important; border: 1px solid transparent !important; color: var(--text-2) !important; background: none !important; font-size: 13px !important; transition: background .15s, color .15s, box-shadow .15s !important; } body.ux-shell .docx-tb-btn:hover, body.ux-shell .html-tb-color:hover, body.ux-shell .doc-v2-tb-btn:hover { background: var(--surface-2) !important; color: var(--text-1) !important; border-color: transparent !important; } body.ux-shell .docx-tb-btn.active, body.ux-shell .doc-v2-tb-btn.active { background: var(--surface-2) !important; color: var(--text-1) !important; box-shadow: inset 0 0 0 1px var(--border) !important; } /* Selects Police/Taille + dropdowns → même langage (arrondi, surface-2) */ body.ux-shell .html-tb-select { height: 30px !important; border-radius: 8px !important; border: 1px solid var(--border) !important; background: var(--surface-2) !important; color: var(--text-1) !important; font-size: 13px !important; } /* Séparateurs verticaux → .sepv maquette (18px) */ body.ux-shell .docx-tb-sep, body.ux-shell .doc-v2-tb-sep { width: 1px !important; height: 18px !important; background: var(--border) !important; margin: 0 5px !important; } /* Action « Terminer » accent / vert quand édition ; « Annuler » discret */ body.ux-shell .docx-tb-action { height: 30px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 13px !important; } body.ux-shell .docx-tb-save { /* var(--success) en dur donnait 1,67 sur fond clair : un vert vif sur sa propre teinte. Le jeton suit le theme et remonte a 5,33. */ color: var(--success-ink) !important; background: var(--success-dim) !important; border: 1px solid color-mix(in srgb, var(--success) 32%, transparent) !important; } body.ux-shell .docx-tb-save:hover { filter: brightness(1.08); } body.ux-shell .docx-tb-cancel { color: var(--text-3) !important; background: none !important; border-color: transparent !important; } /* Bouton ✦ IA (fin de toolbar, packé — plus de margin-left:auto qui créait un énorme trou en plein écran ; UX-1 retour Manu). */ body.ux-shell .doc-v2-tb-btn.doc-v2-tb-ai, body.ux-shell .docx-tb-btn.docx-tb-ai { color: var(--accent) !important; background: var(--accent-dim) !important; border: 1px solid var(--accent-border, rgba(var(--accent-rgb), .3)) !important; font-weight: 600 !important; gap: 5px; } /* DOC-STUDIO-V1 DS-4 — plein écran = vraie prise de page entière (pas une modale 90×90 centrée). Bord à bord, sans backdrop : l'éditeur EST la page, gestion des onglets en haut comme la zone chat. */ body.ux-shell .right-context-panel.doc-v2-fullscreen { top: 0 !important; bottom: 0 !important; left: var(--ux-panel-left, 93px) !important; right: 0 !important; width: calc(100vw - var(--ux-panel-left, 93px)) !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; border-left: none !important; box-shadow: none !important; /* Fond 100% OPAQUE (l'inline var(--bg) est en rgba .93 → laissait voir la page derrière + coût paint). Prise de page entière, pas une modale translucide. */ background: var(--bg) !important; } body.light-mode.ux-shell .right-context-panel.doc-v2-fullscreen { background: var(--bg) !important; } body.ux-shell .doc-v2-fullscreen-backdrop { display: none !important; } /* Barre d'onglets façon chat : toujours visible en plein écran, collée en haut. */ body.ux-shell .right-context-panel.doc-v2-fullscreen .doc-v2-tabs-bar { border-top: none; } /* DS-1b — dropdown « Titre » (style de bloc) + libellé IA, façon maquette Image #5. */ body.ux-shell .doc-v2-tb-blockwrap { position: relative; display: inline-flex; } body.ux-shell .doc-v2-tb-block { width: auto !important; min-width: 92px; gap: 6px; padding: 0 10px !important; justify-content: space-between; font-size: 13px !important; } body.ux-shell .doc-v2-block-menu { position: absolute; top: 36px; left: 0; z-index: 40; min-width: 156px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 50px -18px rgba(0,0,0,.6); } body.ux-shell .doc-v2-block-item { display: block; width: 100%; text-align: left; padding: 7px 11px; border-radius: 8px; color: var(--text-1); font-size: 13px; background: none; border: 0; transition: background .12s; } body.ux-shell .doc-v2-block-item:hover { background: var(--surface-2); } body.ux-shell .doc-v2-block-h1 { font-size: 18px; font-weight: 700; } body.ux-shell .doc-v2-block-h2 { font-size: 15px; font-weight: 700; } body.ux-shell .doc-v2-block-h3 { font-size: 13px; font-weight: 600; } body.ux-shell .doc-v2-tb-ai { width: auto !important; padding: 0 11px !important; } body.ux-shell .doc-v2-tb-ai span { font-size: 13px; font-weight: 600; } /* Pastille libellée (icône + texte) — parité visuelle avec les boutons de la barre d'outils de l'éditeur DESIGN (ex. « Exporter »). Garde le style ghost de base. */ body.ux-shell .doc-v2-tb-labeled { width: auto !important; padding: 0 11px !important; display: inline-flex; align-items: center; gap: 5px; } body.ux-shell .doc-v2-tb-labeled span { font-size: 13px; font-weight: 600; } /* DOC-STUDIO-V2 — popover couleur texte + surlignage (palette sobre/pro). */ body.ux-shell .doc-v2-color-pop { position: absolute; top: 36px; left: 0; z-index: 40; width: 200px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 50px -18px rgba(0,0,0,.6); } body.ux-shell .doc-v2-color-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 2px 2px 7px; } body.ux-shell .doc-v2-color-lbl + .doc-v2-color-grid { margin-bottom: 12px; } body.ux-shell .doc-v2-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; } body.ux-shell .doc-v2-swatch { width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); cursor: pointer; padding: 0; transition: transform .1s, box-shadow .1s; } body.light-mode.ux-shell .doc-v2-swatch { border-color: rgba(0,0,0,.12); } body.ux-shell .doc-v2-swatch:hover { transform: scale(1.12); box-shadow: 0 4px 12px -4px rgba(0,0,0,.5); } body.ux-shell .doc-v2-swatch-none { display: grid; place-items: center; background: var(--surface-2) !important; color: var(--text-3); } body.light-mode .doc-studio-start { background: var(--bg); } @keyframes docStudioIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .doc-studio-hero-field.is-busy { opacity: .75; } /* High specificity to beat the global `body.light-mode input` (#f8fafc) rule. */ body.ux-shell .doc-studio-hero-input, body.ux-shell .doc-studio-hero-input:focus { background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; } @keyframes docStudioSpin { to { transform: rotate(360deg); } } body.light-mode .doc-studio-target-hint { color: var(--navy, var(--accent)); } .doc-studio-cat.is-active { color: #fff; border-color: transparent; background:linear-gradient(135deg, var(--cta), var(--accent-hover)); } body.light-mode .doc-studio-cat.is-active { color: #fff; background:var(--cta); } /* Grille de modèles */ .doc-studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 13px; } .doc-studio-card { position: relative; /* B2.2 — ancre le bouton ✨ « Remplir avec l'IA » */ display: flex; align-items: flex-start; gap: 13px; text-align: left; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s; width: 100%; } .doc-studio-card:hover:not(:disabled):not(.is-disabled) { transform: translateY(-3px); border-color:var(--cta-ink); box-shadow: 0 18px 40px -22px rgba(var(--accent-rgb), .45); } .doc-studio-card:disabled, .doc-studio-card.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .doc-studio-card:hover .doc-studio-card-ai { opacity: 1; } .doc-studio-card { overflow: hidden; } .doc-studio-card-kind.is-design { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); } .doc-studio-fill-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .doc-studio-fill-btn.primary:hover { background: var(--accent-hover); } .doc-studio-recent.is-collapsed { max-height: 52px; } .doc-studio-rec-toggle.is-open svg { transform: rotate(180deg); } @media (max-width: 640px) { .doc-studio-scroll { padding: 8px 16px 32px; } .doc-studio-head { padding: 16px 16px 10px; } .doc-studio-grid { grid-template-columns: 1fr; } .doc-studio-hero-row { flex-direction: column; align-items: flex-start; gap: 10px; } } /* UX-6 — Incognito intégré aux tools du composer : icône discrète, état actif violet. */ body.ux-shell .ux-inc-tool-on { color: var(--data-6-ink) !important; background: color-mix(in srgb, var(--data-6) 14%, transparent) !important; } body.ux-shell .ux-inc-tool-on:hover { background: color-mix(in srgb, var(--data-6) 20%, transparent) !important; } /* UX-4 (retour Manu 2026-06-23) — l'IA inline ne doit PAS masquer le document. Au lieu d'une modale centrée + backdrop sombre, on l'ancre en haut à droite, sans voile, sans bloquer le doc (le panneau reste interactif). */ body.ux-shell .docai-overlay { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; align-items: flex-start !important; justify-content: flex-end !important; padding: 64px 22px 0 0 !important; pointer-events: none !important; } body.ux-shell .docai-modal { pointer-events: auto !important; width: 408px !important; max-width: 92vw !important; max-height: 78vh !important; box-shadow: 0 26px 64px -16px rgba(0,0,0,.72) !important; } /* UX-2 — onglets éditeur de document UNIFIÉS avec les onglets de thread (même design « carte » : fond barre sombre, actif fusionné, pas de bottom-border, coins arrondis en haut, texte lisible). */ body.ux-shell .doc-v2-tabs-bar { align-items: flex-end !important; background: var(--chat-tab-bar-bg) !important; border-bottom: 1px solid var(--chat-tab-bar-border, rgba(255,255,255,.09)) !important; padding: 4px 6px 0 !important; gap: 2px !important; } body.ux-shell .doc-v2-tab { height: 33px !important; padding: 0 12px 0 14px !important; border-bottom: none !important; border-radius: var(--chat-tab-radius, 8px) var(--chat-tab-radius, 8px) 0 0 !important; background: var(--chat-tab-bg, transparent) !important; color: var(--chat-tab-text) !important; font-size: 0.84rem !important; gap: 7px !important; max-width: 264px !important; min-width: 88px !important; } body.ux-shell .doc-v2-tab:hover { background: var(--chat-tab-bg-hover) !important; color: var(--chat-tab-text-hover) !important; } body.ux-shell .doc-v2-tab.doc-v2-tab-active { background: var(--chat-tab-bg-active) !important; color: var(--chat-tab-text-active) !important; border-bottom: none !important; margin-bottom: -1px !important; padding-bottom: 1px !important; } body.ux-shell .doc-v2-tab.doc-v2-tab-active .doc-v2-tab-title { font-weight: 500; } /* Bouton « + » nouveau document dans la barre d'onglets (façon chat). */ body.ux-shell .doc-v2-tab-new { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; margin-left: 4px; border-radius: 8px; border: 1px solid transparent; color: var(--text-3); background: none; transition: background .15s, color .15s; } body.ux-shell .doc-v2-tab-new:hover { background: var(--surface-2); color: var(--text-1); } /* TABS-CLUSTER-V2 (2026-06-25, retour Manu) — cluster d'actions à droite de la barre d'onglets façon « ancien affichage » : icônes + et ⌄ plus nettes (un peu plus grandes, trait plus fin) et SUPPRESSION du compteur (« 2 ») qui polluait l'affichage. Gated ux-shell → le legacy garde son rendu actuel. On ne touche pas aux onglets eux-mêmes. */ /* Le compteur d'onglets hors ecran n'est plus masque : c'est desormais le seul indice qu'il reste des conversations derriere le chevron. Sa visibilite est pilotee par x-show (masque a zero). */ body.ux-shell .tab-overflow-btn { gap: 0 !important; padding: 0 7px !important; } body.ux-shell .tab-new-btn svg, body.ux-shell .tab-overflow-btn svg { width: 13px !important; height: 13px !important; stroke-width: 2 !important; } /* TABS-CLUSTER-V2b (2026-06-25, retour Manu) — le cluster +/⌄ se colle au dernier onglet tant que la barre n'est pas pleine. .chat-tab-bar passe en taille-contenu (flex:0 1 auto) au lieu de flex:1 : quand il reste de la place, la barre = largeur des onglets → le cluster d'actions suit juste après. Quand les onglets débordent, flex-shrink ramène la barre à la largeur dispo (le strip scrolle dedans) → le cluster reste épinglé à droite (toujours atteignable). Gated ux-shell → legacy inchangé. */ body.ux-shell .chat-tab-bar { flex: 0 1 auto !important; } /* ════════════════════════════════════════════════════════════════════════ UX-AUDIT chantier A — z-index tokenisés. Le CDN Tailwind ne génère PAS les valeurs arbitraires `z-[var(--z-modal)]` (vérifié : la classe est posée mais aucune règle utilitaire créée → z auto). On définit donc ces utilitaires à la main. Non gated (s'applique partout, legacy + ux-shell) — c'est un fix de stacking, pas du style refonte. ════════════════════════════════════════════════════════════════════════ */ .z-\[var\(--z-modal\)\] { z-index: var(--z-modal); } .z-\[var\(--z-toast\)\] { z-index: var(--z-toast); } /* ════════════════════════════════════════════════════════════════════════ THEME-V3 (2026-08-25) — les classes Tailwind arbitraires portant une couleur de marque v2. Une classe comme `text-[#00B0F0]` porte sa couleur dans son NOM : elle ne peut pas suivre le thème, ni la marque d'un workspace. On la redéfinit donc ici pour qu'elle consomme l'accent. `!important` pour battre l'utilitaire Tailwind, qui a la même spécificité. Ces règles étaient jusqu'ici préfixées `body.ux-shell` et ne couvraient que 8 des 15 formes réellement employées : les 7 autres (focus:ring, focus-visible:ring, accent-, bg/15, border sans opacité) restaient au cyan, et TOUTES restaient au cyan hors de la coquille refonte. Le préfixe est retiré et les 15 formes sont couvertes. La vraie correction serait de remplacer ces classes dans le markup par des utilitaires sémantiques. 80 occurrences : à faire, mais pas au prix d'un sprint qui touche déjà tout le style. ════════════════════════════════════════════════════════════════════════ */ .text-\[\#00B0F0\] { color: var(--cta-ink) !important; } /* lien ou libelle actionnable */ .hover\:text-\[\#00B0F0\]:hover { color:var(--cta-ink) !important; } .border-\[\#00B0F0\] { border-color: var(--cta) !important; } .border-\[\#00B0F0\]\/30 { border-color: rgba(var(--cta-rgb),.3) !important; } .accent-\[\#00B0F0\] { accent-color: var(--cta) !important; } .bg-\[\#00B0F0\]\/10 { background-color: rgba(var(--accent-rgb),.1) !important; } .bg-\[\#00B0F0\]\/15 { background-color: rgba(var(--accent-rgb),.15) !important; } .hover\:bg-\[\#00B0F0\]\/15:hover { background-color: rgba(var(--accent-rgb),.15) !important; } .hover\:bg-\[\#00B0F0\]\/20:hover { background-color: rgba(var(--accent-rgb),.2) !important; } .hover\:bg-\[\#00B0F0\]\/25:hover { background-color: rgba(var(--accent-rgb),.25) !important; } .hover\:bg-\[\#00B0F0\]\/80:hover { background-color: rgba(var(--accent-rgb),.8) !important; } .focus\:ring-\[\#00B0F0\]\/40:focus { --tw-ring-color: rgba(var(--cta-rgb),.4) !important; } .focus\:ring-\[\#00B0F0\]\/50:focus { --tw-ring-color: rgba(var(--cta-rgb),.5) !important; } .focus\:ring-\[\#00B0F0\]\/60:focus { --tw-ring-color: rgba(var(--cta-rgb),.6) !important; } .focus-visible\:ring-\[\#00B0F0\]:focus-visible { --tw-ring-color: var(--cta) !important; } /* Ardoise bleutee heritee — HORS CHARTE et FIGEE. #1A1F2E n'est pas de la famille etain : c'est un bleu-ardoise d'un ancien jeu de couleurs. Surtout, la valeur est dans le NOM de la classe, donc elle ne bascule pas : en theme clair ces blocs restaient SOMBRES sur une page claire. On les rattache aux jetons, comme le bloc #00B0F0 au-dessus. */ .bg-\[\#1a1f2e\] { background-color: var(--surface) !important; } .hover\:bg-\[\#1a1f2e\]:hover { background-color: var(--surface) !important; } .bg-\[\#0f1623\] { background-color: var(--bg) !important; } .hover\:bg-\[\#252b3d\]:hover { background-color: var(--surface-2) !important; } .border-\[\#2a3244\] { border-color: var(--border) !important; } .border-\[\#1e2a3a\] { border-color: var(--border) !important; } .focus\:ring-\[\#f59e0b\]\/50:focus { --tw-ring-color: color-mix(in srgb, var(--warning) 50%, transparent) !important; } /* Audit couleurs 2026-08-26 — utilitaires encore non couverts : les survols blancs translucides sont invisibles en theme clair, on les rattache au jeton. */ .hover\:bg-white\/10:hover { background-color: var(--surface-hover) !important; } .hover\:bg-white\/5:hover { background-color: var(--surface-hover) !important; } .ring-\[\#00B0F0\] { --tw-ring-color: var(--accent-border) !important; } /* Echelle z : les classes Tailwind arbitraires des modales/overlays (18 occ. mesurees, toutes des surfaces superposees) rejoignent le jeton --z-modal. Paires backdrop/panneau (59/60) : meme niveau, l'ordre DOM tranche — pattern documente dans workflow-graph.html. */ .z-\[9999\], .z-\[150\], .z-\[120\], .z-\[90\], .z-\[70\], .z-\[60\], .z-\[59\] { z-index: var(--z-modal) !important; } .z-\[52\] { z-index: var(--z-overlay) !important; } /* Jeton BACKDROP unique (l'audit modales a compte 11 opacites et 3 teintes pour le meme role). Sombre : noir .55 ; clair : ardoise .40 plus legere. */ :root { --overlay: rgba(0,0,0,.55); } body.light-mode { --overlay: rgba(0,0,0,.35); } /* Feedback génération atelier (2026-07-10) — spinner du bouton topbar takeover. */ .uat-genbtn-spin { animation: uatGenBtnSpin .8s linear infinite; } @keyframes uatGenBtnSpin { to { transform: rotate(360deg); } } .uat-tb-genbtn:disabled { opacity: .75; cursor: progress; } /* ── Classes Tailwind NOMMEES → jetons (THEME-V3, 2026-08-25) ────────── * 4 095 occurrences mesurees dans les partials et app.html, dont 3 257 en * gray et slate : DEUX familles de gris concurrentes sur le meme role. * La couleur vit dans le NOM de la classe, produite par tailwind-build.css : * aucun grep de hex ne la trouve, seul l'audit navigateur la voit. C'est * ainsi que « Reconnecter » sortait a 2,15 et « credits IA » a 2,28. * shared.css charge APRES tailwind-build.css : ces regles gagnent. * gray, slate, zinc, neutral et stone pointent sur la MEME rampe. */ .text-gray-500 { color: var(--text-3) !important; } .text-gray-400 { color: var(--text-2) !important; } .text-gray-300 { color: var(--text-2) !important; } .text-red-400 { color: var(--danger-ink) !important; } .text-slate-400 { color: var(--text-2) !important; } .text-blue-400 { color: var(--cta) !important; } .text-slate-500 { color: var(--text-3) !important; } .text-green-400 { color: var(--success-ink) !important; } .text-gray-600 { color: var(--text-3) !important; } .bg-gray-800 { background-color: var(--surface-2) !important; } .border-gray-700 { border-color: var(--border-strong) !important; } .border-gray-600 { border-color: var(--text-3) !important; } .border-gray-800 { border-color: var(--surface-2) !important; } .text-slate-300 { color: var(--text-2) !important; } .bg-gray-700 { background-color: var(--border-strong) !important; } .text-gray-200 { color: var(--text-1) !important; } .hover\:text-gray-300:hover { color: var(--text-2) !important; } .text-amber-400 { color: var(--warning-ink) !important; } .hover\:text-slate-300:hover { color: var(--text-2) !important; } .hover\:bg-slate-700:hover { background-color: var(--border-strong) !important; } .focus\:ring-blue-500:focus { --tw-ring-color: var(--cta) !important; } .bg-slate-700 { background-color: var(--border-strong) !important; } .text-orange-400 { color: var(--warning-ink) !important; } .text-slate-600 { color: var(--text-3) !important; } .bg-slate-800 { background-color: var(--surface-2) !important; } .text-slate-200 { color: var(--text-1) !important; } .hover\:bg-gray-800:hover { background-color: var(--surface-2) !important; } .hover\:bg-slate-800:hover { background-color: var(--surface-2) !important; } .hover\:text-red-300:hover { color: var(--danger-ink) !important; } .hover\:text-red-400:hover { color: var(--danger-ink) !important; } .hover\:bg-gray-800\/40:hover { background-color: color-mix(in srgb, var(--surface-2) 40%, transparent) !important; } .text-blue-300 { color: var(--cta) !important; } .text-yellow-400 { color: var(--warning-ink) !important; } .hover\:bg-red-900\/30:hover { background-color: color-mix(in srgb, var(--danger) 30%, transparent) !important; } .text-gray-700 { color: var(--border-strong) !important; } .border-slate-600 { border-color: var(--text-3) !important; } .bg-blue-600 { background-color: var(--cta) !important; } .bg-gray-900 { background-color: var(--surface) !important; } .border-green-500\/30 { border-color: color-mix(in srgb, var(--success) 30%, transparent) !important; } .bg-blue-700 { background-color: var(--cta) !important; } .text-purple-400 { color: var(--data-6-ink) !important; } .border-gray-800\/50 { border-color: color-mix(in srgb, var(--surface-2) 50%, transparent) !important; } .text-emerald-400 { color: var(--success-ink) !important; } .border-red-500\/30 { border-color: color-mix(in srgb, var(--danger) 30%, transparent) !important; } .bg-slate-900 { background-color: var(--surface) !important; } .text-red-300 { color: var(--danger-ink) !important; } .bg-green-900\/20 { background-color: color-mix(in srgb, var(--success) 20%, transparent) !important; } .border-blue-700 { border-color: var(--cta) !important; } .text-green-300 { color: var(--success-ink) !important; } .text-orange-300 { color: var(--warning-ink) !important; } .hover\:text-slate-400:hover { color: var(--text-2) !important; } .hover\:text-blue-300:hover { color: var(--cta) !important; } .hover\:bg-gray-700:hover { background-color: var(--border-strong) !important; } .border-blue-500\/30 { border-color: rgba(var(--cta-rgb), .30) !important; } .bg-red-900\/20 { background-color: color-mix(in srgb, var(--danger) 20%, transparent) !important; } .border-blue-500 { border-color: var(--cta) !important; } .text-yellow-300 { color: var(--warning-ink) !important; } .hover\:text-slate-200:hover { color: var(--text-1) !important; } .border-slate-700 { border-color: var(--border-strong) !important; } .text-purple-300 { color: var(--data-6-ink) !important; } .hover\:bg-red-900\/20:hover { background-color: color-mix(in srgb, var(--danger) 20%, transparent) !important; } .bg-blue-900 { background-color: var(--cta) !important; } .hover\:bg-slate-600\/60:hover { background-color: color-mix(in srgb, var(--text-3) 60%, transparent) !important; } .hover\:text-slate-100:hover { color: var(--text-1) !important; } .border-slate-800 { border-color: var(--surface-2) !important; } .hover\:bg-slate-700\/60:hover { background-color: color-mix(in srgb, var(--border-strong) 60%, transparent) !important; } .text-yellow-200 { color: var(--warning-ink) !important; } .hover\:bg-gray-800\/30:hover { background-color: color-mix(in srgb, var(--surface-2) 30%, transparent) !important; } .text-amber-300 { color: var(--warning-ink) !important; } .bg-red-500\/10 { background-color: color-mix(in srgb, var(--danger) 10%, transparent) !important; } .hover\:bg-blue-900\/20:hover { background-color: rgba(var(--cta-rgb), .20) !important; } .hover\:bg-slate-600:hover { background-color: var(--text-3) !important; } .border-amber-700 { border-color: var(--warning) !important; } .text-red-200 { color: var(--danger-ink) !important; } .bg-yellow-900 { background-color: var(--warning) !important; } .bg-green-900 { background-color: var(--success) !important; } .bg-red-950 { background-color: var(--danger) !important; } .bg-gray-800\/50 { background-color: color-mix(in srgb, var(--surface-2) 50%, transparent) !important; } .focus\:border-blue-500:focus { border-color: var(--cta) !important; } .border-red-500 { border-color: var(--danger) !important; } .bg-green-500\/10 { background-color: color-mix(in srgb, var(--success) 10%, transparent) !important; } .bg-orange-900\/20 { background-color: color-mix(in srgb, var(--warning) 20%, transparent) !important; } .hover\:bg-slate-800\/30:hover { background-color: color-mix(in srgb, var(--surface-2) 30%, transparent) !important; } .border-red-700 { border-color: var(--danger) !important; } .bg-gray-600 { background-color: var(--text-3) !important; } .bg-green-600 { background-color: var(--success) !important; } .border-green-700 { border-color: var(--success) !important; } .hover\:bg-green-900\/20:hover { background-color: color-mix(in srgb, var(--success) 20%, transparent) !important; } .bg-blue-900\/30 { background-color: rgba(var(--cta-rgb), .30) !important; } .bg-gray-800\/30 { background-color: color-mix(in srgb, var(--surface-2) 30%, transparent) !important; } .border-gray-500 { border-color: var(--text-3) !important; } .bg-red-900\/30 { background-color: color-mix(in srgb, var(--danger) 30%, transparent) !important; } .hover\:bg-red-900\/50:hover { background-color: color-mix(in srgb, var(--danger) 50%, transparent) !important; } .border-slate-700\/50 { border-color: color-mix(in srgb, var(--border-strong) 50%, transparent) !important; } .hover\:bg-slate-700\/70:hover { background-color: color-mix(in srgb, var(--border-strong) 70%, transparent) !important; } .bg-green-400 { background-color: var(--success) !important; } .bg-purple-900\/20 { background-color: color-mix(in srgb, var(--data-6) 20%, transparent) !important; } .bg-slate-700\/60 { background-color: color-mix(in srgb, var(--border-strong) 60%, transparent) !important; } .bg-blue-900\/20 { background-color: rgba(var(--cta-rgb), .20) !important; } .text-blue-200 { color: var(--cta) !important; } .hover\:text-gray-200:hover { color: var(--text-1) !important; } .bg-blue-500 { background-color: var(--cta) !important; } .bg-red-900\/40 { background-color: color-mix(in srgb, var(--danger) 40%, transparent) !important; } .text-cyan-300 { color: var(--cta) !important; } .hover\:bg-amber-900\/20:hover { background-color: color-mix(in srgb, var(--warning) 20%, transparent) !important; } .hover\:bg-gray-600:hover { background-color: var(--text-3) !important; } .placeholder-gray-500 { color: var(--text-3) !important; } .border-amber-500\/30 { border-color: color-mix(in srgb, var(--warning) 30%, transparent) !important; } .bg-purple-900\/30 { background-color: color-mix(in srgb, var(--data-6) 30%, transparent) !important; } .border-purple-500\/30 { border-color: color-mix(in srgb, var(--data-6) 30%, transparent) !important; } .border-yellow-600 { border-color: var(--warning) !important; } .bg-red-900 { background-color: var(--danger) !important; } .bg-red-500 { background-color: var(--danger) !important; } .text-red-500 { color: var(--danger-ink) !important; } .bg-slate-700\/50 { background-color: color-mix(in srgb, var(--border-strong) 50%, transparent) !important; } .bg-amber-500 { background-color: var(--warning) !important; } .hover\:bg-amber-600:hover { background-color: var(--warning) !important; } .bg-slate-500 { background-color: var(--text-3) !important; } .bg-orange-500 { background-color: var(--warning) !important; } .hover\:bg-blue-900\/30:hover { background-color: rgba(var(--cta-rgb), .30) !important; } .text-cyan-400 { color: var(--cta) !important; } .hover\:bg-red-500\/20:hover { background-color: color-mix(in srgb, var(--danger) 20%, transparent) !important; } .ring-blue-500 { --tw-ring-color: var(--cta) !important; } .text-green-600 { color: var(--success-ink) !important; } .border-red-800 { border-color: var(--danger) !important; } .bg-blue-900\/40 { background-color: rgba(var(--cta-rgb), .40) !important; } .bg-amber-900\/40 { background-color: color-mix(in srgb, var(--warning) 40%, transparent) !important; } .text-amber-200 { color: var(--warning-ink) !important; } .hover\:bg-gray-800\/50:hover { background-color: color-mix(in srgb, var(--surface-2) 50%, transparent) !important; } .border-orange-500\/30 { border-color: color-mix(in srgb, var(--warning) 30%, transparent) !important; } .bg-red-600 { background-color: var(--danger) !important; } .bg-gray-700\/40 { background-color: color-mix(in srgb, var(--border-strong) 40%, transparent) !important; } .border-gray-500\/30 { border-color: color-mix(in srgb, var(--text-3) 30%, transparent) !important; } .hover\:bg-blue-600:hover { background-color: var(--cta) !important; } .bg-amber-900\/30 { background-color: color-mix(in srgb, var(--warning) 30%, transparent) !important; } .text-gray-100 { color: var(--text-1) !important; } .bg-green-500 { background-color: var(--success) !important; } .bg-yellow-500 { background-color: var(--warning) !important; } .hover\:bg-slate-800\/20:hover { background-color: color-mix(in srgb, var(--surface-2) 20%, transparent) !important; } .border-green-600\/40 { border-color: color-mix(in srgb, var(--success) 40%, transparent) !important; } .bg-yellow-800\/60 { background-color: color-mix(in srgb, var(--warning) 60%, transparent) !important; } .hover\:bg-yellow-700:hover { background-color: var(--warning) !important; } .bg-red-950\/50 { background-color: color-mix(in srgb, var(--danger) 50%, transparent) !important; } .border-red-700\/50 { border-color: color-mix(in srgb, var(--danger) 50%, transparent) !important; } .border-gray-800\/40 { border-color: color-mix(in srgb, var(--surface-2) 40%, transparent) !important; } .hover\:border-green-600:hover { border-color: var(--success) !important; } .hover\:text-green-400:hover { color: var(--success-ink) !important; } .bg-orange-900 { background-color: var(--warning) !important; } .bg-cyan-900 { background-color: var(--cta) !important; } .bg-slate-600 { background-color: var(--text-3) !important; } .hover\:bg-slate-700\/50:hover { background-color: color-mix(in srgb, var(--border-strong) 50%, transparent) !important; } .border-red-400 { border-color: var(--danger) !important; } .hover\:bg-red-500\/10:hover { background-color: color-mix(in srgb, var(--danger) 10%, transparent) !important; } .bg-purple-500\/10 { background-color: color-mix(in srgb, var(--data-6) 10%, transparent) !important; } .hover\:bg-purple-500\/20:hover { background-color: color-mix(in srgb, var(--data-6) 20%, transparent) !important; } .border-gray-200 { border-color: var(--text-1) !important; } .text-gray-900 { color: var(--surface) !important; } .placeholder-gray-400 { color: var(--text-2) !important; } .bg-gray-100 { background-color: var(--text-1) !important; } .hover\:bg-gray-200:hover { background-color: var(--text-1) !important; } .text-blue-500 { color: var(--cta) !important; } .text-emerald-300 { color: var(--success-ink) !important; } .text-blue-400\/70 { color: rgba(var(--cta-rgb), .70) !important; } .bg-yellow-400 { background-color: var(--warning) !important; } .bg-red-400 { background-color: var(--danger) !important; } .border-blue-400 { border-color: var(--cta) !important; } .bg-slate-700\/40 { background-color: color-mix(in srgb, var(--border-strong) 40%, transparent) !important; } .bg-red-500\/20 { background-color: color-mix(in srgb, var(--danger) 20%, transparent) !important; } .border-red-500\/40 { border-color: color-mix(in srgb, var(--danger) 40%, transparent) !important; } .bg-amber-500\/20 { background-color: color-mix(in srgb, var(--warning) 20%, transparent) !important; } .border-amber-500\/40 { border-color: color-mix(in srgb, var(--warning) 40%, transparent) !important; } .bg-green-500\/20 { background-color: color-mix(in srgb, var(--success) 20%, transparent) !important; } .border-green-500\/40 { border-color: color-mix(in srgb, var(--success) 40%, transparent) !important; } .hover\:bg-green-500\/20:hover { background-color: color-mix(in srgb, var(--success) 20%, transparent) !important; } .hover\:bg-slate-800\/40:hover { background-color: color-mix(in srgb, var(--surface-2) 40%, transparent) !important; } .border-gray-700\/40 { border-color: color-mix(in srgb, var(--border-strong) 40%, transparent) !important; } .hover\:bg-slate-700\/30:hover { background-color: color-mix(in srgb, var(--border-strong) 30%, transparent) !important; } .bg-green-900\/40 { background-color: color-mix(in srgb, var(--success) 40%, transparent) !important; } .border-orange-500\/20 { border-color: color-mix(in srgb, var(--warning) 20%, transparent) !important; } .border-orange-500\/40 { border-color: color-mix(in srgb, var(--warning) 40%, transparent) !important; } .hover\:bg-orange-900\/40:hover { background-color: color-mix(in srgb, var(--warning) 40%, transparent) !important; } .hover\:border-blue-700:hover { border-color: var(--cta) !important; } .border-green-500\/20 { border-color: color-mix(in srgb, var(--success) 20%, transparent) !important; } .border-red-500\/20 { border-color: color-mix(in srgb, var(--danger) 20%, transparent) !important; } .hover\:text-cyan-300:hover { color: var(--cta) !important; } .text-fuchsia-300 { color: var(--data-6-ink) !important; } .text-fuchsia-400 { color: var(--data-6-ink) !important; } .bg-orange-600 { background-color: var(--warning) !important; } .text-violet-400 { color: var(--data-6-ink) !important; } .border-red-800\/30 { border-color: color-mix(in srgb, var(--danger) 30%, transparent) !important; } .border-green-800\/30 { border-color: color-mix(in srgb, var(--success) 30%, transparent) !important; } .bg-green-600\/20 { background-color: color-mix(in srgb, var(--success) 20%, transparent) !important; } .hover\:bg-green-600\/30:hover { background-color: color-mix(in srgb, var(--success) 30%, transparent) !important; } .bg-purple-500\/15 { background-color: color-mix(in srgb, var(--data-6) 15%, transparent) !important; } .bg-orange-500\/15 { background-color: color-mix(in srgb, var(--warning) 15%, transparent) !important; } .bg-green-600\/15 { background-color: color-mix(in srgb, var(--success) 15%, transparent) !important; } .hover\:bg-green-600\/25:hover { background-color: color-mix(in srgb, var(--success) 25%, transparent) !important; } .hover\:bg-green-900:hover { background-color: var(--success) !important; } .bg-amber-900\/20 { background-color: color-mix(in srgb, var(--warning) 20%, transparent) !important; } .bg-sky-900\/30 { background-color: rgba(var(--cta-rgb), .30) !important; } .text-sky-300 { color: var(--cta) !important; } .border-sky-500\/30 { border-color: rgba(var(--cta-rgb), .30) !important; } .bg-yellow-900\/30 { background-color: color-mix(in srgb, var(--warning) 30%, transparent) !important; } .border-yellow-500\/30 { border-color: color-mix(in srgb, var(--warning) 30%, transparent) !important; } .hover\:bg-red-900\/10:hover { background-color: color-mix(in srgb, var(--danger) 10%, transparent) !important; } .hover\:bg-green-900\/10:hover { background-color: color-mix(in srgb, var(--success) 10%, transparent) !important; } .hover\:bg-yellow-900\/20:hover { background-color: color-mix(in srgb, var(--warning) 20%, transparent) !important; } .hover\:bg-green-500:hover { background-color: var(--success) !important; } .bg-green-900\/30 { background-color: color-mix(in srgb, var(--success) 30%, transparent) !important; } .border-orange-700 { border-color: var(--warning) !important; } .hover\:bg-orange-900\/20:hover { background-color: color-mix(in srgb, var(--warning) 20%, transparent) !important; } .hover\:bg-purple-900\/20:hover { background-color: color-mix(in srgb, var(--data-6) 20%, transparent) !important; } .hover\:bg-green-700:hover { background-color: var(--success) !important; } .text-yellow-300\/80 { color: color-mix(in srgb, var(--warning) 80%, transparent) !important; } .text-green-500 { color: var(--success-ink) !important; } .border-emerald-700 { border-color: var(--success) !important; } .hover\:bg-emerald-900\/20:hover { background-color: color-mix(in srgb, var(--success) 20%, transparent) !important; } .hover\:border-blue-500\/30:hover { border-color: rgba(var(--cta-rgb), .30) !important; } .hover\:text-blue-400:hover { color: var(--cta) !important; } .hover\:bg-gray-800\/20:hover { background-color: color-mix(in srgb, var(--surface-2) 20%, transparent) !important; } .divide-gray-800 { border-color: var(--surface-2) !important; } .bg-teal-900\/20 { background-color: color-mix(in srgb, var(--success) 20%, transparent) !important; } .text-teal-400 { color: var(--success-ink) !important; } .bg-emerald-900\/20 { background-color: color-mix(in srgb, var(--success) 20%, transparent) !important; } .hover\:bg-gray-700\/50:hover { background-color: color-mix(in srgb, var(--border-strong) 50%, transparent) !important; } .bg-green-900\/10 { background-color: color-mix(in srgb, var(--success) 10%, transparent) !important; } .focus\:ring-green-500:focus { --tw-ring-color: var(--success) !important; } .border-purple-600\/40 { border-color: color-mix(in srgb, var(--data-6) 40%, transparent) !important; } .bg-purple-900\/10 { background-color: color-mix(in srgb, var(--data-6) 10%, transparent) !important; } .text-purple-600 { color: var(--data-6-ink) !important; } .focus\:ring-purple-500:focus { --tw-ring-color: var(--data-6) !important; } .border-orange-600\/40 { border-color: color-mix(in srgb, var(--warning) 40%, transparent) !important; } .bg-orange-900\/10 { background-color: color-mix(in srgb, var(--warning) 10%, transparent) !important; } .text-orange-600 { color: var(--warning-ink) !important; } .focus\:ring-orange-500:focus { --tw-ring-color: var(--warning) !important; } .divide-gray-700\/50 { border-color: color-mix(in srgb, var(--border-strong) 50%, transparent) !important; } .hover\:bg-gray-700\/30:hover { background-color: color-mix(in srgb, var(--border-strong) 30%, transparent) !important; } .text-blue-600 { color: var(--cta) !important; } .bg-gray-950 { background-color: var(--bg) !important; } .bg-green-950\/50 { background-color: color-mix(in srgb, var(--success) 50%, transparent) !important; } .border-green-700\/50 { border-color: color-mix(in srgb, var(--success) 50%, transparent) !important; } .text-green-200 { color: var(--success-ink) !important; } .text-sky-400 { color: var(--cta) !important; } .bg-purple-900 { background-color: var(--data-6) !important; } .hover\:bg-blue-500:hover { background-color: var(--cta) !important; } .text-slate-50 { color: var(--text-1) !important; } .bg-red-800\/60 { background-color: color-mix(in srgb, var(--danger) 60%, transparent) !important; } .hover\:bg-red-800:hover { background-color: var(--danger) !important; } .text-orange-300\/80 { color: color-mix(in srgb, var(--warning) 80%, transparent) !important; } .hover\:bg-red-600:hover { background-color: var(--danger) !important; } .bg-slate-800\/60 { background-color: color-mix(in srgb, var(--surface-2) 60%, transparent) !important; } .placeholder-slate-600 { color: var(--text-3) !important; } .border-blue-500\/40 { border-color: rgba(var(--cta-rgb), .40) !important; } .border-red-600\/40 { border-color: color-mix(in srgb, var(--danger) 40%, transparent) !important; } /* ── Fond colore Tailwind + text-white ──────────────────────────────── * Le remap des classes nommees change le FOND mais pas le text-white pose * a cote. Sur les jetons clairs (--warning, --success, --danger) le blanc * tombe entre 2,2 et 3,4 : c'est ainsi que « Reconnecter » sortait a 2,20. * Un selecteur COMPOSE rattrape la paire sans toucher au balisage. */ .bg-red-300.text-white, .bg-red-400.text-white, .bg-red-500.text-white, .bg-red-600.text-white, .bg-rose-300.text-white, .bg-rose-400.text-white, .bg-rose-500.text-white, .bg-rose-600.text-white, .bg-pink-300.text-white, .bg-pink-400.text-white, .bg-pink-500.text-white, .bg-pink-600.text-white, .bg-amber-300.text-white, .bg-amber-400.text-white, .bg-amber-500.text-white, .bg-amber-600.text-white, .bg-yellow-300.text-white, .bg-yellow-400.text-white, .bg-yellow-500.text-white, .bg-yellow-600.text-white, .bg-orange-300.text-white, .bg-orange-400.text-white, .bg-orange-500.text-white, .bg-orange-600.text-white, .bg-green-300.text-white, .bg-green-400.text-white, .bg-green-500.text-white, .bg-green-600.text-white, .bg-emerald-300.text-white, .bg-emerald-400.text-white, .bg-emerald-500.text-white, .bg-emerald-600.text-white, .bg-teal-300.text-white, .bg-teal-400.text-white, .bg-teal-500.text-white, .bg-teal-600.text-white, .bg-lime-300.text-white, .bg-lime-400.text-white, .bg-lime-500.text-white, .bg-lime-600.text-white, .bg-violet-300.text-white, .bg-violet-400.text-white, .bg-violet-500.text-white, .bg-violet-600.text-white, .bg-purple-300.text-white, .bg-purple-400.text-white, .bg-purple-500.text-white, .bg-purple-600.text-white, .bg-fuchsia-300.text-white, .bg-fuchsia-400.text-white, .bg-fuchsia-500.text-white, .bg-fuchsia-600.text-white { color: var(--bg) !important; } /* ── Remplissage automatique de Chrome ────────────────────────────────────── Chrome peint les champs pre-remplis en #E8F0FE avec du texte noir, et cette couleur n'est PAS surchargeable par `background-color` : le navigateur la redessine par-dessus. Le seul levier est une ombre interne opaque. Sans cela, un formulaire sombre affiche deux rectangles bleu pale des que le navigateur connait l'identifiant — c'est-a-dire a chaque visite reelle, et jamais pendant les tests a froid. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important; box-shadow: 0 0 0 1000px var(--surface-2) inset !important; -webkit-text-fill-color: var(--text-1) !important; caret-color: var(--text-1); transition: background-color 9999s ease-in-out 0s; /* neutralise le flash */ } /* ── Blanc sur l'etain : 2,24 ─────────────────────────────────────────────── `--accent` est une couleur CLAIRE. Un libelle blanc pose dessus mesure 2,24, et le bouton « Connecter » du panneau Projets etait dans ce cas. Les regles composees `.bg-{famille}.text-white` ne l'attrapent pas : ici le fond vient d'un style INLINE, souvent produit par une liaison Alpine — donc introuvable au grep, et impossible a corriger a la source une par une. Le selecteur d'attribut couvre la famille entiere, y compris les cas a venir. Meme raisonnement pour --mark, qui a lui aussi son encre dediee. */ [style*="var(--accent)"].text-white, [style*="var(--accent)"] > .text-white, [style*="var(--accent)"] .text-white { color: var(--accent-fg) !important; } [style*="var(--mark)"].text-white, [style*="var(--mark)"] > .text-white, [style*="var(--mark)"] .text-white { color: var(--mark-fg) !important; } /* Meme regle, hissee au-dessus de `body.light-mode .text-white` (admin.css:21), qui vaut (0,2,1) contre (0,2,0) et gagnait donc en theme clair. Cette regle generale assombrit tout `.text-white` — juste sur une page claire, faux sur un aplat d'accent : l'initiale d'un avatar marine passait a 2,73. Prefixer par body.light-mode donne (0,3,1) et retablit l'ordre voulu. */ body.light-mode [style*="var(--accent)"].text-white, body.light-mode [style*="var(--accent)"] > .text-white, body.light-mode [style*="var(--accent)"] .text-white { color: var(--accent-fg) !important; } body.light-mode [style*="var(--mark)"].text-white, body.light-mode [style*="var(--mark)"] > .text-white, body.light-mode [style*="var(--mark)"] .text-white { color: var(--mark-fg) !important; } /* ── Encres des couleurs semantiques ──────────────────────────────────────── Une couleur semantique posee en TEXTE sur sa propre teinte a 14 % plafonne entre 3,3 et 4,5 : la teinte eclaircit le fond, l'encre reste la meme. Mesures relevees : --success sur sa teinte 3,35 et 4,47, --data-6 3,86, --cta-ink sur --cta-dim 4,02. D'ou une encre dediee, plus claire que la couleur de remplissage — c'est le procede deja valide pour --cta-ink. La couleur de FOND, elle, ne bouge pas : l'eclaircir abimerait les aplats et les bandeaux. */ :root { --danger-ink: #FE5D66; /* C* 68, contraste 5,34 — porte au bord du gamut a clarte constante */ --success-ink: #0FC578; /* C* 65, contraste 7,11 — porte au bord du gamut a clarte constante */ --warning-ink: #EEBA0A; /* C* 79, contraste 8,94 — porte au bord du gamut a clarte constante */ --data-6-ink: #FE70DE; /* C* 73, contraste 6,58 — porte au bord du gamut a clarte constante */ } body.light-mode { --danger-ink: #B0040F; --success-ink: #015931; --warning-ink: #724A00; --data-6-ink: #8E0378; } /* ════════════════════════════════════════════════════════════════════════ TRANSFORMATION 2026-08-26 — clair « shadow-first » (reference fournie par Manu : cartes blanches sur gris clair, separation par l'ombre douce, pas par un filet dur). Le sombre garde son filet : sur fond profond c'est la bordure qui decoupe, sur fond clair c'est l'ombre. ── */ body.light-mode.ux-shell.ux-shell .naix-home-card { border-color: color-mix(in srgb, var(--border) 45%, transparent) !important; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 28px -14px rgba(0,0,0,.14) !important; } body.light-mode.ux-shell.ux-shell .naix-home-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 18px 40px -16px rgba(0,0,0,.20) !important; } body.light-mode.ux-shell .input-block-v2 { border-color: color-mix(in srgb, var(--border) 55%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 36px -18px rgba(0,0,0,.16); } body.light-mode .ds-modal { border-color: color-mix(in srgb, var(--border) 50%, transparent); box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 32px 80px -32px rgba(0,0,0,.28); } /* ════════════════════════════════════════════════════════════════════════ CHAT A PLAT (redesign 2026-08-26, arbitrage Manu « Tout »). - Colonne de lecture STABLE ~780px (fini la derive 768->880->1000 en xl/2xl : une mesure de lecture fixe est ce qui fait « premium » sur grand ecran). - Message utilisateur = bloc pleine colonne (carte douce), plus de bulle alignee a droite. L'assistant etait deja editorial (flush sur le fond). - Tout en CSS : le HTML des entries n'est PAS touche (le remplacement de la ref d'entry pendant le streaming est un piege documente). ════════════════════════════════════════════════════════════════════════ */ /* `mx-auto` dans un conteneur flex VERTICAL fait dimensionner l'element sur son contenu (les marges auto sur l'axe transverse annulent l'etirement) : la colonne de lecture se rétrécissait autour du message le plus court, d'ou des tours de parole flottant au milieu. On impose donc la largeur. */ body.ux-shell #chat-scroll-area .mx-auto[class*="max-w-3xl"] { width: 100% !important; max-width: 780px !important; } body.ux-shell .group.flex.flex-col:has(> div > .message-bubble-user) { align-items: stretch !important; } body.ux-shell .message-group .flex.justify-end:has(> .message-bubble-user), body.ux-shell .flex.justify-end.gap-3:has(> .message-bubble-user) { justify-content: flex-start !important; } body.ux-shell .message-bubble-user:not(.msg-bubble-editing) { max-width: 100% !important; width: 100%; border-radius: 14px !important; } /* L'avatar auteur flottait a droite de la bulle ; en pleine colonne il devient un element orphelin hors colonne -> masque (layout a plat, l'auteur est evident). Les avatars des AUTRES participants (live collab) restent geres par leur badge nom déjà présent dans la carte. */ body.ux-shell .msg-avatar-user { display: none !important; } /* ════════════════════════════════════════════════════════════════════════ COQUE 2026 (redesign, arbitrage Manu « Tout » 2026-08-26) 1. La barre d'onglets horizontale disparait sous la coque : la navigation entre fils passe par Historique. Le modele chatTabs reste vivant (_openTabForThread/_switchToTab/etat streaming) — on masque le RENDU, pas la mecanique. Les +36px inline sont neutralises via _uxShellOn(). 2. Topbar allegee : le cluster Workstation centre laisse place au dock droit (meme donnee launcherCritical, badges inclus, deja whiteliste par le @click.outside du drawer). La decision Manu 2026-06-22 — pas d'outils Workstation dans le rail gauche — est respectee. 3. Rail elargi avec libelles (>=1024px) : les libelles etaient deja dans le DOM (app.css les masquait d'une seule regle). --ux-rail-w devient LA source de largeur : topbar, historique, panneau projets, atelier et doc studio la consomment tous desormais. ════════════════════════════════════════════════════════════════════════ */ /* La barre d'onglets ne disparait plus : elle EMMENAGE dans la barre du haut (shell-2026.css §21). La masquer avait casse le basculement rapide entre conversations — retour Manu 2026-08-26. */ body.ux-shell .naix-card.naix-docked, body.ux-shell .learn-rail-docked, body.ux-shell .lw-panel--docked { top: var(--topbar-total, 56px) !important; } body.ux-shell .ws-launcher { display: none !important; } @media (min-width: 1024px) { body.ux-shell { --ux-rail-w: 224px; } body.ux-shell #app-sidebar:not(.sidebar-expanded-v3) { width: var(--ux-rail-w) !important; min-width: var(--ux-rail-w) !important; max-width: var(--ux-rail-w) !important; } body.ux-shell #app-sidebar .sidebar-nav-container { align-items: stretch; padding-left: 10px; padding-right: 10px; } body.ux-shell #app-sidebar .sidebar-nav-container .sidebar-nav-item { width: 100%; height: 36px; justify-content: flex-start; gap: 10px; padding: 0 10px; border-radius: 9px; transition: background .14s, color .14s; } body.ux-shell #app-sidebar .sidebar-nav-container .sidebar-nav-item svg { width: 17px; height: 17px; } body.ux-shell #app-sidebar .sidebar-nav-container .sidebar-nav-item:hover { background: var(--surface-hover); } /* Actif = surface discrete + encre pleine + filet d'accent a gauche. L'aplat clair plein largeur (--mark) ecrasait la colonne. */ body.ux-shell #app-sidebar .sidebar-nav-container .sidebar-nav-item-active, body.ux-shell #app-sidebar .sidebar-nav-container .ux-rail-primary { background: var(--surface-2) !important; position: relative; } body.ux-shell #app-sidebar .sidebar-nav-container .sidebar-nav-item-active span, body.ux-shell #app-sidebar .sidebar-nav-container .ux-rail-primary span { color: var(--text-1) !important; font-weight: 600; } body.ux-shell #app-sidebar .sidebar-nav-container .sidebar-nav-item-active svg, body.ux-shell #app-sidebar .sidebar-nav-container .ux-rail-primary svg { color: var(--accent) !important; stroke: var(--accent) !important; } /* Pas de filet d'accent externe : la courbure de la pastille le detachait visuellement. L'icone en accent + le libelle en 600 suffisent (references). Le marqueur hérité (::before a left:-10px, 3px de --cta) reste pertinent sur le RAIL D'ICONES (il borde la colonne) mais flotte quand les libelles sont la : on ne le masque donc que deplie. */ body.ux-shell:not(.ux-rail-collapsed) #app-sidebar .sidebar-nav-container .sidebar-nav-item::before { display: none !important; } /* Le traitement « pave plein » historique (--mark / navy) reste pour les rails ICONES (admin/SA/partenaire, et le rail replie). Ici il est neutralise : ses regles de survol portent (1 id, 5 classes), on les bat a egalite + tard. */ body.ux-shell #app-sidebar .sidebar-nav-container .ux-rail-primary:hover, body.ux-shell #app-sidebar .sidebar-nav-container .ux-rail-primary:focus-visible, body.light-mode.ux-shell #app-sidebar .sidebar-nav-container .ux-rail-primary:hover, body.light-mode.ux-shell #app-sidebar .sidebar-nav-container .ux-rail-primary:focus-visible { background: var(--surface-hover) !important; color: var(--text-1) !important; box-shadow: none !important; } body.light-mode.ux-shell.ux-shell #app-sidebar .sidebar-nav-container .ux-rail-primary svg, body.light-mode.ux-shell #app-sidebar .sidebar-nav-container .ux-rail-primary:hover svg { stroke: var(--accent) !important; color: var(--accent) !important; } /* Carte utilisateur : filet de separation, comme les references. */ body.ux-shell #app-sidebar .ux-rail-account { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 6px; } body.ux-shell #app-sidebar .sidebar-nav-container .sidebar-nav-item span { display: inline; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.ux-shell #app-sidebar .sidebar-icon-rail-header { justify-content: flex-start; padding-left: 18px; } /* bas du rail : avatar aligne a gauche comme les items, separateurs pleine largeur */ body.ux-shell #app-sidebar [data-tour="avatar-btn"] { justify-content: flex-start !important; padding-left: 8px; } /* le libelle du pave Accueil : encre du pave (blanc sur navy) en clair — sans quoi le span herite du texte sombre et disparait sur l'aplat */ body.ux-shell #app-sidebar .sidebar-nav-container hr, body.ux-shell #app-sidebar .sidebar-nav-container [class*="separator"] { width: 100%; align-self: stretch; } } /* 4. Regime TABLETTE (768-1023) : le rail d'icones 64px est VISIBLE (il etait a largeur 0, l'iPad recevait un telephone etire). La bottom-nav mobile est conservee (acces Outils/FAB) ; le rail donne Accueil/Historique/Projets/ Docs au doigt, et --ux-rail-w aligne topbar + panneaux dessus. */ @media (min-width: 768px) and (max-width: 1023.98px) { body.ux-shell #app-sidebar:not(.sidebar-expanded-v3) { display: flex !important; width: var(--ux-rail-w, 64px) !important; min-width: var(--ux-rail-w, 64px) !important; max-width: var(--ux-rail-w, 64px) !important; overflow: hidden !important; } } /* Historique : pastille « génère en arrière-plan » (réhéberge l'indicateur perdu avec la barre d'onglets) + pavé Accueil à paire fond/encre explicite (le libellé disparaissait selon le thème quand l'encre héritait). */ .ux-hist-dot--live { background: var(--success) !important; animation: uxHistPulse 1.2s ease-in-out infinite; } @keyframes uxHistPulse { 50% { opacity: .3; } } /* ════════════════════════════════════════════════════════════════════════ COQUE 2026 — finition du panneau de gauche (retour Manu : « inesthetique, pas rabattable, zones sans label »). - Repli 224 <-> 64 par --ux-rail-w, pilote par body.ux-rail-collapsed : TOUT ce qui s'aligne dessus (topbar, historique, projets, atelier) suit. - En-tete : marque a gauche + chevron de repli a droite (plus de vide). - Bas de rail : carte utilisateur nom + email (l'avatar n'est plus orphelin). - Filet de separation + rythme vertical. ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { body.ux-shell.ux-rail-collapsed { --ux-rail-w: 64px; } body.ux-shell #app-sidebar { border-right: 1px solid var(--border); } body.ux-shell #app-sidebar:not(.sidebar-expanded-v3) { transition: width .18s cubic-bezier(.16,1,.3,1), min-width .18s cubic-bezier(.16,1,.3,1), max-width .18s cubic-bezier(.16,1,.3,1); } /* En-tete : marque a gauche, chevron a droite */ body.ux-shell #app-sidebar .sidebar-icon-rail-header { justify-content: space-between !important; padding-left: 16px !important; padding-right: 10px !important; } body.ux-shell.ux-rail-collapsed #app-sidebar .sidebar-icon-rail-header { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } /* Vraie affordance de controle (le chevron nu sur fond plat faisait « cheap » face aux references : surface, filet, ombre courte, etats francs). */ .ux-rail-collapse-btn { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-2); box-shadow: 0 1px 2px rgba(0,0,0,.16); cursor: pointer; opacity: .82; transition: background .16s, color .16s, border-color .16s, opacity .16s, transform .16s; } .ux-rail-collapse-btn svg { transition: transform .2s cubic-bezier(.16,1,.3,1); } .ux-rail-collapse-btn:hover { opacity: 1; background: var(--surface-2); color: var(--text-1); border-color: var(--border-strong, var(--border)); } .ux-rail-collapse-btn:active { transform: scale(.94); } body.light-mode .ux-rail-collapse-btn { box-shadow: 0 1px 2px rgba(0,0,0,.07); } /* Replie : le chevron passe SOUS la marque pour rester atteignable */ /* Replie : l'en-tete s'empile (marque puis chevron) — en absolu le chevron recouvrait la premiere icone de navigation. */ body.ux-shell.ux-rail-collapsed #app-sidebar .sidebar-icon-rail-header { flex-direction: column; gap: 6px; min-height: 0 !important; padding-bottom: 8px !important; } /* Items : le libelle s'efface au repli (l'icone reste centree) */ body.ux-shell.ux-rail-collapsed #app-sidebar .sidebar-nav-container { align-items: center; padding-left: 0; padding-right: 0; } body.ux-shell.ux-rail-collapsed #app-sidebar .sidebar-nav-container .sidebar-nav-item { width: 40px; justify-content: center; padding: 0; gap: 0; } body.ux-shell.ux-rail-collapsed #app-sidebar .sidebar-nav-container .sidebar-nav-item span { display: none; } /* Carte utilisateur */ body.ux-shell #app-sidebar .ux-rail-account { justify-content: stretch !important; padding: 0 10px; } body.ux-shell #app-sidebar .ux-rail-account-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: var(--radius-md); text-align: left; transition: background .15s; } body.ux-shell #app-sidebar .ux-rail-account-btn:hover { background: var(--surface-hover); } /* .sidebar-avatar-btn est verrouille a 40px par l'icon-rail V3 : le bloc identite recevait 0px de large et l'avatar etait ecrase en ovale. */ body.ux-shell #app-sidebar .ux-rail-account-btn { width: 100% !important; height: auto !important; } body.ux-shell #app-sidebar .ux-rail-account-btn .sidebar-avatar { flex: none !important; } /* Le chevron est premier dans le DOM (insere en tete d'en-tete) : `order` le renvoie a droite de la marque sans restructurer le HTML. */ /* Le chevron est premier dans le DOM : `order` le renvoie a droite de la marque sans restructurer le HTML. (La regle precedente posait order:0 sur le chevron avec une specificite SUPERIEURE — elle s'annulait elle-meme.) */ body.ux-shell #app-sidebar .sidebar-icon-rail-header > .ux-rail-collapse-btn { order: 9; } .ux-rail-account-id { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ux-rail-account-name { font-size: 12.5px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .ux-rail-account-mail { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } body.ux-shell.ux-rail-collapsed #app-sidebar .ux-rail-account { padding: 0; justify-content: center !important; } body.ux-shell.ux-rail-collapsed #app-sidebar .ux-rail-account-btn { width: auto; padding: 4px; gap: 0; } body.ux-shell.ux-rail-collapsed .ux-rail-account-id { display: none; } /* Rythme : le separateur devient un vrai filet pleine largeur */ body.ux-shell .ux-admin-rail .sidebar-nav-sep, body.ux-shell #app-sidebar .sidebar-nav-sep { width: auto; align-self: stretch; margin: 10px 16px; height: 1px; background: var(--border); border: none; } body.ux-shell.ux-rail-collapsed #app-sidebar .sidebar-nav-sep { margin: 10px 14px; } } /* En deca de 1024px, le rail reste compact : le repli ne s'applique pas. */ .ux-rail-account-id { display: none; } @media (min-width: 1024px) { body.ux-shell:not(.ux-rail-collapsed) .ux-rail-account-id { display: flex; } }