/* Design « Nouveau » (v2) — chargé après toutes les feuilles de l'écran, avant buttons.css. Ne change que trois choses : les bordures (angles arrondis, filets fins), les couleurs (gris presque noirs, accent bleu) et la police (une seule famille sans empattements, titres compris). Ni mise en page, ni espacements, ni tailles, ni icônes, ni libellés. Police : SF Pro (système) sur Apple, Inter ailleurs. Tout est rangé sous html[data-design="v2"] : sans cet attribut (Réglages > Apparence > Classique), le design classique s'affiche exactement comme avant. L'attribut est posé par le petit script en tête d'index.html, avant les feuilles de style. La seule règle hors de cette portée est la mise en ligne du commutateur Apparence lui-même (il existe dans les deux designs). Rayons, choisis une fois pour toutes : 999px boutons, puces, étiquettes, champs de recherche, interrupteurs 26px zone de saisie de la conversation (= demi-hauteur sur une ligne : une pilule) 20px fenêtres et boîtes de dialogue, bulles de message 16px cartes et panneaux 14px menus flottants 12px lignes de liste, champs de formulaire, encadrés, logos 50 % avatars, boutons d'icône, points d'état Couleur : bleu plein (#3D6FD8, texte blanc) pour les actions et ce qui est activé ; bleu clair (#7AA7F5) pour le texte et les icônes d'accent sur fond sombre ; ivoire → gris clair pour les boutons en inversion ; ocre (« il faut vous ») et vert (« disponible ») gardent leur sens. */ /* Commutateur Apparence (Réglages) : présent dans les deux designs. */ .design-seg { display: flex; flex: none; gap: 6px; } /* ══ Jetons ════════════════════════════════════════════════════════════════ */ html[data-design="v2"] { --night: #0F0F0F; /* fond de page */ --navy: #111111; /* encre foncée sur fond clair (boutons en inversion, avatars) */ --turq: #7AA7F5; /* accent : texte, icônes, liens sur fond sombre */ --turq-soft: #A9C6F9; --ivory: #ECECEC; /* texte principal, boutons en inversion */ --sand: #C4C4C4; /* texte secondaire appuyé */ --mute: #9A9A9A; /* texte secondaire */ --ochre: #C88A1C; --ochre-light: #E2A73C; --danger: #F28B82; --ready: #8FD9A8; --line: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.12); --card: rgba(255,255,255,.04); /* SF Pro sur Mac et iPhone, Inter (Google Fonts, chargée pour ce design seulement) ailleurs ; titres compris. */ --serif: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --v2-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --v2-side: #141414; /* barre latérale, panneau Tâches */ --v2-panel: #1B1B1B; /* zone de saisie */ --v2-pop: #1F1F1F; /* menus flottants */ --v2-modal: #1C1C1C; /* fenêtres, boîtes de dialogue */ --v2-sel: #262626; /* ligne choisie */ --v2-me: #2A2A2A; /* bulle de l'équipe */ --v2-user: #223D72; /* bulle de l'utilisateur (texte ivoire : 8,98:1) */ --v2-accent: #3D6FD8; /* bouton principal, cases cochées (texte blanc : 4,7:1) */ --v2-accent-hover: #4A7BE2; --v2-toggle: #3B82F6; /* interrupteur activé */ --v2-tint: rgba(61,111,216,.16); --v2-tint-soft: rgba(61,111,216,.07); --v2-tint-line: rgba(122,167,245,.35); --v2-hover: rgba(255,255,255,.05); --v2-hover-2: rgba(255,255,255,.08); --v2-hair: rgba(255,255,255,.08); --v2-hair-hover: rgba(255,255,255,.18); --v2-backdrop: rgba(0,0,0,.62); --v2-shadow: 0 18px 44px rgba(0,0,0,.55); --v2-shadow-lg: 0 24px 64px rgba(0,0,0,.6); } /* ══ Blanc neutre à la place du blanc chaud classique (rgba(246,242,234,…)) ══ Variables de famille des écrans, puis les valeurs écrites en dur (générées à l'identique, même opacité). Placé avant les règles du v2 : celles-ci gardent le dernier mot. */ html[data-design="v2"] .apps-filters, html[data-design="v2"] .apps, html[data-design="v2"] .app-modal { --apps-rest: rgba(255,255,255,.045); --apps-raised: rgba(255,255,255,.075); --apps-hover: rgba(255,255,255,.10); --apps-press: rgba(255,255,255,.13); } html[data-design="v2"] .ch, html[data-design="v2"] .ch-modal { --ch-rest: rgba(255,255,255,.045); --ch-raised: rgba(255,255,255,.075); --ch-hover: rgba(255,255,255,.10); --ch-press: rgba(255,255,255,.13); } html[data-design="v2"] .mdl-cols, html[data-design="v2"] .mdl-modal { --mdl-rest: rgba(255,255,255,.045); --mdl-raised: rgba(255,255,255,.075); --mdl-hover: rgba(255,255,255,.10); --mdl-press: rgba(255,255,255,.14); --mdl-chip: rgba(255,255,255,.10); } html[data-design="v2"] .tm, html[data-design="v2"] .tm-modal, html[data-design="v2"] .tm-menu { --tm-rest: rgba(255,255,255,.045); --tm-raised: rgba(255,255,255,.075); --tm-hover: rgba(255,255,255,.10); --tm-press: rgba(255,255,255,.14); } html[data-design="v2"] .appr-page, html[data-design="v2"] .vc, html[data-design="v2"] .approval-mini { --appr-rest: rgba(255,255,255,.045); --appr-raised: rgba(255,255,255,.075); --appr-band: rgba(255,255,255,.05); --appr-hover: rgba(255,255,255,.10); --appr-press: rgba(255,255,255,.14); } html[data-design="v2"] .dlg-back { --dlg-well: rgba(255,255,255,.06); --dlg-soft: rgba(255,255,255,.09); --dlg-soft-hover: rgba(255,255,255,.16); } html[data-design="v2"] .tone-paused { background: rgba(255,255,255,.10); } html[data-design="v2"] .nav button:hover { background: rgba(255,255,255,.07); } html[data-design="v2"] .agent-card:hover { background: rgba(255,255,255,.06); } html[data-design="v2"] .live-row:hover { background: rgba(255,255,255,.04); } html[data-design="v2"] .agent-row:hover { background: rgba(255,255,255,.07); } html[data-design="v2"] .mission-row { background: rgba(255,255,255,.025); } html[data-design="v2"] .day-label::before, html[data-design="v2"] .day-label::after { background: rgba(255,255,255,.12); } html[data-design="v2"] .settings-row { background: rgba(255,255,255,.025); } html[data-design="v2"] .group-card:hover, html[data-design="v2"] .group-card:focus-visible { background: rgba(255,255,255,.06); } html[data-design="v2"] .group-member { background: rgba(255,255,255,.05); } html[data-design="v2"] .room-composer { background: rgba(255,255,255,.05); } html[data-design="v2"] .conv-search { background: rgba(255,255,255,.05); } html[data-design="v2"] .conv-item:hover { background: rgba(255,255,255,.06); } html[data-design="v2"] .text-block th { background: rgba(255,255,255,.06); } html[data-design="v2"] .welcome-card { background: rgba(255,255,255,.04); } html[data-design="v2"] .pending { background: rgba(255,255,255,.06); } html[data-design="v2"] .composer { background: rgba(255,255,255,.05); } html[data-design="v2"] .tool-btn:hover:not(:disabled) { background: rgba(255,255,255,.06); } html[data-design="v2"] .agent-preview { background: rgba(255,255,255,.04); } html[data-design="v2"] .apps-search input { background: rgba(255,255,255,.06); } html[data-design="v2"] .apps-search input:hover { background: rgba(255,255,255,.08); } html[data-design="v2"] .apps-search input:focus { background: rgba(255,255,255,.08); } html[data-design="v2"] .apps-manage { background: rgba(255,255,255,.09); } html[data-design="v2"] .apps-row.on:hover .apps-manage { background: rgba(255,255,255,.16); } html[data-design="v2"] .apps-link { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .apps-row.is-skel .apps-logo { background: rgba(255,255,255,.08); } html[data-design="v2"] .sk { background: rgba(255,255,255,.08); } html[data-design="v2"] .apps-m-progress { background: rgba(255,255,255,.06); } html[data-design="v2"] .ch-chip { background: rgba(255,255,255,.07); } html[data-design="v2"] .ch-cta.alt { background: rgba(255,255,255,.10); } html[data-design="v2"] .ch-tile:hover .ch-cta.alt, html[data-design="v2"] .ch-tile:focus-visible .ch-cta.alt { background: rgba(255,255,255,.18); } html[data-design="v2"] .ch-tile.is-skel .ch-logo { background: rgba(255,255,255,.08); } html[data-design="v2"] .ch-sk { background: rgba(255,255,255,.08); } html[data-design="v2"] .ch-link { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .ch-act { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .ch-qr-box.wait { background: rgba(255,255,255,.06); } html[data-design="v2"] .ch-steps li::before { background: rgba(255,255,255,.12); } html[data-design="v2"] .ch-busy { background: rgba(255,255,255,.06); } html[data-design="v2"] .ch-ok { background: rgba(255,255,255,.06); } html[data-design="v2"] .ch-ext { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .mdl-link { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .mdl-sk { background: rgba(255,255,255,.08); } html[data-design="v2"] .mdl-bars i { background: rgba(255,255,255,.28); } html[data-design="v2"] .modal .mdl-search input { background: rgba(255,255,255,.06); } html[data-design="v2"] .modal .mdl-search input:hover { background: rgba(255,255,255,.08); } html[data-design="v2"] .modal .mdl-search input:focus { background: rgba(255,255,255,.08); } html[data-design="v2"] .mdl-info { background: rgba(255,255,255,.06); } html[data-design="v2"] .model-pill.is-fixed { background: rgba(255,255,255,.06); } html[data-design="v2"] .model-pill.is-fixed:hover { background: rgba(255,255,255,.06); } html[data-design="v2"] .tm-tag { background: rgba(255,255,255,.07); } html[data-design="v2"] .tm-tag.admin { background: rgba(255,255,255,.14); } html[data-design="v2"] .tm-tag-policy { background: rgba(255,255,255,.05); } html[data-design="v2"] .btn.tm-soft { background: rgba(255,255,255,.09); } html[data-design="v2"] .btn.tm-soft:hover:not(:disabled) { background: rgba(255,255,255,.16); } html[data-design="v2"] .tm-sk { background: rgba(255,255,255,.08); } html[data-design="v2"] .tm-link { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .tm-modal .tm-temp { background: rgba(255,255,255,.07); } html[data-design="v2"] .btn.tm-copy.is-done { background: rgba(255,255,255,.09); } html[data-design="v2"] .appr-kind { background: rgba(255,255,255,.08); } html[data-design="v2"] .appr-more, html[data-design="v2"] .appr-link { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .btn.appr-copy { background: rgba(255,255,255,.09); } html[data-design="v2"] .btn.appr-copy:hover:not(:disabled) { background: rgba(255,255,255,.16); } html[data-design="v2"] .btn.appr-soft { background: rgba(255,255,255,.09); } html[data-design="v2"] .btn.appr-soft:hover:not(:disabled) { background: rgba(255,255,255,.16); } html[data-design="v2"] .appr-mark.no { background: rgba(255,255,255,.09); } html[data-design="v2"] .appr-conv { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .appr-rrow + .appr-rrow { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } html[data-design="v2"] .appr-rrow:hover { background: rgba(255,255,255,.05); } html[data-design="v2"] .appr-rbtn { background: rgba(255,255,255,.1); } html[data-design="v2"] .appr-rrow:hover .appr-rbtn, html[data-design="v2"] .appr-rbtn:hover { background: rgba(255,255,255,.16); } html[data-design="v2"] .vc-wait a { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .dlg-input { background: rgba(255,255,255,.06); } html[data-design="v2"] .dlg-input:hover { background: rgba(255,255,255,.08); } html[data-design="v2"] .dlg-input:focus { background: rgba(255,255,255,.08); } html[data-design="v2"] .cc { background: rgba(255,255,255,.05); } html[data-design="v2"] .cc-logo-wait { background: rgba(255,255,255,.08); } html[data-design="v2"] .cc-hint a, html[data-design="v2"] .cc-unknown a { text-decoration-color: rgba(255,255,255,.4); } html[data-design="v2"] .cc-chip { background: rgba(255,255,255,.07); } html[data-design="v2"] .kc-ico { background: rgba(255,255,255,.07); } html[data-design="v2"] .chat-event-in { background: rgba(255,255,255,.05); } html[data-design="v2"] .proj-card:hover, html[data-design="v2"] .proj-card:focus-visible { background: rgba(255,255,255,.06); } html[data-design="v2"] .proj-member { background: rgba(255,255,255,.05); } html[data-design="v2"] .task-state-scheduled { background: rgba(255,255,255,.05); } html[data-design="v2"] .task-error.soft { background: rgba(255,255,255,.05); } html[data-design="v2"] .task-answer-input { background: rgba(255,255,255,.05); } html[data-design="v2"] .task-note { background: rgba(255,255,255,.05); } html[data-design="v2"] .pk-box { background: rgba(255,255,255,.05); } html[data-design="v2"] .pk-chip-in { background: rgba(255,255,255,.04); } html[data-design="v2"] .skel { background: rgba(255,255,255,.08); } html[data-design="v2"] .model-pill:hover { background: rgba(255,255,255,.06); } html[data-design="v2"] .mm-search input { background: rgba(255,255,255,.05); } html[data-design="v2"] .model-opt:hover { background: rgba(255,255,255,.06); } html[data-design="v2"] .agent-pill:hover { background: rgba(255,255,255,.06); } html[data-design="v2"] .agent-opt:hover { background: rgba(255,255,255,.06); } /* Survols pleins : ivoire du v2 (et non blanc pur), rouge clair du v2 (et non saumon) */ html[data-design="v2"] .btn.apps-primary:hover:not(:disabled), html[data-design="v2"] .btn.mdl-primary:hover:not(:disabled), html[data-design="v2"] .dlg-back .btn-stop:hover:not(:disabled) { background: var(--ivory); } html[data-design="v2"] .ch-tile:hover .ch-cta, html[data-design="v2"] .ch-tile:focus-visible .ch-cta { background: var(--ivory); } html[data-design="v2"] .btn.tm-danger:hover:not(:disabled) { background: #F6A8A1; } /* ══ Base ══════════════════════════════════════════════════════════════════ */ html[data-design="v2"], html[data-design="v2"] body { background: var(--night); font-family: var(--v2-sans); } html[data-design="v2"] .shell { background: var(--night); } html[data-design="v2"] ::selection { background: rgba(61,111,216,.55); color: #fff; } html[data-design="v2"]::-webkit-scrollbar-thumb, html[data-design="v2"] ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.14); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; } html[data-design="v2"]::-webkit-scrollbar-thumb:hover, html[data-design="v2"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.24); } html[data-design="v2"]::-webkit-scrollbar-track, html[data-design="v2"] ::-webkit-scrollbar-track, html[data-design="v2"]::-webkit-scrollbar-corner, html[data-design="v2"] ::-webkit-scrollbar-corner { background: transparent; } /* Pulsation des points « en direct » : même rythme, en bleu. */ @keyframes v2Pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(122,167,245,.5); } 70% { box-shadow: 0 0 0 6px rgba(122,167,245,0); } } html[data-design="v2"] .avatar[data-state="working"]::after, html[data-design="v2"] .tone-working::before, html[data-design="v2"] .health-title .dot, html[data-design="v2"] .live-panel-head .dot, html[data-design="v2"] .row-state.tone-working .dot { animation-name: v2Pulse; } html[data-design="v2"] .health.bad .dot { animation: none; } /* ── Typographie : une seule famille sans empattements, titres en graisse moyenne un peu resserrés, plus d'italique décoratif ── */ html[data-design="v2"] .display { letter-spacing: -.01em; } html[data-design="v2"] .display em { font-style: normal; } html[data-design="v2"] .empty.big .display, html[data-design="v2"] .proj-synthesis-head .display { font-style: normal; } html[data-design="v2"] .avatar, html[data-design="v2"] .apps-av, html[data-design="v2"] .ch-av, html[data-design="v2"] .brand-mark, html[data-design="v2"] .cc-logo span, html[data-design="v2"] .apps-logo > span { font-style: normal; font-weight: 600; } html[data-design="v2"] .eyebrow, html[data-design="v2"] .brand-sub { color: var(--mute); } /* ══ Composants communs ════════════════════════════════════════════════════ */ html[data-design="v2"] .card { border-radius: 16px; border-color: var(--v2-hair); } html[data-design="v2"] .btn { border-radius: 999px; } html[data-design="v2"] .btn-primary { background-color: var(--v2-accent); color: #fff; } html[data-design="v2"] .btn-primary:hover:not(:disabled) { opacity: 1; background-color: var(--v2-accent-hover); } html[data-design="v2"] .btn-ghost { border-color: rgba(255,255,255,.16); } html[data-design="v2"] .btn-ghost:hover:not(:disabled) { border-color: rgba(255,255,255,.34); } html[data-design="v2"] .btn-outline { border-color: var(--v2-tint-line); } html[data-design="v2"] .btn-outline:hover { background-color: var(--v2-tint); } html[data-design="v2"] .icon-btn { border-radius: 999px; } html[data-design="v2"] .icon-btn:hover { border-color: transparent; background-color: var(--v2-hover-2); } html[data-design="v2"] .head-btn { border-radius: 999px; border-color: var(--v2-hair); } html[data-design="v2"] .head-btn:hover:not(:disabled) { border-color: var(--v2-hair-hover); } html[data-design="v2"] .head-btn.active { border-color: var(--v2-tint-line); } /* Conversations privées (front-conversation) : bouton de partage, ligne « Partagée », message d'une conversation illisible. */ html[data-design="v2"] .share-btn.active { background-color: var(--v2-tint); color: var(--turq); } html[data-design="v2"] .conv-blocked .btn { border-radius: 999px; } html[data-design="v2"] .pill, html[data-design="v2"] .badge, html[data-design="v2"] .row-state { border-radius: 999px; } html[data-design="v2"] .tone-working { background-color: var(--v2-tint); } html[data-design="v2"] .badge { background-color: var(--ochre-light); color: #111; } html[data-design="v2"] .badge.live, html[data-design="v2"] .badge.soft { background-color: var(--v2-tint); color: var(--turq); } html[data-design="v2"] .switch { border-radius: 999px; background-color: rgba(255,255,255,.18); } html[data-design="v2"] .switch::after { border-radius: 50%; background-color: #fff; } html[data-design="v2"] .switch.on { background-color: var(--v2-toggle); } html[data-design="v2"] .empty { border-radius: 16px; border-color: rgba(255,255,255,.14); } html[data-design="v2"] .spinner { border-color: rgba(122,167,245,.25); border-top-color: var(--turq); } html[data-design="v2"] .progress, html[data-design="v2"] .progress > span { border-radius: 999px; } html[data-design="v2"] .progress { background-color: rgba(255,255,255,.08); } html[data-design="v2"] .toast { border-radius: 16px; box-shadow: var(--v2-shadow); } html[data-design="v2"] .dot, html[data-design="v2"] .bullets li::before { border-radius: 50%; } html[data-design="v2"] .avatar { border-radius: 50%; --av-inset: 14.645%; } /* rond : le point d'état se pose sur le cercle (voir app.css) */ /* ── Connexion ── */ html[data-design="v2"] .login-card { border-radius: 20px; background-color: #161616; border-color: var(--v2-hair); } html[data-design="v2"] .login-card input, html[data-design="v2"] .modal input, html[data-design="v2"] .modal textarea, html[data-design="v2"] .modal select { border-radius: 12px; background-color: rgba(255,255,255,.05); border-color: var(--v2-hair); } html[data-design="v2"] .login-card input:focus, html[data-design="v2"] .modal input:focus, html[data-design="v2"] .modal textarea:focus, html[data-design="v2"] .modal select:focus { border-color: var(--turq); } /* ══ Barre latérale ════════════════════════════════════════════════════════ */ html[data-design="v2"] .sidebar { background-color: var(--v2-side); border-right-color: rgba(255,255,255,.06); } html[data-design="v2"] .brand-mark { border-radius: 50%; background-color: var(--v2-accent); color: #fff; } html[data-design="v2"] .menu-toggle { border-radius: 999px; border-color: var(--v2-hair-hover); } html[data-design="v2"] .nav button { border-radius: 12px; } html[data-design="v2"] .nav button:hover { background-color: var(--v2-hover); } html[data-design="v2"] .nav button.active { background-color: var(--v2-sel); color: var(--ivory); border-left-color: transparent; } html[data-design="v2"] .nav button.active .badge.live { background-color: var(--v2-tint); } html[data-design="v2"] .health { border-radius: 12px; background-color: rgba(255,255,255,.035); border-color: var(--v2-hair); } html[data-design="v2"] .health.bad { background-color: rgba(200,138,28,.10); border-color: rgba(200,138,28,.35); } html[data-design="v2"] .collapse-toggle { border-radius: 12px; border-color: var(--v2-hair); } html[data-design="v2"] .collapse-toggle:hover { border-color: var(--v2-hair-hover); } html[data-design="v2"] .sidebar.collapsed .nav .badge { border-color: var(--v2-side); } html[data-design="v2"] .sidebar.collapsed .health { background-color: transparent; border-color: transparent; } /* ══ Écrans ════════════════════════════════════════════════════════════════ */ /* Accueil */ html[data-design="v2"] .stats { border-radius: 16px; overflow: hidden; border-color: var(--v2-hair); } html[data-design="v2"] .stat { background-color: #151515; } html[data-design="v2"] .live-tasks { border-color: var(--v2-tint-line); background-color: var(--v2-tint-soft); } html[data-design="v2"] .live-tasks:hover { border-color: var(--turq); } html[data-design="v2"] .agent-card:hover { border-color: var(--v2-hair-hover); background-color: rgba(255,255,255,.06); } html[data-design="v2"] .agent-card.is-live { border-color: var(--v2-tint-line); } html[data-design="v2"] .live-panel { border-radius: 16px; overflow: hidden; border-color: var(--v2-tint-line); background-color: var(--v2-tint-soft); } html[data-design="v2"] .live-panel-head { border-bottom-color: rgba(122,167,245,.18); } /* Agents */ html[data-design="v2"] .agent-row { border-radius: 12px; } html[data-design="v2"] .agent-row:hover { background-color: var(--v2-hover); } html[data-design="v2"] .agent-row.selected { background-color: var(--v2-sel); border-left-color: transparent; } /* Missions, réglages : tableaux arrondis (le débordement est déjà masqué) */ html[data-design="v2"] .table { border-radius: 16px; border-color: var(--v2-hair); } /* Groupes */ html[data-design="v2"] .group-card { border-radius: 16px; border-color: var(--v2-hair); } html[data-design="v2"] .group-card:hover, html[data-design="v2"] .group-card:focus-visible { border-color: var(--v2-hair-hover); } html[data-design="v2"] .group-card.running { border-color: var(--v2-tint-line); background-color: var(--v2-tint-soft); } html[data-design="v2"] .group-member, html[data-design="v2"] .gm-lead, html[data-design="v2"] .gm-model, html[data-design="v2"] .gm-paused { border-radius: 999px; } html[data-design="v2"] .group-member { border-color: var(--v2-hair); } html[data-design="v2"] .gm-model { background-color: var(--v2-tint); border-color: rgba(122,167,245,.25); } html[data-design="v2"] .room { border-radius: 16px; background-color: rgba(255,255,255,.02); border-color: var(--v2-hair); } html[data-design="v2"] .room-msg.user .room-msg-text { border-radius: 20px; background-color: var(--v2-user); color: var(--ivory); } html[data-design="v2"] .room-msg.user .mention, html[data-design="v2"] .room-msg.user .mention-user { color: var(--ivory); } html[data-design="v2"] .room-msg.system, html[data-design="v2"] .room-msg.room-ask { border-radius: 4px 12px 12px 4px; } html[data-design="v2"] .room-ask-banner { border-radius: 12px; } html[data-design="v2"] .room-jump-wrap .btn { box-shadow: var(--v2-shadow); } html[data-design="v2"] .room-composer { border-radius: 26px; background-color: var(--v2-panel); border-color: var(--v2-hair); } html[data-design="v2"] .room-composer:focus-within { border-color: var(--v2-hair-hover); } /* ══ Conversation ══════════════════════════════════════════════════════════ */ html[data-design="v2"] .chat-layout { background-color: transparent; } html[data-design="v2"] .conv-search { border-radius: 999px; background-color: rgba(255,255,255,.06); border-color: var(--v2-hair); } html[data-design="v2"] .conv-search:focus { border-color: var(--v2-tint-line); } html[data-design="v2"] .conv-item { border-radius: 12px; } html[data-design="v2"] .conv-item:hover { background-color: var(--v2-hover); } html[data-design="v2"] .conv-item.selected { background-color: var(--v2-sel); border-left-color: transparent; } html[data-design="v2"] .conv-tools { border-radius: 8px; background-color: #1B1B1B; } html[data-design="v2"] .conv-item.selected .conv-tools { background-color: var(--v2-sel); } html[data-design="v2"] .chat.dropping::after { border-radius: 20px; border-color: var(--turq); background-color: rgba(15,15,15,.88); } html[data-design="v2"] .chat-head select { border-radius: 12px; border-color: var(--v2-hair); } /* Fil : bulle de l'équipe, blocs de code, plan, étapes */ html[data-design="v2"] .msg-me .bubble { border-radius: 20px; background-color: var(--v2-user); color: var(--ivory); } html[data-design="v2"] .msg-me.queued .bubble { background-color: transparent; border-color: var(--v2-tint-line); } /* Sélection et liens lisibles sur la bulle bleue de l'utilisateur. */ html[data-design="v2"] .msg-me .bubble::selection, html[data-design="v2"] .room-msg.user .room-msg-text::selection { background: rgba(255,255,255,.22); color: var(--ivory); } html[data-design="v2"] .msg-me .bubble a, html[data-design="v2"] .room-msg.user .room-msg-text a { color: var(--ivory); text-decoration-color: rgba(255,255,255,.55); } /* Arrêter : carré plein arrondi (Nouveau) ; le Classique garde le carré en contour. */ html[data-design="v2"] .ico-stop .stop-line { display: none; } html[data-design="v2"] .ico-stop .stop-solid { display: inline; } html[data-design="v2"] .text-block code { border-radius: 6px; background-color: rgba(255,255,255,.06); border-color: var(--v2-hair); } html[data-design="v2"] .text-block pre { border-radius: 12px; background-color: #161616; border-color: var(--v2-hair); } html[data-design="v2"] .text-block pre code { background-color: transparent; border: 0; } html[data-design="v2"] .text-block blockquote { border-left-color: var(--line-strong); } html[data-design="v2"] .text-block .tbl { border-radius: 12px; } html[data-design="v2"] .plan-summary, html[data-design="v2"] .steps { border-left-color: var(--line-strong); } html[data-design="v2"] .task-box { border-radius: 5px; border-color: rgba(255,255,255,.3); } html[data-design="v2"] .task.t-completed .task-box { background-color: var(--v2-accent); border-color: var(--v2-accent); } html[data-design="v2"] .task.t-completed .task-box .ico { color: #fff; } html[data-design="v2"] .task-spin { border-color: rgba(122,167,245,.25); border-top-color: var(--turq); } html[data-design="v2"] .task.t-completed .task-txt { text-decoration-color: rgba(154,154,154,.55); } html[data-design="v2"] .typing span { border-radius: 50%; } html[data-design="v2"] .turn-error { border-radius: 12px; } html[data-design="v2"] .steer-note { border-radius: 4px 12px 12px 4px; } /* Réponses proposées : des cartes arrondies, neutres ; « Réessayer » en pilule */ html[data-design="v2"] .choice-btn { border-radius: 12px; background-color: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--ivory); } html[data-design="v2"] .choice-btn:hover { background-color: var(--v2-hover-2); color: var(--ivory); border-color: var(--v2-hair-hover); } html[data-design="v2"] .quick-btn { border-radius: 999px; border-color: var(--v2-hair); } html[data-design="v2"] .quick-btn:hover { border-color: var(--v2-hair-hover); } html[data-design="v2"] .welcome-card { border-radius: 16px; background-color: rgba(255,255,255,.04); border-color: var(--v2-hair); } html[data-design="v2"] .welcome-card:hover { border-color: var(--v2-hair-hover); background-color: rgba(255,255,255,.07); } html[data-design="v2"] .chip { border-radius: 999px; border-color: rgba(255,255,255,.14); color: var(--sand); } html[data-design="v2"] .chip:hover { background-color: var(--v2-hover-2); color: var(--ivory); } html[data-design="v2"] .chip.active { background-color: var(--ivory); border-color: var(--ivory); color: #111; } /* Zone de saisie : la pilule gris foncé, filet fin, envoi bleu, outils ronds */ html[data-design="v2"] .composer { border-radius: 26px; background-color: var(--v2-panel); border-color: var(--v2-hair); } html[data-design="v2"] .composer:focus-within { border-color: var(--v2-hair-hover); } html[data-design="v2"] .tool-btn { border-radius: 50%; } html[data-design="v2"] .tool-btn:hover:not(:disabled) { background-color: var(--v2-hover-2); } html[data-design="v2"] .tool-btn.busy { border-color: var(--v2-tint-line); } html[data-design="v2"] .pending { border-radius: 12px; border-color: var(--v2-hair); } html[data-design="v2"] .pending img { border-radius: 8px; } /* Fichiers */ html[data-design="v2"] .file-chip { border-radius: 999px; background-color: rgba(255,255,255,.06); border-color: var(--v2-hair); } html[data-design="v2"] .file-chip:hover { background-color: rgba(255,255,255,.1); } html[data-design="v2"] .file-link { border-radius: 999px; background-color: var(--v2-tint); border-color: rgba(122,167,245,.3); } html[data-design="v2"] .ftype { border-radius: 6px; border-color: rgba(122,167,245,.45); } html[data-design="v2"] .file-thumb img { border-radius: 12px; border-color: var(--v2-hair); } html[data-design="v2"] .lightbox { background-color: rgba(0,0,0,.92); } /* Panneau Tâches / Fichiers */ html[data-design="v2"] .side-panel { background-color: var(--v2-side); border-left-color: rgba(255,255,255,.06); } /* ── Panneau « Une seule liste » (conversation) ── */ html[data-design="v2"] .side-top { border-bottom-color: transparent; padding: 22px 20px 12px; } html[data-design="v2"] .side-count b { font-family: var(--v2-sans); font-weight: 600; letter-spacing: -.02em; font-size: 28px; } html[data-design="v2"] .side-count span { color: var(--mute); } html[data-design="v2"] .side-now { color: var(--sand); } html[data-design="v2"] .side-now.running { color: var(--ivory); } html[data-design="v2"] .side-top .progress > span { background-color: var(--v2-accent); } html[data-design="v2"] .side-tasks { padding: 6px 10px 4px; } html[data-design="v2"] .side-tasks .task { border-radius: 12px; padding: 8px 10px; } html[data-design="v2"] .side-tasks .task.t-in_progress { background-color: var(--v2-sel); } html[data-design="v2"] .side-tasks .task.t-in_progress .task-box { border-color: var(--turq); } html[data-design="v2"] .side-tasks .task.t-cancelled .task-box { border-color: var(--danger); background-color: rgba(242,139,130,.12); } html[data-design="v2"] .side-tasks .task.t-cancelled .task-txt { color: var(--mute); } html[data-design="v2"] .side-sech { color: var(--mute); letter-spacing: .06em; padding: 18px 20px 10px; } html[data-design="v2"] .side-tasks + .side-sech { border-top: 0; margin-top: 0; } html[data-design="v2"] .ftiles { padding: 0 14px; gap: 8px; } html[data-design="v2"] .file-row { border: 0; border-radius: 16px; background-color: var(--card); padding: 14px 12px 12px; } html[data-design="v2"] .file-row:hover { background-color: var(--v2-hover-2); } html[data-design="v2"] .file-row .ftype { border: 0; border-radius: 10px; min-width: 38px; height: 38px; color: #fff; font-size: 10px; background-color: #5b5b5b; } html[data-design="v2"] .file-row.k-pdf .ftype { background-color: #B5453C; } html[data-design="v2"] .file-row.k-doc .ftype { background-color: #3D6FD8; } html[data-design="v2"] .file-row.k-xls .ftype { background-color: #2F8F5B; } html[data-design="v2"] .file-row.k-img .ftype { background-color: #7A5FC4; } html[data-design="v2"] .ftiles.dense { gap: 4px; } html[data-design="v2"] .ftiles.dense .file-row { border-radius: 12px; padding: 7px 10px; } html[data-design="v2"] .ftiles.dense .file-row .ftype { min-width: 32px; height: 30px; border-radius: 8px; } html[data-design="v2"] .file-row .fd { color: var(--mute); } html[data-design="v2"] .file-row.gone .fd { color: var(--danger); } @media (prefers-reduced-motion: reduce) { html[data-design="v2"] .side-top .progress > span { transition: none; } } /* ══ Fenêtres (modales) ════════════════════════════════════════════════════ */ html[data-design="v2"] .modal-back { background-color: var(--v2-backdrop); } html[data-design="v2"] .modal { border-radius: 20px; background-color: var(--v2-modal); border-color: var(--v2-hair); box-shadow: var(--v2-shadow-lg); } html[data-design="v2"] .agent-preview { border-radius: 12px; border-color: var(--v2-hair); } html[data-design="v2"] .agent-tips { border-radius: 4px 12px 12px 4px; background-color: var(--v2-tint-soft); } html[data-design="v2"] .modal input[type="checkbox"] { border-radius: 5px; } html[data-design="v2"] .modal input[type="radio"] { border-radius: 50%; } html[data-design="v2"] .modal input[type="checkbox"]:checked { background-color: var(--v2-accent); border-color: var(--v2-accent); } html[data-design="v2"] .modal input[type="checkbox"]:checked::after { border-color: #fff; } html[data-design="v2"] .modal .gm-model-select { border-radius: 12px; } /* Fenêtre de groupe : modals.js teinte en turquoise (style en ligne) la ligne d'un membre choisi. */ html[data-design="v2"] .gm-row[style*="rgba(59, 217, 219"] { background-color: var(--v2-tint-soft) !important; } @media (min-width: 861px) { html[data-design="v2"] .project-modal > .actions { background-color: var(--v2-modal); } } /* Menu clic droit des conversations */ html[data-design="v2"] .ctx-menu { border-radius: 14px; overflow: hidden; background-color: var(--v2-pop); border-color: var(--v2-hair); box-shadow: var(--v2-shadow); } html[data-design="v2"] .ctx-item:hover, html[data-design="v2"] .ctx-item:focus-visible { background-color: var(--v2-hover-2); } /* ══ Choix du modèle et de l'agent (model-picker.css) ══════════════════════ */ html[data-design="v2"] .model-pill { border-radius: 999px; border-color: transparent; color: var(--mute); } html[data-design="v2"] .model-pill:hover { background-color: var(--v2-hover-2); border-color: transparent; color: var(--ivory); } html[data-design="v2"] .model-pill[aria-expanded="true"] { background-color: var(--v2-hover-2); border-color: transparent; color: var(--ivory); } html[data-design="v2"] .model-menu, html[data-design="v2"] .agent-menu { --av-ring: var(--v2-pop); border-radius: 14px; background-color: var(--v2-pop); border-color: var(--v2-hair); box-shadow: var(--v2-shadow); } html[data-design="v2"] .mm-search, html[data-design="v2"] .mm-foot, html[data-design="v2"] .ao-foot { background-color: var(--v2-pop); } html[data-design="v2"] .mm-search input { border-radius: 999px; border-color: var(--v2-hair); } html[data-design="v2"] .mm-search input:focus { border-color: var(--v2-tint-line); } html[data-design="v2"] .model-opt:hover, html[data-design="v2"] .agent-opt:hover { background-color: var(--v2-hover-2); } html[data-design="v2"] .mm-chip { border-radius: 999px; border-color: var(--v2-hair); } html[data-design="v2"] .agent-pill { border-radius: 999px; border-color: var(--v2-hair); } html[data-design="v2"] .agent-pill:hover { background-color: var(--v2-hover-2); border-color: var(--v2-hair-hover); } html[data-design="v2"] .agent-pill[aria-expanded="true"] { border-color: var(--v2-hair-hover); } html[data-design="v2"] .agent-opt.current { background-color: var(--v2-sel); border-left-color: transparent; } html[data-design="v2"] .model-pill.is-fixed, html[data-design="v2"] .model-pill.is-fixed:hover { background-color: rgba(255,255,255,.06); } /* ══ Projets (projects.css) ════════════════════════════════════════════════ */ html[data-design="v2"] .proj-card { border-radius: 16px; border-color: var(--v2-hair); } html[data-design="v2"] .proj-card:hover, html[data-design="v2"] .proj-card:focus-visible { border-color: var(--v2-hair-hover); } html[data-design="v2"] .proj-card.running { border-color: var(--v2-tint-line); background-color: var(--v2-tint-soft); } html[data-design="v2"] .proj-member { border-radius: 999px; border-color: var(--v2-hair); } html[data-design="v2"] .head-btn-main, html[data-design="v2"] .btn-relaunch { border-color: var(--v2-tint-line); } html[data-design="v2"] .proj-banner-in { border-radius: 12px; } html[data-design="v2"] .proj-banner-in.info { border-color: var(--v2-tint-line); background-color: var(--v2-tint-soft); } html[data-design="v2"] .proj-tech code { border-radius: 8px; background-color: rgba(255,255,255,.04); } html[data-design="v2"] .task-card { border-radius: 16px; border-top-color: var(--v2-hair); border-right-color: var(--v2-hair); border-bottom-color: var(--v2-hair); } html[data-design="v2"] .task-card.failed { border-color: rgba(242,139,130,.4); border-left-color: var(--danger); } html[data-design="v2"] .task-card.asks { border-color: rgba(200,138,28,.45); border-left-color: var(--ochre); } html[data-design="v2"] .task-state { border-radius: 999px; } html[data-design="v2"] .task-state-running { background-color: var(--v2-tint); border-color: var(--v2-tint-line); } html[data-design="v2"] .task-state-done { background-color: var(--v2-tint-soft); border-color: rgba(122,167,245,.22); } html[data-design="v2"] .task-reason, html[data-design="v2"] .task-error, html[data-design="v2"] .task-note { border-radius: 4px 10px 10px 4px; } html[data-design="v2"] .task-summary-text { border-radius: 10px; background-color: rgba(255,255,255,.03); border-color: var(--v2-hair); } html[data-design="v2"] .task-answer-input { border-radius: 12px; border-color: var(--v2-hair); } html[data-design="v2"] .proj-synthesis { border-radius: 16px; background-color: var(--v2-modal); border: 1px solid var(--v2-hair); padding: 22px 24px; } html[data-design="v2"] .proj-synthesis-head .ico { color: #7AA7F5; } html[data-design="v2"] .proj-synthesis-head .display { color: #ECECEC; font-size: 18px; font-weight: 600; } html[data-design="v2"] .proj-card { background-color: var(--v2-side); } html[data-design="v2"] .proj-card .av-dot, html[data-design="v2"] .proj-card.running .av-dot { border-color: #141414; } html[data-design="v2"] .proj-card:hover .av-dot { border-color: #1B1B1B; } html[data-design="v2"] .proj-card.running .av-dot { border-color: #15181F; } html[data-design="v2"] .proj-card.complete .progress > span, html[data-design="v2"] .proj-bar .proj-progress.complete .progress > span { background-color: #5FBF80; } html[data-design="v2"] .proj-head { border-bottom: 0; padding-bottom: 4px; } html[data-design="v2"] .proj-head-members .proj-member { background: transparent; border: 0; } html[data-design="v2"] .proj-head-actions .head-btn { border-radius: 999px; border: 0; background-color: rgba(255,255,255,.07); color: #ECECEC; } html[data-design="v2"] .proj-head-actions .head-btn:hover:not(:disabled) { background-color: rgba(255,255,255,.12); } html[data-design="v2"] .proj-head-actions .head-btn.head-btn-main { background-color: var(--v2-accent); color: #fff; } html[data-design="v2"] .pk-list { border-radius: 12px; border-color: var(--v2-hair); } html[data-design="v2"] .pk-row.on { background-color: var(--v2-tint-soft); } html[data-design="v2"] .pk-box { border-radius: 5px; } html[data-design="v2"] .pk-box .ico { color: #fff; } html[data-design="v2"] .pk-input:checked + .pk-box { background-color: var(--v2-accent); border-color: var(--v2-accent); } html[data-design="v2"] .pk-chip-in { border-radius: 999px; border-color: var(--v2-hair); } html[data-design="v2"] .pk-chip:hover .pk-chip-in { border-color: var(--v2-hair-hover); } html[data-design="v2"] .pk-input:checked + .pk-chip-in { background-color: var(--v2-tint); border-color: var(--turq); } html[data-design="v2"] .skel { border-radius: 6px; } html[data-design="v2"] .skel-pill, html[data-design="v2"] .skel-chip, html[data-design="v2"] .skel-state { border-radius: 999px; } html[data-design="v2"] .skel-avatar { border-radius: 50%; } /* ══ Applications (apps.css) ═══════════════════════════════════════════════ */ html[data-design="v2"] .apps-search input { border-radius: 999px; } html[data-design="v2"] .apps-chip { border-radius: 999px; } html[data-design="v2"] .apps-chip[aria-pressed="true"] .apps-chip-n, html[data-design="v2"] .apps-step { color: #5A5A5A; } html[data-design="v2"] .apps-row, html[data-design="v2"] .apps-empty, html[data-design="v2"] .apps-error { border-radius: 12px; } html[data-design="v2"] .apps-m-alert { border-radius: 10px; border-left: 0; box-shadow: inset 0 0 0 1px rgba(255,158,138,.28); } html[data-design="v2"] .apps-logo { border-radius: 10px; } html[data-design="v2"] .apps-logo.lg { border-radius: 12px; } html[data-design="v2"] .apps-dot, html[data-design="v2"] .apps-av { border-radius: 50%; } html[data-design="v2"] .apps-manage { border-radius: 999px; } html[data-design="v2"] .sk { border-radius: 6px; } html[data-design="v2"] .app-modal .pk-row, html[data-design="v2"] .apps-m-progress { border-radius: 12px; } /* ══ Cartes du fil (chat-cards.css) ════════════════════════════════════════ */ html[data-design="v2"] .cc { border-radius: 16px; } html[data-design="v2"] .cc-logo, html[data-design="v2"] .kc-ico { border-radius: 12px; } html[data-design="v2"] .cc-chip, html[data-design="v2"] .chat-event-in { border-radius: 999px; } html[data-design="v2"] .kc-field { border-radius: 12px; overflow: hidden; background-color: rgba(0,0,0,.28); border-color: var(--v2-hair); } html[data-design="v2"] .kc-field:focus-within { border-color: var(--v2-hair-hover); } html[data-design="v2"] .cc .cc-primary .spinner, html[data-design="v2"] .mdl-primary .spinner, html[data-design="v2"] .appr-actions .spinner { border-color: rgba(0,0,0,.2); border-top-color: var(--navy); } /* ══ Modèle d'IA (models.css) ══════════════════════════════════════════════ */ html[data-design="v2"] .mdl-row, html[data-design="v2"] .mdl-error, html[data-design="v2"] .mdl-opt, html[data-design="v2"] .mdl-offhead, html[data-design="v2"] .mdl-empty, html[data-design="v2"] .mdl-info { border-radius: 12px; } html[data-design="v2"] .mdl-tag { border-radius: 999px; } html[data-design="v2"] .mdl-x { border-radius: 50%; } html[data-design="v2"] .mdl-dot { border-radius: 50%; } html[data-design="v2"] .mdl-bars i { border-radius: 1px; } html[data-design="v2"] .mdl-check { border-radius: 5px; } html[data-design="v2"] .mdl-sk { border-radius: 6px; } html[data-design="v2"] .mdl-sk.s-btn { border-radius: 999px; } html[data-design="v2"] .modal .mdl-search input { border-radius: 999px; } html[data-design="v2"] .mdl-ghead { background-color: var(--v2-modal); } html[data-design="v2"] .policy-warn { border-radius: 12px; } /* ══ Canaux (channels.css) ═════════════════════════════════════════════════ */ html[data-design="v2"] .ch-tile { border-radius: 16px; } html[data-design="v2"] .ch-logo { border-radius: 12px; } html[data-design="v2"] .ch-chip, html[data-design="v2"] .ch-cta { border-radius: 999px; } html[data-design="v2"] .ch-av, html[data-design="v2"] .ch-sdot, html[data-design="v2"] .ch-steps li::before, html[data-design="v2"] .ch-done-mark { border-radius: 50%; } html[data-design="v2"] .ch-sk { border-radius: 6px; } html[data-design="v2"] .ch-empty, html[data-design="v2"] .ch-error, html[data-design="v2"] .ch-modal .ch-arow, html[data-design="v2"] .ch-busy, html[data-design="v2"] .ch-alert, html[data-design="v2"] .ch-ok { border-radius: 12px; } html[data-design="v2"] .ch-qr-box { border-radius: 12px; overflow: hidden; } html[data-design="v2"] .ch-done-mark { background-color: var(--v2-accent); color: #fff; } html[data-design="v2"] .ch-done.warn .ch-done-mark { background-color: var(--ochre-light); color: #111; } /* ══ Équipe (team.css) ═════════════════════════════════════════════════════ */ html[data-design="v2"] .tm-tag, html[data-design="v2"] .tm-tag-policy { border-radius: 999px; } html[data-design="v2"] .tm-dot { border-radius: 50%; } html[data-design="v2"] .tm-card, html[data-design="v2"] .tm-common { border-radius: 16px; } html[data-design="v2"] .tm-row, html[data-design="v2"] .tm-empty, html[data-design="v2"] .tm-error, html[data-design="v2"] .tm-alert, html[data-design="v2"] .tm-modal .tm-opt { border-radius: 12px; } html[data-design="v2"] .tm-more { border-radius: 50%; } html[data-design="v2"] .tm-sk { border-radius: 6px; } html[data-design="v2"] .tm-sk-av { border-radius: 50%; } html[data-design="v2"] .tm-sk-role, html[data-design="v2"] .tm-sk-btn, html[data-design="v2"] .tm-sk-switch { border-radius: 999px; } html[data-design="v2"] .tm-menu { border-radius: 14px; background-color: var(--v2-pop); box-shadow: 0 0 0 1px var(--v2-hair), var(--v2-shadow); } html[data-design="v2"] .tm-mi { border-radius: 8px; } html[data-design="v2"] .tm-points li { border-radius: 10px; } html[data-design="v2"] .tm-modal .tm-temp { border-color: transparent; } html[data-design="v2"] .tm-modal .tm-temp:focus { border-color: var(--turq); } /* ══ Boîtes de dialogue (dialogs.css) ══════════════════════════════════════ */ html[data-design="v2"] .dlg-back { --dlg-bg: var(--v2-modal); background-color: var(--v2-backdrop); } html[data-design="v2"] .dlg { border-radius: 20px; box-shadow: 0 0 0 1px var(--v2-hair), var(--v2-shadow-lg); } html[data-design="v2"] .dlg-details, html[data-design="v2"] .dlg-input { border-radius: 12px; } /* ══ À valider (approvals.css) ═════════════════════════════════════════════ */ html[data-design="v2"] .appr-card, html[data-design="v2"] .appr-empty, html[data-design="v2"] .vc { border-radius: 16px; } html[data-design="v2"] .appr-kind { border-radius: 999px; } html[data-design="v2"] .appr-read { border-radius: 12px; } html[data-design="v2"] .appr-hdrs { border-radius: 12px 12px 0 0; } html[data-design="v2"] .appr-error, html[data-design="v2"] .appr-rrow, html[data-design="v2"] .approval-mini { border-radius: 12px; } html[data-design="v2"] .appr-mark, html[data-design="v2"] .appr-sq, html[data-design="v2"] .vc-mark, html[data-design="v2"] .approval-mini .who::before { border-radius: 50%; } html[data-design="v2"] .appr-mark.ok, html[data-design="v2"] .appr-pill.ok { background-color: var(--v2-tint); } /* ══ Effets des boutons (buttons.css, chargé après) : couleurs des balayages ═ */ @media (hover: hover) { html[data-design="v2"] .btn-outline { --fx-fill: var(--v2-tint); } html[data-design="v2"] .btn-ghost, html[data-design="v2"] .head-btn, html[data-design="v2"] .quick-btn { --fx-fill: rgba(255,255,255,.08); } html[data-design="v2"] .choice-btn::before { --fx-fill: rgba(255,255,255,.07); } html[data-design="v2"] .choice-btn:hover { background-color: rgba(255,255,255,.05); color: var(--ivory); } html[data-design="v2"] .choice-btn:hover:not(:disabled) { color: var(--ivory); } } @media (prefers-reduced-motion: reduce) { html[data-design="v2"] .btn-outline:hover:not(:disabled) { background-color: var(--v2-tint); } } /* ══ Réactif : variantes des règles ci-dessus que les @media d'origine modifiaient ══ */ @media (max-width: 1100px) { html[data-design="v2"] .side-panel { background-color: var(--v2-side); box-shadow: -12px 0 30px rgba(0,0,0,.45); } html[data-design="v2"] .conv-tools, html[data-design="v2"] .conv-item.selected .conv-tools { background-color: transparent; } /* Bande de cartes : filet fin tout autour (le filet gauche de 3 px devient 1 px, le texte ne bouge pas). */ html[data-design="v2"] .conv-item { border-color: var(--v2-hair); border-left-width: 1px; padding-left: 12px; } html[data-design="v2"] .conv-item.selected { border-color: var(--v2-hair-hover); } } @media (max-width: 860px) { html[data-design="v2"] .sidebar { background-color: var(--v2-side); border-bottom-color: rgba(255,255,255,.06); } html[data-design="v2"] .sidebar.collapsed .health { background-color: rgba(255,255,255,.035); border-color: var(--v2-hair); } html[data-design="v2"] .sidebar.collapsed .health.bad { background-color: rgba(200,138,28,.10); border-color: rgba(200,138,28,.35); } /* Interrupteur tactile : des bordures transparentes agrandissent la zone ; le rail visible reste une pilule. */ html[data-design="v2"] .switch { border-radius: 12px / 20px; } /* Feuilles collées au bas de l'écran : seuls les angles du haut s'arrondissent. */ html[data-design="v2"] .modal { border-radius: 20px 20px 0 0; } html[data-design="v2"] .modal > .actions { background-color: var(--v2-modal); } html[data-design="v2"] .room-composer { border-radius: 0; background-color: var(--night); border-color: var(--line); } } @media (max-width: 560px) { html[data-design="v2"] .dlg, html[data-design="v2"] .dlg[data-kind="text"] { border-radius: 20px 20px 0 0; } } /* À valider : décisions récentes = une seule carte arrondie, lignes sans boîtes, bouton en pastille */ html[data-design="v2"] .appr-rlist { border-radius: 20px; background: #1f1f1f; border-color: rgba(255,255,255,.07); } html[data-design="v2"] .appr-rrow { border-radius: 14px; } html[data-design="v2"] .appr-rrow:hover { background: rgba(255,255,255,.04); } html[data-design="v2"] .appr-rbtn { background: #2a2a2a; } html[data-design="v2"] .appr-rrow:hover .appr-rbtn, html[data-design="v2"] .appr-rbtn:hover { background: #333; } /* ══ Corrections du balayage (2e passe) ═══════════════════════════════════ */ /* Lignes avec fond ou survol : angles de 12px (les conteneurs arrondis les rognent déjà aux extrémités). */ html[data-design="v2"] .live-row:hover { border-radius: 12px; } /* Réglages : l'interrupteur reste à droite du texte sur mobile (comme Équipe et Missions) ; le texte peut rétrécir. */ html[data-design="v2"] .settings-row > :first-child { min-width: 0; } html[data-design="v2"] .settings-row > .switch { flex: none; } html[data-design="v2"] .settings-row > .design-seg { flex: none; } @media (max-width: 560px) { html[data-design="v2"] .settings-row:has(> .switch) { flex-direction: row; align-items: center; gap: 14px; } html[data-design="v2"] .settings-row:has(> .switch) > :first-child { flex: 1 1 0; } } /* ══ Fiche Agents : « Ce qu'il a retenu » et « Voir tout » (savoir-faire) — bloc des lots 1 et 3 (début) ══ */ html[data-design="v2"] .mem-row, html[data-design="v2"] .skl-row { border-bottom-color: var(--v2-hair); } html[data-design="v2"] .skl-kept { border-top-color: var(--v2-hair); } html[data-design="v2"] .skl-pill:not(.tone-ready) { background: rgba(255,255,255,.07); } html[data-design="v2"] .mem-toggle, html[data-design="v2"] .skills-open { padding: 6px 10px; } html[data-design="v2"] .mem-tools .icon-btn.danger:hover { background-color: rgba(242,139,130,.12); } /* ══ fin du bloc des lots 1 et 3 ══ */ /* ══ Carte « E-mail » (approvals.css) et réponses proposées (chat-cards.css) ═ */ html[data-design="v2"] .mc, html[data-design="v2"] .choice-list { background: #1f1f1f; border-radius: 22px; } html[data-design="v2"] .mc { --appr-band: #1f1f1f; padding: 18px 24px 20px; } html[data-design="v2"] .mc-ico, html[data-design="v2"] .mc-copy { border-radius: 10px; } html[data-design="v2"] .mc-ico { background: #262626; } html[data-design="v2"] .mc-copy:hover { background: #2a2a2a; } html[data-design="v2"] .mc-hdrs > div, html[data-design="v2"] .mc-hdrs > div:first-child, html[data-design="v2"] .mc-why { border-color: rgba(255,255,255,.07); } html[data-design="v2"] .mc-hdrs > div:first-child { border-top: 0; } html[data-design="v2"] .mc .appr-text a { text-decoration-color: rgba(255,255,255,.45); } html[data-design="v2"] .btn.mc-abandon { border-radius: 999px; } html[data-design="v2"] .btn.mc-abandon:hover:not(:disabled) { background: #2a2a2a; } html[data-design="v2"] .mc-send { border-radius: 999px; } html[data-design="v2"] .mc-send.has-more { border-radius: 999px 0 0 999px; } html[data-design="v2"] .appr-actions.mc-foot .btn.mc-more { border-radius: 0 999px 999px 0; border-left-color: rgba(0,0,0,.14); } html[data-design="v2"] .mc-menu { border-radius: 16px; background: var(--v2-pop); border-color: var(--v2-hair); box-shadow: var(--v2-shadow); } html[data-design="v2"] .mc-menu-item { border-radius: 10px; } html[data-design="v2"] .mc-menu-item:hover, html[data-design="v2"] .mc-menu-item:focus-visible { background: var(--v2-hover-2); } html[data-design="v2"] .choice-list .choice-btn { border-radius: 16px; } html[data-design="v2"] .choice-list .choice-btn:hover:not(:disabled) { background: #2d2d2d; } html[data-design="v2"] .choice-key { border-radius: 8px; background: #262626; border-color: rgba(255,255,255,.08); } @media (max-width: 560px) { html[data-design="v2"] .mc { padding: 16px 18px 18px; } } html[data-design="v2"] .choice-list .choice-btn { background-color: transparent; border-color: transparent; } html[data-design="v2"] .choice-list .choice-btn:hover:not(:disabled) { background-color: #2d2d2d; border-color: transparent; } /* ══ Écran Agents « Visages et fiche » (agents.css pour la structure) ══ */ html[data-design="v2"] .ag-face { border-radius: 22px; } html[data-design="v2"] .ag-face:hover { background-color: var(--v2-hover); } html[data-design="v2"] .ag-face.selected .avatar { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--ivory); } html[data-design="v2"] .ag-card, html[data-design="v2"] .ag-portrait { border-radius: 22px; background-color: var(--v2-pop); border-color: transparent; --av-ring: var(--v2-pop); } html[data-design="v2"] .ag-chip { border-radius: 999px; background-color: var(--v2-hover-2); } html[data-design="v2"] button.ag-app:hover { background-color: var(--v2-hover-2); box-shadow: inset 0 0 0 999px var(--v2-hover); } html[data-design="v2"] .ag-app-sk { border-radius: 999px; } html[data-design="v2"] .ag-now { border-top-color: var(--v2-hair); } html[data-design="v2"] .ag-card .mdl-row { border-radius: 16px; } html[data-design="v2"] .ag-card .mdl-fold:hover { background-color: var(--v2-hover-2); } html[data-design="v2"] .ag-card .history-row { border-top-color: var(--v2-hair); } html[data-design="v2"] .ag-card .history-row:first-child { border-top: 0; padding-top: 2px; } /* ══ Fournisseurs d'IA (providers.css) ═════════════════════════════════════ */ html[data-design="v2"] .prov-back, html[data-design="v2"] .prov-pill { border-radius: 999px; background: rgba(255,255,255,.09); } html[data-design="v2"] .prov-back:hover, html[data-design="v2"] .prov-pill:hover:not(:disabled) { background: rgba(255,255,255,.16); } html[data-design="v2"] .prov-pill.strong { background: var(--ivory); color: var(--navy); } html[data-design="v2"] .prov-pill.strong:hover { background: #fff; } html[data-design="v2"] .prov-free { border-radius: 999px; background: rgba(255,255,255,.08); } html[data-design="v2"] .prov-n { background: rgba(255,255,255,.12); } html[data-design="v2"] .prov-keybox input { border-radius: 999px; background: rgba(255,255,255,.06); padding-left: 18px; } html[data-design="v2"] .prov-keybox input:focus { background: rgba(255,255,255,.08); } html[data-design="v2"] .prov-result, html[data-design="v2"] .prov-code { border-radius: 12px; } html[data-design="v2"] .prov-result { background: rgba(255,255,255,.05); } html[data-design="v2"] .prov-result.err { background: rgba(242,139,130,.1); } html[data-design="v2"] .prov-result.ok { background: rgba(143,217,168,.1); } html[data-design="v2"] .prov-code { background: rgba(255,255,255,.07); } html[data-design="v2"] .prov-models li { border-radius: 999px; background: rgba(255,255,255,.07); } html[data-design="v2"] .prov-models .prov-more { background: none; } html[data-design="v2"] .prov-pile .apps-av { border-radius: 50%; border-color: #1A1A1A; font-family: inherit; font-style: normal; } html[data-design="v2"] .prov-row .apps-name { font-weight: 600; } /* ══════════════════════════════════════════════════════════════════════════ DÉBUT — Finitions d'après l'inspiration (13 nov. 2026, design-ecrans) Un seul bloc : boutons (plus de texte souligné), hiérarchie, restes du Classique, largeur des écrans, menus, pied du menu. Pour retirer un point, supprimer son sous-bloc. ══════════════════════════════════════════════════════════════════════════ */ html[data-design="v2"] { --v2-soft: rgba(255,255,255,.09); /* pastille secondaire : un ton au-dessus de la surface */ --v2-soft-hover: rgba(255,255,255,.16); /* … et son survol */ } /* ── 1. Plus de bouton « texte + trait dessous » : une pastille grise pleine, sans bordure ── */ html[data-design="v2"] :is(.btn-text, .app-btn, .ch-link, .tm-link, .mdl-link, .apps-link, .appr-more, .appr-link, .appr-conv, .proj-banner-link, .apps-go, .ch-act:not(.quiet)) { background-color: var(--v2-soft); color: var(--ivory); border: 0; border-radius: 999px; font-weight: 500; text-decoration: none; transition: background-color .15s ease, color .15s ease; } /* Les actions qui étaient du texte nu prennent le gabarit d'une pastille (les .btn ont déjà le leur). */ html[data-design="v2"] :is(.ch-link, .tm-link, .mdl-link, .appr-more, .appr-link, .appr-conv, .proj-banner-link, .apps-go, .ch-act) { min-height: 32px; padding: 0 14px; display: inline-flex; align-items: center; text-underline-offset: 0; } /* « Voir… » de l'écran Applications : même pastille, mais sa hauteur (32 px, 44 px au doigt) reste celle de apps.css. */ html[data-design="v2"] .apps-link { padding: 0 14px; text-underline-offset: 0; } html[data-design="v2"] :is(.btn-text, .app-btn, .ch-link, .tm-link, .mdl-link, .apps-link, .appr-more, .appr-link, .appr-conv, .proj-banner-link, .ch-act:not(.quiet)):hover:not(:disabled), html[data-design="v2"] .apps-row:hover .apps-go, html[data-design="v2"] .apps-row:focus-visible .apps-go { background-color: var(--v2-soft-hover); color: var(--ivory); text-decoration: none; } html[data-design="v2"] :is(.ch-link, .tm-link, .mdl-link, .apps-link, .appr-more, .appr-link, .appr-conv, .proj-banner-link, .ch-act):focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; } html[data-design="v2"] .mdl-link.add:hover { text-decoration: none; } /* Le trait qui se dessinait sous le mot au survol (buttons.css) n'existe plus. */ html[data-design="v2"] :is(.btn-text, .app-btn)::after { content: none; } /* Action dangereuse : discrète jusqu'au survol. */ html[data-design="v2"] .ch-act.quiet { background-color: transparent; color: var(--mute); border-radius: 999px; font-weight: 500; text-decoration: none; } html[data-design="v2"] .ch-act.quiet:hover:not(:disabled) { background-color: var(--v2-soft); color: var(--danger); } html[data-design="v2"] .head-btn[data-action="disband-group"]:not(:hover):not(:focus-visible) { background-color: transparent; color: var(--mute); } html[data-design="v2"] .head-btn[data-action="disband-group"]:hover:not(:disabled) { color: var(--danger); } /* ── 2. Hiérarchie : principal = pastille claire ; secondaire = pastille grise sans bordure ── */ html[data-design="v2"] :is(.btn-ghost, .quick-btn, .btn-outline:not([data-action^="new-"])), html[data-design="v2"] .head-btn:not(.head-btn-main):not(.active) { background-color: var(--v2-soft); color: var(--ivory); border-color: transparent; font-weight: 500; } html[data-design="v2"] :is(.btn-ghost, .quick-btn, .btn-outline:not([data-action^="new-"])):hover:not(:disabled), html[data-design="v2"] .head-btn:not(.head-btn-main):not(.active):hover:not(:disabled) { background-color: var(--v2-soft-hover); color: var(--ivory); border-color: transparent; } html[data-design="v2"] :is(.btn-primary, .btn-outline[data-action^="new-"]), html[data-design="v2"] .proj-head-actions .head-btn.head-btn-main { background-color: var(--ivory); color: var(--navy); border-color: transparent; } html[data-design="v2"] :is(.btn-primary, .btn-outline[data-action^="new-"]):hover:not(:disabled), html[data-design="v2"] .proj-head-actions .head-btn.head-btn-main:hover:not(:disabled) { background-color: var(--ivory); color: var(--navy); border-color: transparent; opacity: .88; } html[data-design="v2"] .btn-primary:focus-visible { outline-color: var(--ivory); } /* ── 3. Restes du Classique ── */ /* Carte de projet « En attente de vous » : teinte neutre + un repère ocre discret. */ html[data-design="v2"] .proj-card.running:has(.pc-state.st-attention) { background-color: var(--v2-side); border-color: var(--v2-hair); box-shadow: inset 3px 0 0 rgba(226,167,60,.65); } html[data-design="v2"] .proj-card.running:has(.pc-state.st-attention):hover { background-color: rgba(255,255,255,.06); border-color: var(--v2-hair-hover); } /* Page d'un projet : sous le titre « Terminé », la pastille « Terminée » de chaque tâche fait doublon. */ html[data-design="v2"] .task-group[data-key="group-done"] .task-state { display: none; } /* ── 4. Principes d'inspiration ── */ /* Réglages : cartes groupées sans filets ; titre de section en gris. */ html[data-design="v2"] .table:has(> .settings-row) { border-color: transparent; border-radius: 20px; background-color: var(--v2-pop); } html[data-design="v2"] .table > .settings-row { background-color: transparent; border-top: 0; } html[data-design="v2"] .ch .ch-title, html[data-design="v2"] .ch-head .display, html[data-design="v2"] .ch .h2 { color: var(--sand); font-weight: 500; } /* Menus : plus arrondis, survol plus clair ; coche sur l'option choisie des agents. */ html[data-design="v2"] :is(.ctx-menu, .model-menu, .agent-menu, .tm-menu) { border-radius: 16px; } html[data-design="v2"] .agent-opt { position: relative; } html[data-design="v2"] .agent-opt.current::after { content: ""; position: absolute; right: 16px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid var(--turq); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Pied du menu : initiales dans un rond gris, nom, action en bouton rond (cf. 20-compte.png). */ html[data-design="v2"] .me { padding: 14px 4px 0; gap: 10px; } html[data-design="v2"] .me-id { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; } html[data-design="v2"] .me-id::before { content: attr(data-initials); grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background-color: var(--v2-me); color: var(--mute); font-size: 13px; font-weight: 600; letter-spacing: .02em; } html[data-design="v2"] .me-id > span:first-child { color: var(--ivory); font-size: 14px; font-weight: 500; } html[data-design="v2"] .me-role { font-size: 12px; color: var(--mute); grid-column: 2; } html[data-design="v2"] .me a { width: 36px; height: 36px; justify-content: center; border-radius: 50%; background-color: var(--v2-me); color: var(--sand); transition: background-color .15s ease; } html[data-design="v2"] .me a:hover { background-color: #333; color: var(--ivory); } html[data-design="v2"] .me a:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; } html[data-design="v2"] .me .me-logout-text { display: none; } @media (min-width: 861px) { html[data-design="v2"] .sidebar.collapsed .me-id { display: none; } } html[data-design="v2"] .collapse-toggle { border-color: transparent; background-color: rgba(255,255,255,.05); } html[data-design="v2"] .collapse-toggle:hover { border-color: transparent; background-color: var(--v2-hover-2); } /* ── 5. Largeur : le contenu suit l'écran, sans colonne collée à gauche ni grand vide à droite ── */ @media (min-width: 1200px) { /* Colonnes de lecture : elles prennent la largeur de la zone (l'écran est centré plus bas) ; les textes gardent une mesure confortable. */ html[data-design="v2"] .appr-page, html[data-design="v2"] .tm { max-width: none; } html[data-design="v2"] .screen > div[style*="max-width:1000px"], html[data-design="v2"] .screen > div[style*="max-width:960px"] { max-width: none !important; } html[data-design="v2"] :is(.appr-why, .appr-result-txt, .tm-common-txt) { max-width: 72ch; } /* Page d'un projet : les groupes de tâches se rangent en colonnes. */ html[data-design="v2"] .proj-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 20px; align-items: start; } } @media (min-width: 1600px) { html[data-design="v2"] .main:not(.main-full) > .screen { max-width: 1760px; margin-inline: auto; } html[data-design="v2"] .main > .screen:is([data-screen="settings"], [data-screen="log"], [data-screen="team"], [data-screen="cron"]) { max-width: 1240px; } html[data-design="v2"] .main > .screen[data-screen="approvals"] { max-width: 1560px; } html[data-design="v2"] .appr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } @container apps (min-width: 1360px) { html[data-design="v2"] .apps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* FIN — Finitions d'après l'inspiration */ /* ══ Accueil « Une seule question » (home.css pour la structure) ═════════════ */ html[data-design="v2"] .hq-ask { border-radius: 28px; background-color: var(--v2-panel); border: 0; padding: 18px 16px 14px 22px; } html[data-design="v2"] .hq-ask:focus-within { box-shadow: 0 0 0 1px var(--v2-hair-hover); } html[data-design="v2"] .hq-ask textarea { font-family: var(--v2-sans); } html[data-design="v2"] .hq-title em { font-style: normal; color: #7AA7F5; } html[data-design="v2"] .hq-date { letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 13px; color: var(--mute); } html[data-design="v2"] .hq-chip { border-radius: 999px; background: transparent; border-color: var(--v2-hair); color: #CFCFCF; } html[data-design="v2"] .hq-chip:hover:not(:disabled) { border-color: var(--v2-hair-hover); color: #fff; } html[data-design="v2"] .hq-pill { border-radius: 999px; border: 0; background-color: var(--v2-pop); color: #ECECEC; } html[data-design="v2"] .hq-pill:hover:not(:disabled) { background-color: var(--v2-sel); } html[data-design="v2"] .hq .hq-send { border-radius: 999px; background-color: #fff; color: #111; font-weight: 600; } html[data-design="v2"] .hq .hq-send:hover:not(:disabled) { background-color: #E6E6E6; } html[data-design="v2"] .hq .hq-send:disabled { background-color: var(--v2-me); color: var(--mute); opacity: 1; } html[data-design="v2"] .hq .agent-pill { background-color: var(--v2-me); border: 0; height: 38px; } html[data-design="v2"] .hq .agent-pill:hover { background-color: var(--v2-sel); } html[data-design="v2"] .hq-alert { border-radius: 999px; background-color: rgba(255,255,255,.035); border: 1px solid var(--v2-hair); } /* ── Finitions : une taille de texte par niveau de bouton (Nouveau design) ────────────────────────────────────────── Niveau M (boutons, pastilles, suggestions) : 14 px, 40 px de haut. Niveau S (petites puces, liens-boutons) : 13 px, 32 px. Dans la carte d'accord, tous les boutons d'une même ligne ont la même hauteur (44 px). */ html[data-design="v2"] { --btn-fs-m: 14px; --btn-h-m: 40px; --btn-fs-s: 13px; --btn-h-s: 32px; } html[data-design="v2"] body :is(.btn, .hq-chip, .hq-pill, .agent-pill, .model-pill, .cc-btn, .tm-soft) { font-size: var(--btn-fs-m); line-height: 1.2; } html[data-design="v2"] body :is(.chip, .head-btn, .apps-chip, .quick-btn, .appr-more, .mdl-link, .cc-link, .collapse-toggle) { font-size: var(--btn-fs-s); line-height: 1.2; } html[data-design="v2"] body .btn.appr-copy { font-size: var(--btn-fs-s); } html[data-design="v2"] body :is(.appr-actions .btn, .vc-actions .btn, .appr-actions.mc-foot .btn) { font-size: var(--btn-fs-m); } html[data-design="v2"] body .appr-actions .vc-peek { font-size: var(--btn-fs-s); } /* Hauteurs : bureau seulement. Sur téléphone, les zones de clic de 40 à 44 px des feuilles d'origine restent. */ @media (min-width: 861px) { html[data-design="v2"] body :is(.btn, .hq-chip, .hq-pill, .agent-pill, .model-pill, .cc-btn, .tm-soft) { min-height: var(--btn-h-m); padding-top: 0; padding-bottom: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } html[data-design="v2"] body :is(.chip, .head-btn, .apps-chip, .quick-btn, .appr-more, .mdl-link, .cc-link, .collapse-toggle) { min-height: var(--btn-h-s); box-sizing: border-box; } html[data-design="v2"] body .btn.appr-copy { min-height: var(--btn-h-s); padding-top: 0; padding-bottom: 0; } html[data-design="v2"] body :is(.appr-actions .btn, .vc-actions .btn, .appr-actions.mc-foot .btn) { min-height: 44px; } html[data-design="v2"] body .appr-actions .vc-peek { min-height: 44px; } html[data-design="v2"] body :is(.chip, .head-btn, .apps-chip, .quick-btn) { padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; } html[data-design="v2"] body .collapse-toggle { padding-top: 0; padding-bottom: 0; } html[data-design="v2"] body .apps-chip { height: var(--btn-h-s); } } /* ── Finitions : transition entre les pages et petits retours des boutons (Nouveau design) ───────────────────────── */ /* Fondu court quand on change d'écran (Accueil vers Conversation comprise) ; rien n'attend : l'écran est déjà là. */ html[data-design="v2"] .screen, html[data-design="v2"] .main.main-full > .screen { animation: none; } html[data-design="v2"] .screen.is-entering { animation: v2Page .2s var(--fx-ease, ease-out) both; } html[data-design="v2"] .main.main-full > .screen.is-entering { animation: v2PageFade .2s var(--fx-ease, ease-out) both; } @keyframes v2Page { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } } @keyframes v2PageFade { from { opacity: 0; } to { opacity: 1; } } /* Pastilles et liens-boutons : même enfoncement que les boutons (buttons.css). */ html[data-design="v2"] :is(.agent-pill, .model-pill, .appr-more, .brand-home) { transition: scale var(--fx-fast, .16s) var(--fx-ease, ease-out), background-color var(--fx-fast, .16s) ease, border-color var(--fx-fast, .16s) ease, color var(--fx-fast, .16s) ease; } html[data-design="v2"] :is(.agent-pill, .model-pill, .appr-more, .brand-home):active { scale: .97; transition-duration: .06s; } @media (prefers-reduced-motion: reduce) { html[data-design="v2"] .screen.is-entering, html[data-design="v2"] .main.main-full > .screen.is-entering { animation: none; } html[data-design="v2"] :is(.agent-pill, .model-pill, .appr-more, .brand-home) { transition: none; } html[data-design="v2"] :is(.agent-pill, .model-pill, .appr-more, .brand-home):active { scale: none; } } /* Recherche dans les messages (lot 2) */ html[data-design="v2"] .conv-item mark { background: var(--v2-tint-line); font-weight: 600; color: inherit; border-radius: 4px; padding: 0 2px; } html[data-design="v2"] .conv-item .s.snip { color: var(--v2-mute, var(--mute)); } html[data-design="v2"] .search-hit { border-radius: 14px; } /* ══ Règle d'accord : bouclier de la zone de saisie, feuille à trois choix (lot R) ══ */ html[data-design="v2"] .rule-btn.is-ask { color: var(--ivory); } html[data-design="v2"] .rule-btn.is-alone, html[data-design="v2"] .rule-btn.is-alone[aria-expanded="true"] { color: var(--ochre-light); } html[data-design="v2"] .rule-btn[aria-expanded="true"] { background-color: var(--v2-hover-2); } html[data-design="v2"] .rule-menu { border-radius: 20px; background-color: var(--v2-pop); border-color: var(--v2-hair); box-shadow: var(--v2-shadow); overflow: hidden auto; } html[data-design="v2"] .rule-title { padding: 16px 18px 8px; } html[data-design="v2"] .rule-opt { padding: 12px 18px; } html[data-design="v2"] .rule-opt:hover { background-color: var(--v2-hover); } html[data-design="v2"] .rule-opt.current { background-color: var(--v2-sel); } html[data-design="v2"] .rule-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--v2-tint-line); background-color: var(--v2-hover-2); } html[data-design="v2"] .ro-check { color: var(--ivory); } html[data-design="v2"] .rule-note { padding-left: 18px; padding-right: 18px; } html[data-design="v2"] .rule-foot { padding-left: 18px; padding-right: 18px; border-top-color: var(--v2-hair); } html[data-design="v2"] .rule-more { padding-left: 18px; padding-right: 18px; } html[data-design="v2"] .rule-more-btn { color: #7AA7F5; } html[data-design="v2"] .rule-grab span { border-radius: 2px; background-color: var(--v2-hair-hover); } html[data-design="v2"] .chip-alert.active { background-color: rgba(226,167,60,.18); border-color: rgba(226,167,60,.5); color: var(--ochre-light); } @media (max-width: 700px) { html[data-design="v2"] .rule-backdrop { background-color: var(--v2-backdrop); } html[data-design="v2"] .rule-menu { border-radius: 20px 20px 0 0; } } /* ── Lot V : fenêtre « À valider », pastille de la liste, Journal « Décisions » (Nouveau design) ─────────────────── */ html[data-design="v2"] .dlg[data-kind="list"] { border-radius: 24px; } html[data-design="v2"] .vw-row { border-radius: 14px; } html[data-design="v2"] .vw-row:hover { background: var(--v2-sel); } html[data-design="v2"] .vw-recent { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } html[data-design="v2"] .dlg-list { --appr-rest: var(--v2-panel); } html[data-design="v2"] .vw-rlist { border-radius: 16px; } html[data-design="v2"] .conv-wait-dot { border-radius: 999px; } html[data-design="v2"] .approval-flash { border-radius: 16px; } html[data-design="v2"] .jr-decisions { border-radius: 20px; } html[data-design="v2"] .log-row.has-conv .appr-rbtn { background: #2a2a2a; } html[data-design="v2"] .log-row.has-conv:hover .appr-rbtn, html[data-design="v2"] .log-row.has-conv .appr-rbtn:hover { background: #333; } /* ── Appel vocal en bande (Nouveau design) ── */ html[data-design="v2"] .call-band { border-radius: 26px; background-color: var(--v2-panel); border-color: var(--v2-hair); padding: 8px 10px 8px 12px; } html[data-design="v2"] .call-mute { background: rgba(255,255,255,.07); border-color: var(--v2-hair); } html[data-design="v2"] .call-hang { border-radius: 999px; } html[data-design="v2"] .call-tag { color: var(--v2-mute, var(--mute)); } /* Trois états de la bande qui se voient : écoute (barres bleues qui suivent le micro), attente (barres grises, vague lente), parole (barres vertes en rythme, halo qui pulse). Mêmes règles que le Classique, avec les couleurs du Nouveau. */ html[data-design="v2"] .call-avatar { box-shadow: 0 0 0 calc(2px + 5px * var(--lvl, 0)) rgba(143,217,168,.28); } html[data-design="v2"] .call-wave i { background: var(--turq); } html[data-design="v2"] .call-band[data-status="thinking"] .call-wave i, html[data-design="v2"] .call-band[data-status="hearing"] .call-wave i, html[data-design="v2"] .call-band[data-status="preparing"] .call-wave i { background: var(--mute); } html[data-design="v2"] .call-band[data-status="speaking"] .call-wave i { background: var(--ready); } html[data-design="v2"] .call-band[data-status="thinking"] .call-avatar, html[data-design="v2"] .call-band[data-status="hearing"] .call-avatar, html[data-design="v2"] .call-band[data-status="preparing"] .call-avatar { animation-name: call-breathe-v2; } html[data-design="v2"] .call-band[data-status="speaking"] .call-avatar { animation-name: call-pulse-v2; } @keyframes call-breathe-v2 { 50% { box-shadow: 0 0 0 7px rgba(122,167,245,.25); } } @keyframes call-pulse-v2 { 0%, 100% { box-shadow: 0 0 0 3px rgba(143,217,168,.30); } 50% { box-shadow: 0 0 0 9px rgba(143,217,168,.14); } } @media (prefers-reduced-motion: reduce) { html[data-design="v2"] .call-avatar { box-shadow: 0 0 0 4px rgba(143,217,168,.28) !important; } html[data-design="v2"] .call-band[data-status="thinking"] .call-avatar, html[data-design="v2"] .call-band[data-status="hearing"] .call-avatar, html[data-design="v2"] .call-band[data-status="preparing"] .call-avatar { box-shadow: 0 0 0 4px rgba(122,167,245,.30) !important; } html[data-design="v2"] .call-band[data-status="speaking"] .call-avatar { box-shadow: 0 0 0 6px rgba(143,217,168,.40) !important; } } /* En-tête de la conversation : « Partager » à la même hauteur (40 px) que le choix d'agent et « Appeler ». */ html[data-design="v2"] body .chat-head .share-btn { min-height: var(--btn-h-m); } html[data-design="v2"] input[type="search"]:-webkit-autofill, html[data-design="v2"] .dlg-input:-webkit-autofill, html[data-design="v2"] input.is-masked:-webkit-autofill, html[data-design="v2"] .kc-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--night) inset; box-shadow: 0 0 0 1000px var(--night) inset; -webkit-text-fill-color: var(--ivory); caret-color: var(--ivory); transition: background-color 99999s ease-out 0s; } /* ── Barre latérale d'après ChatGPT : logo, bouton du menu, info-bulle à raccourci (Nouveau design) ───────────────── Menu réduit : le logo est le bouton d'ouverture (au survol ou au clavier, il se change en icône « panneau »). Menu ouvert : le logo et le nom mènent à l'Accueil, le bouton « panneau » est à l'extrémité droite de la rangée. Le Classique ne change pas d'aspect (seul l'ordre change : marque puis bouton). */ html[data-design="v2"] { --v2-logo: 24px; } /* taille du logo, menu réduit comme menu ouvert : la capture le met à 0,56 de la case des icônes (22 px ici), 24 px garde les fins traits lisibles */ @media (min-width: 861px) { html[data-design="v2"] .nav-top { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; } /* Case du bouton = case des icônes dessous (43 × 40) : le logo et l'icône sont sur le même axe que le menu. */ html[data-design="v2"] body .collapse-toggle { position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box; width: 43px; height: 40px; min-height: 40px; margin: 0; padding: 0 0 0 3px; border: 0; border-radius: 12px; background-color: transparent; color: var(--sand); } html[data-design="v2"] body .collapse-toggle:hover { background-color: var(--v2-hover-2); color: var(--ivory); } html[data-design="v2"] body .collapse-toggle:focus-visible { background-color: var(--v2-hover-2); color: var(--ivory); outline: 2px solid var(--turq); outline-offset: 2px; } html[data-design="v2"] .collapse-toggle > svg, html[data-design="v2"] .collapse-toggle > span:not(.ct-face) { display: none; } html[data-design="v2"] .sidebar .collapse-toggle .ct-face { grid-area: 1 / 1; display: grid; place-items: center; pointer-events: none; } html[data-design="v2"] .sidebar .collapse-toggle .ct-face svg { transform: none; } html[data-design="v2"] .sidebar .collapse-toggle .ct-face-logo { display: none; } html[data-design="v2"] .collapse-toggle .ct-face-logo img { display: block; width: var(--v2-logo); height: var(--v2-logo); } /* Menu réduit : le logo au repos ; survol ou clavier : l'icône prend sa place (le mouvement est dans buttons.css). */ html[data-design="v2"] .sidebar.collapsed .collapse-toggle .ct-face-logo { display: grid; } html[data-design="v2"] .sidebar.collapsed .collapse-toggle .ct-face-panel { opacity: 0; scale: .7; rotate: -25deg; } html[data-design="v2"] .sidebar.collapsed .collapse-toggle:is(:hover, :focus-visible) .ct-face-panel { opacity: 1; scale: 1; rotate: 0deg; } html[data-design="v2"] .sidebar.collapsed .collapse-toggle:is(:hover, :focus-visible) .ct-face-logo { opacity: 0; scale: .7; rotate: 25deg; } /* Menu réduit : la marque est déjà dans le bouton. Menu ouvert : à côté du bouton, sur une ligne. */ html[data-design="v2"] .sidebar.collapsed .brand { display: none; } html[data-design="v2"] .sidebar:not(.collapsed) .brand { flex: 1; min-width: 0; padding: 0; } html[data-design="v2"] .sidebar .brand-home { gap: 10px; } html[data-design="v2"] .sidebar .brand-logo, html[data-design="v2"] .sidebar .brand-logo img { width: var(--v2-logo); height: var(--v2-logo); } html[data-design="v2"] .sidebar .brand-home > div:last-child { min-width: 0; } /* Le nom tient à côté du bouton et du logo : sur deux lignes au besoin (« Mare Nostrum / Equipe »), sans la mention « Équipe IA ». */ html[data-design="v2"] .sidebar .brand-name { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } html[data-design="v2"] .sidebar .brand-sub { display: none; } } /* Info-bulle (js/tooltip.js) : une pastille sombre, le libellé, et à droite le raccourci dans un petit bloc. */ html[data-design="v2"] .tip { border-radius: 999px; background-color: var(--v2-pop); border-color: var(--v2-hair); box-shadow: var(--v2-shadow); color: var(--ivory); font-weight: 500; padding: 6px 14px; } html[data-design="v2"] .tip:has(.tip-keys) { padding-right: 6px; } html[data-design="v2"] .tip-keys { border: 0; border-radius: 999px; background-color: var(--v2-soft-hover); color: var(--ivory); font-weight: 500; padding: 2px 9px; letter-spacing: .02em; }