/* ============================================================================ VIP OS — charte de l'admin (dossier de relookage 2026-09, JETONS.md) Jetons en variables : seuls --vt-accent et --vt-accent-hover changent d'un cabinet à l'autre (vipos-theme.tokens, posés dans le ) ; les neutres navy ne bougent jamais. Krayin compile son Tailwind avec SES classes seulement : la coquille et l'habillage vivent ici, en CSS simple, et recolorent les utilitaires de Krayin plutôt que ses gabarits. ============================================================================ */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/open-sans-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../../fonts/open-sans-latin-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/open-sans-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../fonts/open-sans-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../fonts/open-sans-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/montserrat-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../fonts/montserrat-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../fonts/montserrat-latin-700-normal.woff2') format('woff2'); } /* ── 1. Jetons ────────────────────────────────────────────────────────────── */ :root { --vt-accent: #C9A227; --vt-accent-hover: #B8901C; --vt-accent-link: #8A6D12; --vt-accent-soft: #F3EBD3; --vt-accent-soft-line: #E4D6A6; --vt-navy: #0E1030; --vt-navy-deep: #0B0D26; --vt-bg: #F5F5F9; --vt-surface: #FFFFFF; --vt-surface-2: #FBFBFD; --vt-line: #D9DBE7; --vt-line-soft: #F0F1F6; --vt-text: #0E1030; --vt-text-2: #575A78; --vt-text-3: #6B6F91; --vt-glyph: #8A8DA8; --vt-check: #C3C6D8; --vt-success: #157347; --vt-success-text: #0F5132; --vt-success-bg: #E8F3EC; --vt-success-line: #BEDDCB; --vt-warning: #8A5A00; --vt-warning-text: #7A4E00; --vt-warning-bg: #FBF3E2; --vt-warning-line: #EAD9B0; --vt-danger: #B42318; --vt-danger-text: #8F1D14; --vt-danger-bg: #FCEBEA; --vt-danger-line: #F0C8C4; --vt-neutral-text: #575A78; --vt-neutral-bg: #F0F1F6; --vt-neutral-line: #D9DBE7; --vt-font: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --vt-font-display: 'Montserrat', 'Open Sans', ui-sans-serif, system-ui, sans-serif; --vt-radius-field: 2px; --vt-radius-card: 4px; --vt-radius-modal: 6px; --vt-shadow-menu: 0 1px 2px rgba(14, 16, 48, .06); --vt-shadow-modal: 0 10px 30px rgba(11, 13, 38, .16); /* Krayin : la « couleur du menu » devient le navy de la charte (onglets, pagination, cases). */ --brand-color: var(--vt-navy); } html.dark { --vt-bg: #0B0D26; --vt-surface: #141738; --vt-surface-2: #1C2048; --vt-line: #2B3060; --vt-line-soft: #2B3060; --vt-text: #ECEDF6; --vt-text-2: #A6AAC8; --vt-text-3: #8A90B8; --vt-glyph: #6B6F91; --vt-check: #2B3060; --vt-accent-link: #C9A227; --vt-accent-soft: #33280F; --vt-accent-soft-line: #6B5522; --vt-success: #5BBF8A; --vt-success-text: #8FE0B4; --vt-success-bg: #12331F; --vt-success-line: #2F6A45; --vt-warning: #E3B341; --vt-warning-text: #F0CE7C; --vt-warning-bg: #33280F; --vt-warning-line: #6B5522; --vt-danger: #F0847C; --vt-danger-text: #F6ADA5; --vt-danger-bg: #3A1613; --vt-danger-line: #7A2E26; --vt-neutral-text: #A6AAC8; --vt-neutral-bg: #1C2048; --vt-neutral-line: #2B3060; --brand-color: var(--vt-accent); } /* ── 2. Base ──────────────────────────────────────────────────────────────── */ html, body { background: var(--vt-bg); } body, body.font-inter, .font-inter { font-family: var(--vt-font) !important; color: var(--vt-text); font-variant-numeric: tabular-nums; } ::selection { background: var(--vt-accent-soft); } /* Focus clavier : or, 2 px, décalage 2 px, sur les deux thèmes. Jamais retiré. */ *:focus-visible { outline: 2px solid var(--vt-accent) !important; outline-offset: 2px !important; box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ── 3. Coquille ──────────────────────────────────────────────────────────── */ .vt-shell { display: flex; min-height: 100vh; } .vt-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .vt-content { flex: 1; display: flex; min-width: 0; } .vt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--vt-bg); min-height: calc(100vh - 56px); } .vt-page { padding: 20px 24px; } @media (max-width: 767px) { .vt-page { padding: 16px; } } /* 3.1 Barre latérale — navy dans les deux thèmes */ .vt-sidebar { position: sticky; top: 0; z-index: 10002; display: flex; flex-direction: column; flex: none; width: 256px; height: 100vh; background: var(--vt-navy-deep); border-right: 1px solid #2B3060; transition: width .16s ease-out; } .vt-sidebar__head { padding: 16px 18px 15px; border-bottom: 1px solid #2B3060; } .vt-sidebar__brand { display: block; } .vt-sidebar__logo { display: block; width: 188px; max-width: 100%; height: auto; } .vt-sidebar__mark { display: none; width: 32px; height: auto; margin: 0 auto; } .vt-sidebar__name { font-family: var(--vt-font-display); font-weight: 600; font-size: 16px; color: #F3EBD3; } .vt-sidebar__scroll { flex: 1; overflow-y: auto; padding: 0 12px 12px; scrollbar-width: thin; scrollbar-color: #2B3060 transparent; } .vt-sidebar__foot { padding: 14px 12px; border-top: 1px solid #2B3060; } .vt-sidebar__toggle { display: flex; align-items: center; gap: 11px; width: 100%; padding: 6px 10px; border: 0; border-radius: 3px; background: none; color: #8A90B8; font: 400 12px/1.2 var(--vt-font); cursor: pointer; transition: color .14s ease-out, background-color .14s ease-out; } .vt-sidebar__toggle:hover { color: #ECEDF6; background: #141738; } .vt-sidebar__toggle-icon { width: 18px; height: 18px; flex: none; transition: transform .16s ease-out; } .vt-nav { display: flex; flex-direction: column; } .vt-nav__group { margin: 0; padding: 20px 12px 8px 12px; font: 600 10px/1 var(--vt-font); letter-spacing: .16em; text-transform: uppercase; color: #8A90B8; } .vt-nav__group:first-child { padding-top: 18px; } .vt-nav__heading { margin: 0; padding: 10px 10px 4px 12px; font: 600 10px/1.2 var(--vt-font); letter-spacing: .1em; text-transform: uppercase; color: #6B6F91; } .vt-nav__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .vt-nav__item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 3px; color: #C5C8DD; font: 400 13px/1.3 var(--vt-font); text-decoration: none; transition: background-color .14s ease-out, color .14s ease-out; } .vt-nav__item--plain { padding-left: 12px; } .vt-nav__item:hover { background: #141738; color: #ECEDF6; } .vt-nav__icon { width: 19px; height: 19px; flex: none; color: #8A90B8; transition: color .14s ease-out; } .vt-nav__item:hover .vt-nav__icon { color: #C5C8DD; } .vt-nav__item.is-active { background: #1C2048; color: #F3EBD3; font-weight: 600; box-shadow: inset 2px 0 0 var(--vt-accent); } .vt-nav__item.is-active .vt-nav__icon { color: var(--vt-accent); } .vt-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vt-nav__count { margin-left: auto; font: 400 11px/1 var(--vt-font); color: #A6AAC8; font-variant-numeric: tabular-nums; } .vt-nav__sub { margin: 2px 0 6px 19px; padding: 0 0 0 11px; list-style: none; border-left: 1px solid #2B3060; } .vt-nav__subitem { display: block; padding: 6px 10px; border-radius: 3px; color: #A6AAC8; font: 400 12px/1.3 var(--vt-font); text-decoration: none; } .vt-nav__subitem:hover { color: #ECEDF6; background: #141738; } .vt-nav__subitem.is-active { color: #F3EBD3; font-weight: 600; } .vt-nav__list--footer { margin-top: 20px; padding-top: 12px; border-top: 1px solid #2B3060; } /* Barre repliée (64 px) : icônes seules, libellés en infobulle (attribut title). */ html.vt-sidebar-collapsed .vt-shell > .vt-sidebar { width: 64px; } html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-sidebar__head { padding: 16px 8px 15px; } html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-sidebar__logo, html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-sidebar__name, html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-nav__label, html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-nav__count, html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-nav__heading, html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-nav__sub, html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-nav__item--plain { display: none; } html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-sidebar__mark { display: block; } html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-sidebar__scroll { padding: 0 8px 12px; } html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-nav__group { height: 1px; margin: 14px 6px 10px; padding: 0; overflow: hidden; color: transparent; background: #2B3060; } html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-nav__item { justify-content: center; padding: 10px 0; } html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-sidebar__toggle { justify-content: center; padding: 6px 0; } html.vt-sidebar-collapsed .vt-shell > .vt-sidebar .vt-sidebar__toggle-icon { transform: rotate(180deg); } @media (max-width: 1023px) { .vt-shell > .vt-sidebar { display: none; } } /* Tiroir mobile : même navigation, sur navy. */ .vt-sidebar--drawer { position: static; width: 100%; height: calc(100vh - 72px); border-right: 0; } /* 3.2 Barre du haut — 56 px */ .vt-topbar { position: sticky; top: 0; z-index: 10001; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px; background: var(--vt-surface); border-bottom: 1px solid var(--vt-line); color: var(--vt-text); } .vt-topbar__drawer { display: none; } @media (max-width: 1023px) { .vt-topbar__drawer { display: block; } } .vt-topbar__drawer .icon-menu { color: var(--vt-text-2); } .vt-topbar__spacer { flex: 1; } /* Recherche globale de Krayin : 440 px, filet, angles nets. */ .vt-topbar__search { width: 440px; max-width: 38vw; } .vt-topbar__search > div, .vt-topbar__search > div > div { width: 100% !important; max-width: none !important; margin: 0 !important; } .vt-topbar__search input, .vt-topbar input[type="text"] { height: 36px; padding-top: 8px !important; padding-bottom: 8px !important; border: 1px solid var(--vt-line) !important; border-radius: var(--vt-radius-field) !important; background: var(--vt-surface) !important; color: var(--vt-text) !important; font: 400 13px/1.3 var(--vt-font) !important; } .vt-topbar__search input::placeholder { color: var(--vt-text-3); } .vt-topbar__search .icon-search { color: var(--vt-glyph); } .vt-topbar__square { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--vt-line); border-radius: var(--vt-radius-field); color: var(--vt-text-2); background: var(--vt-surface); transition: color .14s ease-out, border-color .14s ease-out; } .vt-topbar__square:hover { color: var(--vt-text); border-color: var(--vt-text-3); } .vt-topbar__square-icon { width: 18px; height: 18px; } .vt-topbar__badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #B42318; color: #fff; font: 600 10px/16px var(--vt-font); text-align: center; } /* Bouton « Créer » : le déclencheur rond de la création rapide de Krayin devient le seul aplat d'or. */ .vt-topbar__create button { width: auto !important; height: 34px !important; gap: 6px; padding: 0 12px 0 9px; border-radius: var(--vt-radius-field) !important; background: var(--vt-accent) !important; color: var(--vt-navy) !important; transition: background-color .14s ease-out; } .vt-topbar__create button:hover { background: var(--vt-accent-hover) !important; } .vt-topbar__create button .icon-add { font-size: 20px !important; color: var(--vt-navy) !important; } .vt-topbar__create button::after { content: var(--vt-create-label); font: 600 12px/1 var(--vt-font); color: var(--vt-navy); } @media (max-width: 767px) { .vt-topbar__create button::after { content: none; } .vt-topbar__create button { padding: 0 7px; } } /* Bloc utilisateur */ .vt-user { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--vt-line); background: none; color: var(--vt-text); cursor: pointer; text-align: left; } .vt-user__avatar { display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; width: 30px; height: 30px; border-radius: 999px; background: var(--vt-navy-deep); color: var(--vt-accent); font: 600 11px/1 var(--vt-font-display); } .vt-user__avatar img { width: 100%; height: 100%; object-fit: cover; } .vt-user__text { display: flex; flex-direction: column; line-height: 1.25; } .vt-user__name { font: 600 12px/1.25 var(--vt-font); white-space: nowrap; } .vt-user__role { font: 400 10px/1.3 var(--vt-font); color: var(--vt-text-3); white-space: nowrap; } .vt-user__chevron { width: 13px; height: 13px; color: var(--vt-text-3); } @media (max-width: 767px) { .vt-user__text, .vt-user__chevron { display: none; } } .vt-menu { min-width: 250px; } .vt-menu__head { padding: 12px 16px; border-bottom: 1px solid var(--vt-line-soft); } .vt-menu__name { margin: 0; font: 600 13px/1.3 var(--vt-font); color: var(--vt-text); } .vt-menu__meta { margin: 2px 0 0; font: 400 11px/1.3 var(--vt-font); color: var(--vt-text-3); } .vt-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font: 400 13px/1.3 var(--vt-font); color: var(--vt-text); text-decoration: none; transition: background-color .14s ease-out; } a.vt-menu__item:hover { background: var(--vt-surface-2); } .vt-menu__item--static { cursor: default; } .vt-menu__item--separated { border-top: 1px solid var(--vt-line-soft); } .vt-menu__icon { width: 16px; height: 16px; flex: none; color: var(--vt-text-3); } .vt-menu__end, .vt-menu__segments { margin-left: auto; display: flex; } .vt-menu__segment { padding: 3px 8px; border: 1px solid var(--vt-line); font: 600 11px/1.2 var(--vt-font); color: var(--vt-text-2); text-decoration: none; } .vt-menu__segment + .vt-menu__segment { border-left: 0; } .vt-menu__segment.is-on { background: var(--vt-navy); border-color: var(--vt-navy); color: #fff; } html.dark .vt-menu__segment.is-on { background: #ECEDF6; border-color: #ECEDF6; color: var(--vt-navy); } .vt-switch { position: relative; width: 32px; height: 18px; border: 0; border-radius: 999px; background: var(--vt-line); cursor: pointer; transition: background-color .14s ease-out; } .vt-switch__knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: #fff; transition: transform .14s ease-out; } .vt-switch.is-on { background: var(--vt-accent); } .vt-switch.is-on .vt-switch__knob { transform: translateX(14px); } /* 3.3 Pied de page */ .vt-footer { margin-top: auto; padding: 8px 24px; border-top: 1px solid var(--vt-line); color: var(--vt-text-3); font: 400 11px/1.4 var(--vt-font); text-align: center; } .vt-footer p { margin: 0; } /* ── 4. Habillage des composants Krayin ───────────────────────────────────── */ /* 4.1 Surfaces, filets, textes (utilitaires Tailwind de Krayin recolorés) */ .vt-main .bg-white, .vt-menu, [class*="bg-white"].rounded-lg { background-color: var(--vt-surface); } .bg-gray-50 { background-color: var(--vt-surface-2) !important; } .bg-gray-100 { background-color: var(--vt-bg) !important; } .hover\:bg-gray-100:hover, .hover\:bg-gray-50:hover { background-color: var(--vt-surface-2) !important; } .border-gray-100, .border-gray-200, .border-gray-300, .border-gray-400 { border-color: var(--vt-line) !important; } .text-gray-900, .text-gray-800, .text-gray-700 { color: var(--vt-text) !important; } .text-gray-600 { color: var(--vt-text-2) !important; } .text-gray-500, .text-gray-400 { color: var(--vt-text-3) !important; } html.dark .dark\:bg-gray-950 { background-color: var(--vt-bg) !important; } html.dark .dark\:bg-gray-900 { background-color: var(--vt-surface) !important; } html.dark .dark\:bg-gray-800 { background-color: var(--vt-surface-2) !important; } html.dark .dark\:hover\:bg-gray-950:hover, html.dark .dark\:hover\:bg-gray-800:hover { background-color: var(--vt-surface-2) !important; } html.dark .dark\:border-gray-800, html.dark .dark\:border-gray-700 { border-color: var(--vt-line) !important; } html.dark .dark\:text-white { color: var(--vt-text) !important; } html.dark .dark\:text-gray-300, html.dark .dark\:text-gray-200 { color: var(--vt-text-2) !important; } html.dark .dark\:text-gray-400, html.dark .dark\:text-gray-500 { color: var(--vt-text-3) !important; } /* Angles nets : champ 2 px, carte 4 px, modale 6 px. */ .rounded, .rounded-md, .rounded-sm { border-radius: var(--vt-radius-field) !important; } .rounded-lg { border-radius: var(--vt-radius-card) !important; } .rounded-xl, .rounded-2xl { border-radius: var(--vt-radius-modal) !important; } /* Ombres rares : les cartes se séparent par un filet. */ .vt-main .box-shadow, .vt-main .shadow, .vt-main .shadow-sm { box-shadow: none !important; } /* 4.2 Titres en Montserrat */ .vt-main .text-xl.font-bold, .vt-main .text-2xl.font-bold, .vt-main h1 { font-family: var(--vt-font-display); font-weight: 600 !important; font-size: 22px !important; line-height: 1.25; letter-spacing: -.005em; color: var(--vt-text); } .vt-main .text-base.font-semibold, .vt-main .text-lg.font-semibold, .vt-main h2, .vt-main .vc-card h2 { font-family: var(--vt-font-display); font-weight: 600; color: var(--vt-text); } /* 4.3 Fil d'Ariane (partial de Krayin) : 11 px, neutre ; le dernier élément un ton plus clair */ .vt-main nav > ol.flex.flex-wrap > li { font: 400 11px/1.4 var(--vt-font) !important; color: var(--vt-text-3) !important; } .vt-main nav > ol.flex.flex-wrap > li a { color: inherit; text-decoration: none; } .vt-main nav > ol.flex.flex-wrap > li a:hover { color: var(--vt-text); } .vt-main nav > ol.flex.flex-wrap > li[aria-current="page"] { color: var(--vt-text-2) !important; } /* 4.3 bis Liens et couleur de marque */ .text-brandColor { color: var(--vt-accent-link) !important; } .bg-brandColor { background-color: var(--vt-navy) !important; } html.dark .bg-brandColor { background-color: var(--vt-accent) !important; color: var(--vt-navy) !important; } .border-brandColor { border-color: var(--vt-accent) !important; } .text-sky-600, .text-blue-600, .text-blue-800, .text-blue-900, .hover\:text-sky-600:hover { color: var(--vt-accent-link) !important; } .bg-sky-100, .bg-blue-100, .bg-blue-200, .hover\:bg-blue-100:hover { background-color: var(--vt-accent-soft) !important; } .bg-sky-600, .bg-blue-600 { background-color: var(--vt-navy) !important; } .border-blue-600, .border-blue-200, .hover\:border-blue-400:hover { border-color: var(--vt-accent-soft-line) !important; } /* 4.4 Boutons : primaire or (texte navy), secondaire à filet */ .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px !important; border: 1px solid var(--vt-accent) !important; border-radius: var(--vt-radius-field) !important; background: var(--vt-accent) !important; color: var(--vt-navy) !important; font: 600 12px/1.2 var(--vt-font) !important; transition: background-color .14s ease-out, border-color .14s ease-out; } .primary-button:hover { background: var(--vt-accent-hover) !important; border-color: var(--vt-accent-hover) !important; opacity: 1 !important; } .primary-button * { color: var(--vt-navy) !important; } .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 11px !important; border: 1px solid var(--vt-line) !important; border-radius: var(--vt-radius-field) !important; background: var(--vt-surface) !important; color: var(--vt-text) !important; font: 600 12px/1.2 var(--vt-font) !important; transition: border-color .14s ease-out, background-color .14s ease-out; } .secondary-button:hover { border-color: var(--vt-text-3) !important; background: var(--vt-surface-2) !important; } .transparent-button { border-radius: var(--vt-radius-field) !important; font-family: var(--vt-font) !important; } /* 4.5 Champs */ .vt-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .vt-main select, .vt-main textarea { border-color: var(--vt-line); border-radius: var(--vt-radius-field) !important; background-color: var(--vt-surface); color: var(--vt-text); font-family: var(--vt-font); } .vt-main input:focus, .vt-main select:focus, .vt-main textarea:focus { border-color: var(--vt-accent) !important; } .vt-main input::placeholder, .vt-main textarea::placeholder { color: var(--vt-text-3); } input[type="checkbox"], input[type="radio"] { accent-color: var(--vt-success); } /* 4.6 Listes (datagrid de Krayin) : en-tête neutre en capitales, lignes denses, survol discret */ .vt-main .row.grid { border-color: var(--vt-line) !important; } .vt-main .row.grid.font-semibold, .vt-main .row.grid.bg-gray-50 { background: var(--vt-surface-2) !important; color: var(--vt-text-3) !important; font: 600 10px/1.3 var(--vt-font) !important; letter-spacing: .12em; text-transform: uppercase; } .vt-main .row.grid.font-semibold :is(p, span, div), .vt-main .row.grid.bg-gray-50 :is(p, span, div) { font: inherit !important; letter-spacing: inherit; } .vt-main .row.grid:not(.font-semibold) { font-size: 13px; } .vt-main .row.grid.hover\:bg-gray-50:hover { background: var(--vt-surface-2) !important; } /* 4.7 Fenêtres modales et menus */ .vt-main [class*="shadow-"][class*="absolute"], .vt-menu { box-shadow: var(--vt-shadow-menu) !important; } /* 4.8 Messages éclair (toasts de Krayin) : sémantiques, jamais or */ #app .fixed .bg-green-600 { background-color: var(--vt-success) !important; } #app .fixed .bg-red-600 { background-color: var(--vt-danger) !important; } #app .fixed .bg-yellow-600, #app .fixed .bg-orange-600 { background-color: var(--vt-warning) !important; } /* ── 5. Styles partagés des modules VIP OS (.vc-*) sur les jetons ─────────── */ .vc-card { background: var(--vt-surface) !important; border: 1px solid var(--vt-line) !important; border-radius: var(--vt-radius-card) !important; color: var(--vt-text); } .vc-card h2 { font-family: var(--vt-font-display); font-size: 16px; font-weight: 600; color: var(--vt-text) !important; } .vc-table th { background: var(--vt-surface-2) !important; color: var(--vt-text-3) !important; border-bottom: 1px solid var(--vt-line) !important; font: 600 10px/1.3 var(--vt-font); letter-spacing: .12em; text-transform: uppercase; } .vc-table td { color: var(--vt-text) !important; border-bottom: 1px solid var(--vt-line) !important; } .vc-table tbody tr:hover td { background: var(--vt-surface-2); } .vc-muted, .vc-dl dt, .vc-empty, .vc-field .vc-help { color: var(--vt-text-3) !important; } .vc-dl dd { color: var(--vt-text) !important; } .vc-field label, .vc-label { color: var(--vt-text-3) !important; font: 600 10px/1.3 var(--vt-font) !important; letter-spacing: .14em; text-transform: uppercase; } .vc-field input, .vc-field select, .vc-field textarea { background: var(--vt-surface) !important; border-color: var(--vt-line) !important; border-radius: var(--vt-radius-field) !important; color: var(--vt-text) !important; } .vc-link { color: var(--vt-accent-link) !important; } .vc-tabs { border-bottom-color: var(--vt-line) !important; gap: 22px !important; } .vc-tabs a { padding: 0 2px 12px !important; font-size: 13px !important; color: var(--vt-text-2) !important; border-bottom: 0 !important; } .vc-tabs a.active { color: var(--vt-text) !important; font-weight: 600 !important; box-shadow: inset 0 -2px 0 var(--vt-accent); } .vc-badge { border: 1px solid transparent; border-radius: 999px; font: 600 10px/1.4 var(--vt-font) !important; letter-spacing: .06em; text-transform: uppercase; } .vc-badge-ok, .vc-status-active { color: var(--vt-success-text) !important; background: var(--vt-success-bg) !important; border-color: var(--vt-success-line) !important; } .vc-badge-warning, .vc-badge-notice, .vc-badge-critical, .vc-status-suspended { color: var(--vt-warning-text) !important; background: var(--vt-warning-bg) !important; border-color: var(--vt-warning-line) !important; } .vc-badge-expired { color: var(--vt-danger-text) !important; background: var(--vt-danger-bg) !important; border-color: var(--vt-danger-line) !important; } .vc-badge-none, .vc-badge-neutral, .vc-status-inactive, .vc-status-recruiting { color: var(--vt-neutral-text) !important; background: var(--vt-neutral-bg) !important; border-color: var(--vt-neutral-line) !important; } .vc-summary div { background: var(--vt-surface) !important; border-color: var(--vt-line) !important; border-radius: var(--vt-radius-card) !important; } .vc-summary strong { font-family: var(--vt-font-display); font-weight: 700; color: var(--vt-text); } .vc-note { background: var(--vt-surface-2) !important; color: var(--vt-text) !important; border-left-color: var(--vt-accent) !important; } .vc-sub { background: var(--vt-surface-2) !important; border-radius: var(--vt-radius-card) !important; } .vc-progress { background: var(--vt-line-soft) !important; } .vc-dialog { background: var(--vt-surface) !important; color: var(--vt-text) !important; border-radius: var(--vt-radius-modal) !important; box-shadow: var(--vt-shadow-modal) !important; } .vc-dialog__choice { border-color: var(--vt-line) !important; border-radius: var(--vt-radius-card) !important; } /* ── 6. Composants réutilisables de la charte (.vt-*) ─────────────────────── */ .vt-text-danger { color: var(--vt-danger) !important; } .vt-text-warning { color: var(--vt-warning) !important; } .vt-text-success { color: var(--vt-success) !important; } .vt-block { display: block; } .is-missing { color: var(--vt-glyph) !important; } .vt-eyebrow { margin: 0; font: 600 10px/1.3 var(--vt-font); letter-spacing: .14em; text-transform: uppercase; color: var(--vt-text-3); } .vt-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 999px; vertical-align: 1px; } .vt-dot--success { background: var(--vt-success); } .vt-dot--warning { background: var(--vt-warning); } .vt-dot--danger { background: var(--vt-danger); } .vt-dot--neutral { background: var(--vt-glyph); } /* Badge de statut : sémantique, jamais or */ .vt-badge { display: inline-flex; align-items: center; padding: 2px 7px; border: 1px solid var(--vt-neutral-line); border-radius: 2px; background: var(--vt-neutral-bg); color: var(--vt-neutral-text); font: 600 10px/1.5 var(--vt-font); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } .vt-badge--success { border-color: var(--vt-success-line); background: var(--vt-success-bg); color: var(--vt-success-text); } .vt-badge--warning { border-color: var(--vt-warning-line); background: var(--vt-warning-bg); color: var(--vt-warning-text); } .vt-badge--danger { border-color: var(--vt-danger-line); background: var(--vt-danger-bg); color: var(--vt-danger-text); } .vt-badge--accent { border-color: var(--vt-accent-soft-line); background: var(--vt-accent-soft); color: var(--vt-text); } .vt-badge--neutral { border-color: var(--vt-neutral-line); background: var(--vt-neutral-bg); color: var(--vt-neutral-text); } /* Carte */ .vt-card { background: var(--vt-surface); border: 1px solid var(--vt-line); border-radius: var(--vt-radius-card); color: var(--vt-text); } .vt-card + .vt-card { margin-top: 20px; } .vt-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 16px 20px; border-bottom: 1px solid var(--vt-line); } .vt-card__title { margin: 0; font: 600 16px/1.35 var(--vt-font-display) !important; color: var(--vt-text); } .vt-card__meta { font: 400 12px/1.4 var(--vt-font); color: var(--vt-text-3); } .vt-card__link { margin-left: auto; font: 600 12px/1.4 var(--vt-font); color: var(--vt-accent-link); text-decoration: none; } .vt-card__link:hover { text-decoration: underline; } .vt-card__body { padding: 16px 20px; } .vt-card__foot { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 12px 20px; border-top: 1px solid var(--vt-line-soft); font: 400 12px/1.5 var(--vt-font); color: var(--vt-text-2); } .vt-card__foot strong { color: var(--vt-text); font-weight: 600; } /* Tableau dense */ .vt-table-wrap { overflow-x: auto; } .vt-table { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--vt-font); font-variant-numeric: tabular-nums; } .vt-table th { padding: 10px 16px; background: var(--vt-surface-2); border-bottom: 1px solid var(--vt-line); text-align: left; white-space: nowrap; font: 600 10px/1.3 var(--vt-font); letter-spacing: .12em; text-transform: uppercase; color: var(--vt-text-3); } .vt-table td { height: 44px; padding: 9px 16px; border-bottom: 1px solid var(--vt-line); color: var(--vt-text); vertical-align: middle; } .vt-table tbody tr:last-child td { border-bottom: 0; } .vt-table tbody tr:hover td { background: var(--vt-surface-2); } .vt-table .is-num { text-align: right; white-space: nowrap; } .vt-table__name { font-weight: 500; color: var(--vt-text); text-decoration: none; } .vt-table__name:hover { text-decoration: underline; text-decoration-color: var(--vt-accent); } .vt-table__sub { font-size: 12px; color: var(--vt-text-3); } /* État vide : titre court, une phrase, pas d'illustration */ .vt-empty { padding: 24px 20px; } .vt-empty__title { margin: 0; font: 600 13px/1.4 var(--vt-font); color: var(--vt-text); } .vt-empty__text { margin: 4px 0 0; font: 400 12px/1.5 var(--vt-font); color: var(--vt-text-3); } /* Accueil */ .vt-home { margin-bottom: 20px; } .vt-home__context { margin: -8px 0 16px; font: 400 12px/1.5 var(--vt-font); color: var(--vt-text-2); } .vt-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } @media (max-width: 1279px) { .vt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .vt-kpis { grid-template-columns: minmax(0, 1fr); } } .vt-kpi { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--vt-surface); border: 1px solid var(--vt-line); border-radius: var(--vt-radius-card); } .vt-kpi--marked { box-shadow: inset 0 2px 0 var(--vt-accent); } .vt-kpi__value { margin: 0; padding-bottom: 2px; font: 700 28px/1.2 var(--vt-font-display); color: var(--vt-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vt-kpi__note { margin: 0; font: 400 12px/1.5 var(--vt-font); color: var(--vt-text-2); } .vt-kpi__icon { display: inline-block; width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; } .vt-kpi__sub { display: block; margin-top: 3px; font-size: 11px; color: var(--vt-text-3); } .vt-columns { display: flex; gap: 20px; align-items: flex-start; } .vt-columns__main { flex: 1; min-width: 0; } .vt-columns__side { flex: none; width: 370px; } @media (max-width: 1279px) { .vt-columns { flex-direction: column; } .vt-columns__side { width: 100%; } } .vt-pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; padding: 16px 20px; } .vt-pipeline__stage { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .vt-pipeline__bar { display: block; height: 6px; margin-bottom: 4px; } .vt-pipeline__count { margin: 0; font: 700 22px/1 var(--vt-font-display); color: var(--vt-text); } .vt-pipeline__value { margin: 0; font: 400 12px/1.3 var(--vt-font); color: var(--vt-text-2); } .vt-tasks, .vt-timeline { margin: 0; padding: 0; list-style: none; } .vt-task { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--vt-line); } .vt-task:last-child { border-bottom: 0; } .vt-check { flex: none; width: 17px; height: 17px; margin-top: 2px; border: 1px solid var(--vt-check); border-radius: 2px; accent-color: var(--vt-success); cursor: pointer; } .vt-check:disabled { cursor: default; } .vt-task__text { min-width: 0; } .vt-task__title { font: 500 13px/1.4 var(--vt-font); color: var(--vt-text); text-decoration: none; } .vt-task__meta { margin: 2px 0 0; font: 400 11px/1.4 var(--vt-font); color: var(--vt-text-3); } .vt-task.is-done .vt-task__title { color: var(--vt-glyph); text-decoration: line-through; } .vt-timeline { position: relative; padding: 14px 20px 16px; } .vt-timeline::before { content: ''; position: absolute; top: 20px; bottom: 24px; left: 32px; width: 1px; background: var(--vt-line); } .vt-timeline__entry { position: relative; display: flex; gap: 12px; padding: 6px 0; } .vt-timeline__icon { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--vt-line-soft); color: var(--vt-text-2); } .vt-timeline__icon svg { width: 14px; height: 14px; } .vt-timeline__title { margin: 3px 0 0; font: 500 13px/1.4 var(--vt-font); color: var(--vt-text); } .vt-timeline__title a { color: inherit; text-decoration: none; } .vt-timeline__title a:hover { text-decoration: underline; text-decoration-color: var(--vt-accent); } .vt-timeline__meta { margin: 2px 0 0; font: 400 11px/1.4 var(--vt-font); color: var(--vt-text-3); } /* En-tête de page (fiche) : fil d'Ariane, titre, badge, contexte, actions ─ */ .vt-pagehead { margin: -20px -24px 20px; padding: 18px 24px 16px; background: var(--vt-surface); border-bottom: 1px solid var(--vt-line); } @media (max-width: 767px) { .vt-pagehead { margin: -16px -16px 16px; padding: 14px 16px; } } .vt-pagehead nav > ol { margin-bottom: 10px; } .vt-pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; } .vt-pagehead__main { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; } .vt-pagehead__titleline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .vt-pagehead__title { margin: 0; font: 600 22px/1.2 var(--vt-font-display) !important; color: var(--vt-text); } .vt-pagehead__ref { font: 400 11px/1.4 var(--vt-font); color: var(--vt-text-3); font-variant-numeric: tabular-nums; } .vt-pagehead__context { margin: 0; font: 400 12px/1.5 var(--vt-font); color: var(--vt-text-2); } .vt-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } .vt-pagehead__actions > div { display: contents; } /* Boutons d'activité de Krayin (grands carrés colorés) ramenés à des boutons secondaires. */ .vt-pagehead__actions button.h-\[74px\] { flex-direction: row !important; gap: 6px !important; width: auto !important; height: 34px !important; padding: 0 11px !important; border: 1px solid var(--vt-line) !important; border-radius: var(--vt-radius-field) !important; background: var(--vt-surface) !important; color: var(--vt-text) !important; font: 600 12px/1 var(--vt-font) !important; } .vt-pagehead__actions button.h-\[74px\]:hover { border-color: var(--vt-text-3) !important; background: var(--vt-surface-2) !important; } .vt-pagehead__actions button.h-\[74px\] [class*="icon-"] { font-size: 17px !important; color: var(--vt-text-2) !important; } .vt-btn-icon { width: 15px; height: 15px; flex: none; } /* Client 360 : carte d'identité + onglets */ .vt-360 { display: flex; gap: 20px; align-items: flex-start; } .vt-360__side { flex: none; width: 300px; position: sticky; top: 76px; } .vt-360__main { flex: 1; min-width: 0; } @media (max-width: 1023px) { .vt-360 { flex-direction: column; } .vt-360__side { width: 100%; position: static; } } .vt-identity { background: var(--vt-surface); border: 1px solid var(--vt-line); border-radius: var(--vt-radius-card); } .vt-identity > div { border-color: var(--vt-line) !important; } .vt-identity .text-sm, .vt-identity label { font-size: 13px; } .vt-overview { display: flex; gap: 20px; align-items: flex-start; } .vt-overview__main { flex: 1; min-width: 0; } .vt-overview__side { flex: none; width: 300px; display: flex; flex-direction: column; gap: 20px; } .vt-overview__side .vt-card + .vt-card { margin-top: 0; } /* Sous 1680 px, les cartes de droite passent sous l'aperçu, côte à côte. */ @media (max-width: 1679px) { .vt-overview { flex-direction: column; align-items: stretch; } .vt-overview__side { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; } } .vt-overview__main { container-type: inline-size; width: 100%; } .vt-kpis--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } @container (max-width: 760px) { .vt-kpis--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .vt-kpis--four .vt-kpi__value { font-size: 24px; } /* Onglets de fiche : trait or de 2 px, compteur accolé, pas de pilule */ .vt-tabs { display: flex; flex-wrap: wrap; gap: 0 22px; padding: 0 20px; border-bottom: 1px solid var(--vt-line); } .vt-tab { padding: 14px 2px 12px; font: 400 13px/1.3 var(--vt-font); color: var(--vt-text-2); white-space: nowrap; cursor: pointer; transition: color .14s ease-out; } .vt-tab:hover { color: var(--vt-text); } .vt-tab.is-active { color: var(--vt-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--vt-accent); } .vt-card__text { margin: 6px 0 0; font: 400 13px/1.5 var(--vt-font); color: var(--vt-text); } .vt-card__title-icon { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; color: var(--vt-success); } .vt-mt { margin-top: 10px; } .vt-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--vt-navy-deep); color: var(--vt-accent); font: 600 11px/1 var(--vt-font-display); } .vt-avatar--small { width: 26px; height: 26px; font-size: 10px; } html.dark .vt-avatar { box-shadow: 0 0 0 1px var(--vt-line); } .vt-people { margin: 0; padding: 6px 20px 12px; list-style: none; } .vt-people__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--vt-line-soft); } .vt-people__row:last-child { border-bottom: 0; } /* Panneau d'assistance : séparé, filet or de 3 px, étiqueté « Proposition » ; n'écrit rien sans clic */ .vt-assistant { box-shadow: inset 0 3px 0 var(--vt-accent); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; } .vt-assistant__head { display: flex; align-items: center; gap: 8px; } .vt-assistant__head .vt-badge { margin-left: auto; } .vt-assistant__icon { width: 17px; height: 17px; color: var(--vt-text-2); } .vt-assistant__status { margin: -4px 0 0; font: 400 11px/1.4 var(--vt-font); color: var(--vt-text-3); } .vt-assistant__box { padding: 12px 14px; border: 1px dashed var(--vt-line); border-radius: var(--vt-radius-field); } .vt-assistant__text { margin: 6px 0 0; font: 400 13px/1.55 var(--vt-font); color: var(--vt-text-2); } .vt-assistant__rule { margin: 0; font: 400 11px/1.5 var(--vt-font); color: var(--vt-text-3); } .vt-assistant__actions { display: flex; align-items: center; gap: 8px; } .vt-assistant__actions button:disabled { opacity: .55; cursor: not-allowed; } .vt-assistant__ignore { margin-left: auto; border: 0; background: none; font: 400 12px/1 var(--vt-font); color: var(--vt-text-3); } /* ── Fiche contrat (ECRANS § 5) ─────────────────────────────────────────────────────────── */ .vt-pagehead .vt-tabs--head { margin: 14px -24px -16px; padding: 0 24px; border-bottom: 0; } @media (max-width: 767px) { .vt-pagehead .vt-tabs--head { margin: 12px -16px -14px; padding: 0 16px; } } a.vt-tab { text-decoration: none; } a.vt-tab:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: -2px; } .vt-tab__count { margin-left: 4px; font-size: 11px; font-weight: 400; color: var(--vt-text-3); font-variant-numeric: tabular-nums; } .vt-kpis--page { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1023px) { .vt-kpis--page { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 559px) { .vt-kpis--page { grid-template-columns: minmax(0, 1fr); } } .vt-kpi__value--text { font-size: 18px !important; line-height: 1.3; white-space: normal; } .vt-band { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; padding: 16px 20px; margin-bottom: 20px; } .vt-band .vt-card__text { margin: 4px 0 0; } .vt-band__pairs { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0 0 0 auto; } .vt-band__pairs dd, .vt-pairs dd { margin: 4px 0 0; font: 600 14px/1.3 var(--vt-font); color: var(--vt-text); font-variant-numeric: tabular-nums; } .vt-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px 24px; margin: 0; padding: 16px 20px 20px; } .vt-changes { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 6px; padding: 10px 12px; list-style: none; background: var(--vt-surface-2); border-radius: var(--vt-radius-field); } .vt-changes li { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 2px 12px; font: 400 12px/1.5 var(--vt-font); } @media (max-width: 559px) { .vt-changes li { grid-template-columns: minmax(0, 1fr); } } .vt-changes__field { color: var(--vt-text-3); } .vt-changes__values { overflow-wrap: anywhere; } .vt-changes__old { color: var(--vt-text-2); } .vt-changes__new { color: var(--vt-text); font-weight: 600; } .vt-timeline--history .vt-timeline__body { flex: 1; min-width: 0; } /* ── Kanban des opportunités (ECRANS § 3) ───────────────────────────────────────────────── Ciblé depuis le repère .vt-kanban (partials/kanban-marker) : la rangée qui le suit contient les colonnes de Krayin. Filet de tête de 3 px par étape (couleurs de la bande pipeline de l'accueil), cartes blanches sans ombre, colonne vide en tirets, sans illustration. */ .vt-kanban + div { gap: 16px !important; } .vt-kanban + div > div { min-width: 272px !important; max-width: 272px !important; gap: 0 !important; background: transparent !important; border: 0 !important; border-top: 3px solid var(--vt-navy) !important; border-radius: 0 !important; } .vt-kanban + div > div:nth-child(5n+2) { border-top-color: #2B3060 !important; } .vt-kanban + div > div:nth-child(5n+3) { border-top-color: #575A78 !important; } .vt-kanban + div > div:nth-child(5n+4) { border-top-color: var(--vt-accent) !important; } .vt-kanban + div > div:nth-child(5n) { border-top-color: #BEDDCB !important; } html.dark .vt-kanban + div > div:nth-child(5n+1) { border-top-color: #A6AAC8 !important; } html.dark .vt-kanban + div > div:nth-child(5n+2) { border-top-color: #575A78 !important; } .vt-kanban + div > div > div:first-child { padding: 12px 2px 10px !important; gap: 4px; } .vt-kanban + div > div > div:first-child > div:first-child > span { font: 600 13px/1.3 var(--vt-font-display) !important; color: var(--vt-text) !important; } .vt-kanban + div > div > div:first-child > div:last-child > span { font: 400 11px/1.4 var(--vt-font) !important; color: var(--vt-text-3) !important; font-variant-numeric: tabular-nums; } .vt-kanban + div > div > div:first-child .bg-green-500 { background: var(--vt-text-2) !important; } .vt-kanban + div > div > div:first-child .rounded-full { border-radius: 0 !important; } .vt-kanban + div > div > div:nth-child(2) { gap: 10px !important; padding: 2px 0 12px !important; } .vt-kanban + div > div > div:nth-child(2) > div:first-child:not(.lead-item) > img { display: none; } .vt-kanban + div > div > div:nth-child(2) { justify-content: flex-start !important; } html.dark .vt-kanban + div > div { background: transparent !important; } .vt-kanban + div > div > div:nth-child(2) > div:first-child:not(.lead-item) { padding: 20px 14px; border: 1px dashed var(--vt-line); border-radius: var(--vt-radius-card); text-align: center; } .vt-kanban + div > div > div:nth-child(2) > div:first-child:not(.lead-item) p { font: 400 12px/1.5 var(--vt-font) !important; color: var(--vt-text-3) !important; } .vt-kanban + div > div > div:nth-child(2) > div:first-child:not(.lead-item) p:first-child { font: 600 13px/1.4 var(--vt-font) !important; color: var(--vt-text) !important; } .vt-kanban + div > div > div:nth-child(2) > div:first-child:not(.lead-item) .gap-4 { gap: 12px !important; } .vt-kanban + div .lead-item { gap: 10px !important; padding: 14px !important; background: var(--vt-surface) !important; border: 1px solid var(--vt-line) !important; border-radius: var(--vt-radius-card) !important; box-shadow: none !important; color: var(--vt-text) !important; transition: border-color .14s ease-out; } .vt-kanban + div .lead-item:hover { border-color: var(--vt-glyph) !important; } .vt-kanban + div .lead-item:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 2px; } .vt-kanban + div .lead-item span.text-xs.font-medium { font: 600 13px/1.35 var(--vt-font) !important; color: var(--vt-text) !important; } .vt-kanban + div .lead-item .text-\[10px\] { font: 400 11px/1.45 var(--vt-font) !important; color: var(--vt-text-3) !important; } .vt-kanban + div .lead-item > p.text-xs { font: 400 12px/1.45 var(--vt-font) !important; color: var(--vt-text-2) !important; } .vt-kanban + div .lead-item div.rounded-xl { border-radius: var(--vt-radius-field) !important; border: 1px solid var(--vt-neutral-line); font: 500 11px/1.3 var(--vt-font) !important; padding: 2px 6px !important; font-variant-numeric: tabular-nums; } .vt-kanban + div .lead-item div.rounded-xl:not([style]) { background: var(--vt-neutral-bg) !important; color: var(--vt-neutral-text) !important; } .vt-kanban + div .lead-item .text-rose-600 { color: var(--vt-danger) !important; } .draggable-ghost { opacity: .5; } /* ── Listes Contacts et Clients (ECRANS § 2, structure de VIP OS conservée) ───────────────── En-tête en capitales sur fond secondaire, lignes de 52 px, nom en lien vers Client 360, avatar neutre de 30 px, valeur absente « — » en glyphe. */ .vt-main .vt-dg-head { min-height: 40px; padding-top: 9px !important; padding-bottom: 9px !important; background: var(--vt-surface-2) !important; border-color: var(--vt-line) !important; } .vt-main .vt-dg-head p, .vt-main .vt-dg-head span { font: 600 10px/1.3 var(--vt-font) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-text-3) !important; } .vt-main .vt-dg-head span.font-medium { color: var(--vt-text) !important; } .vt-main .vt-dg-row { min-height: 52px; padding-top: 9px !important; padding-bottom: 9px !important; font: 400 13px/1.4 var(--vt-font); color: var(--vt-text); transition: background-color .14s ease-out; } .vt-main .vt-dg-row:hover { background: var(--vt-surface-2) !important; } .vt-main .vt-dg-id { font-size: 12px; color: var(--vt-text-3) !important; font-variant-numeric: tabular-nums; } .vt-main .vt-dg-person { gap: 10px !important; } .vt-main .vt-dg-person > div:first-child { width: 30px; min-width: 30px !important; height: 30px !important; background: var(--vt-neutral-bg) !important; border: 1px solid var(--vt-neutral-line); color: var(--vt-text) !important; font: 600 11px/1 var(--vt-font-display) !important; } .vt-main .vt-dg-name { font-weight: 500; color: var(--vt-text); text-decoration: none; } .vt-main .vt-dg-name:hover { text-decoration: underline; text-decoration-color: var(--vt-accent); text-underline-offset: 3px; } .vt-main .vt-dg-cell { color: var(--vt-text-2) !important; } .vt-nowrap { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .vt-main .row.grid > p { min-width: 0; } /* ── Hauteurs de ligne des paragraphes ───────────────────────────────────────────────────── Krayin impose p { line-height: 17px !important } : une valeur de 28 px y était rognée (la virgule décimale semblait un point). On rétablit celles de la charte sur les composants. */ p.vt-kpi__value, p.vt-pipeline__count { line-height: 1.2 !important; } p.vt-eyebrow, p.vt-pipeline__value, p.vt-menu__name, p.vt-menu__meta, p.vt-nav__heading, p.vt-nav__group { line-height: 1.3 !important; } p.vt-empty__title, p.vt-timeline__title, p.vt-timeline__meta, p.vt-task__meta, p.vt-assistant__status, p.vt-kpi__value--text { line-height: 1.4 !important; } p.vt-kpi__note, p.vt-empty__text, p.vt-card__text, p.vt-pagehead__context, p.vt-assistant__rule, p.vt-home__context, p.vt-table__sub, p.vt-dg-cell { line-height: 1.5 !important; } p.vt-assistant__text { line-height: 1.55 !important; }