/* ============================================= Scrollbar — stable gutter + slim ============================================= */ html { overflow-y: scroll; scrollbar-gutter: stable; } /* Bootstrap modal : empêcher le padding-right et déplacer overflow:hidden sur au lieu de */ body.modal-open { overflow: unset !important; padding-right: 0 !important; --bs-scrollbar-width: 0px !important; } html:has(body.modal-open) { overflow: hidden !important; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } *::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); } *::-webkit-scrollbar-button:start:decrement, *::-webkit-scrollbar-button:end:increment, *::-webkit-scrollbar-button:vertical:start:increment, *::-webkit-scrollbar-button:vertical:end:decrement { display: block; height: 0 !important; width: 0 !important; background: transparent; } /* Firefox (ne supporte pas ::-webkit-scrollbar) */ @-moz-document url-prefix() { * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } } h6 > .ti, h5 > .ti, h4 > .ti, .h4 > .ti { vertical-align: -0.125em; } button > .ti{ vertical-align: -0.125em; } span.badge > .ti{ vertical-align: -0.125em; } .alert > .ti{ vertical-align: -0.125em; } /* ============================================= CertiLead — Primary color override (#347FFC) ============================================= */ :root, [data-bs-theme="light"] { --bs-primary: #347FFC; --bs-primary-rgb: 52, 127, 252; --bs-primary-text-emphasis: #153365; --bs-primary-bg-subtle: #e2eeff; --bs-primary-border-subtle: #a3c7fe; --bs-purple: #347FFC; --bs-link-color: #347FFC; --bs-link-color-rgb: 52, 127, 252; --bs-link-hover-color: #2a66ca; --bs-link-hover-color-rgb: 42, 102, 202; } [data-bs-theme="dark"] { --bs-primary: #347FFC; --bs-primary-rgb: 52, 127, 252; --bs-primary-text-emphasis: #7fb2fd; --bs-primary-bg-subtle: #152d4f; --bs-primary-border-subtle: #2a4f8c; } .btn-primary { --bs-btn-bg: #347FFC; --bs-btn-border-color: #347FFC; --bs-btn-hover-bg: #2a6ad4; --bs-btn-hover-border-color: #2660c5; --bs-btn-active-bg: #2660c5; --bs-btn-active-border-color: #2356b5; --bs-btn-disabled-bg: #347FFC; --bs-btn-disabled-border-color: #347FFC; } .btn-outline-primary { --bs-btn-color: #347FFC; --bs-btn-border-color: #347FFC; --bs-btn-hover-bg: #347FFC; --bs-btn-hover-border-color: #347FFC; --bs-btn-active-bg: #347FFC; --bs-btn-active-border-color: #347FFC; --bs-btn-disabled-color: #347FFC; --bs-btn-disabled-border-color: #347FFC; } .btn-label-primary { --bs-btn-bg: rgba(52, 127, 252, 0.16); --bs-btn-color: #347FFC; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #347FFC; } .progress-bar { --bs-progress-bar-bg: #347FFC; } /* ============================================= Custom styles ============================================= */ h6 > .icon-base { position: relative; top: -1px; } h4 > i.ti { position: relative; top: 3px; } .modal h5 > i.ti { position: relative; top: 2px; } /*div.alert > i.ti { position: relative; top: 2px; }*/ .menu-title { font-weight: 500; } .app-brand .app-brand-text { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px; } .badge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .font-mono { font-family: 'Fira Code', monospace; } /* Certification detail stepper modal */ #cert_stepper.vertical .bs-stepper-header { min-inline-size: 15rem; } #cert_stepper.vertical .bs-stepper-content { inline-size: 100%; border-inline-start: 1px solid var(--bs-border-color); max-height: 70vh; overflow-y: auto; } #cert_stepper .step { cursor: pointer; } #cert_stepper .step .step-trigger { gap: 0.5rem; } @media (max-width: 991.98px) { #cert_stepper.vertical .bs-stepper-header { min-inline-size: auto; } #cert_stepper.vertical .bs-stepper-content { border-inline-start: none; border-block-start: 1px solid var(--bs-border-color); max-height: 60vh; } } .modal-simple .modal-content { padding: 1rem; } .modal-simple .btn-close{ inset-block-start: 1rem; inset-inline-end: 1rem; } /*.modal-body{ padding: 10px; } */ /* Dashboard — badge au-dessus du temps, aligné à droite */ .user-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; min-width: 90px; } /* Dashboard — trust score colonne */ .dash-trust-col { min-width: 110px; max-width: 130px; } .dash-trust-score small { font-size: 0.7rem; line-height: 1; } .dash-trust-bar { height: 5px; border-radius: 3px; } /* Dashboard — listes temps réel */ .dash-live-list { overflow: hidden; list-style: none; } /* Entrée : l'item arrive du haut */ .dash-item-enter { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; } .dash-item-enter.dash-item-enter-active { max-height: 80px; opacity: 1; } /* Sortie : l'item disparaît par le bas */ .dash-item-exit { overflow: hidden; transition: max-height 0.3s ease 0.05s, opacity 0.2s ease; max-height: 0 !important; opacity: 0 !important; } /* Verification test — cards de niveau */ .vtest-level-card { transition: box-shadow 0.2s ease; overflow: hidden; } .vtest-level-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.08); } .vtest-level-card .card-header { border-bottom: 1px solid var(--bs-border-color); padding-block: 1rem; } /* Grade trust score */ .vtest-grade { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -1px; } /* Check rows — flex aligné */ .vtest-check-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); font-size: 0.875rem; } .vtest-check-row:last-child { border-bottom: none; } .vtest-check-row .icon-base { flex-shrink: 0; } /* Boxed metrics (inspiré Vuexy earning reports) */ .vtest-metrics-box { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 1.25rem; } .vtest-metrics-box .vtest-metric { text-align: center; } .vtest-metrics-box .vtest-metric h4 { margin-bottom: 0.25rem; } /* Status banner redesign */ .vtest-status-banner { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .vtest-status-banner .avatar-lg { width: 50px; height: 50px; } /* Metric item (inspiré Vuexy delivery performance) */ .vtest-metric-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; } .vtest-metric-item:not(:last-child) { border-bottom: 1px solid var(--bs-border-color-translucent); } /* JSON console */ .vtest-json-console { background: #1e1e2d; color: #a9b7d0; border-radius: 8px; padding: 1rem; max-height: 400px; overflow: auto; font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.8rem; line-height: 1.5; } .btn-label-primary:hover{ border-color:#cee0fe; background:#cee0fe; } .btn-outline-primary:focus, .btn-outline-primary:active { color: #FFFFFF; } .btn-outline-primary:focus:active { color: #FFFFFF; } .btn-outline-primary:hover{ background:#EFF5FF; color:#347FFC; } /* Login — Sphere panel */ .login-sphere-panel { background: #000000; min-height: 100vh; overflow: hidden; } .login-sphere-panel canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .authentication-wrapper.authentication-cover .authentication-bg { min-height: 100vh; } /* Login — Typing effect */ #sphere_title, #sphere_subtitle { min-height: 1.4em; } .typing-cursor { display: inline-block; width: 2px; height: 1em; background: #347FFC; margin-left: 1px; vertical-align: text-bottom; animation: typing_blink 0.6s step-end infinite; } @keyframes typing_blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Login — Input focus glow */ .authentication-bg .form-control:focus { border-color: #347FFC; box-shadow: 0 0 0 3px rgba(52, 127, 252, 0.15), 0 0 16px rgba(52, 127, 252, 0.12); transition: box-shadow 0.3s ease, border-color 0.3s ease; } .authentication-bg .form-control { transition: box-shadow 0.3s ease, border-color 0.3s ease; } /* Login — Button shimmer */ .authentication-bg .btn-primary { position: relative; overflow: hidden; } .authentication-bg .btn-primary::after { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: none; } .authentication-bg .btn-primary:hover::after { animation: login_shimmer 0.8s ease forwards; } @keyframes login_shimmer { 0% { left: -100%; } 100% { left: 200%; } } /* ============================================= Analyse IA — upsell section ============================================= */ .ai-upsell { position: relative; padding: 36px 28px; background: #f3faff; border: 1px solid rgba(52, 127, 252, 0.15); border-radius: 12px; overflow: hidden; } .ai-upsell-badge { position: absolute; right: 12px; top: 13px; } .ai-upsell-header { text-align: center; margin-bottom: 24px; } .ai-upsell-icon { font-size: 36px; color: #23b6ff; display: block; margin: 0 auto 16px; line-height: 1; } .ai-upsell-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; color: #2e2e3a; } .ai-upsell-desc { color: #697a8d; font-size: 13px; margin: 0; max-width: 360px; display: inline-block; } .ai-upsell-img { width: 100%; text-align: center; } .ai-upsell-img img { width: 400px; } .ai-upsell-benefits { display: flex; flex-direction: column; gap: 10px; max-width: 400px; margin: 0 auto 28px; } .ai-upsell-benefit { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255, 255, 255, 0.7); border-radius: 10px; border: 1px solid rgba(52, 127, 252, 0.08); } .ai-upsell-benefit i { font-size: 22px; color: #23b6ff; flex-shrink: 0; } .ai-upsell-benefit-title { font-weight: 600; font-size: 13px; color: #2e2e3a; } .ai-upsell-benefit-desc { font-size: 12px; color: #697a8d; line-height: 1.3; } .ai-upsell-cta { text-align: center; } .ai-upsell-cta-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #25E93C, #347FFC); border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 14px rgba(52, 127, 252, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } .ai-upsell-cta-btn:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 8px 28px rgba(37, 233, 60, 0.3), 0 0 16px rgba(52, 127, 252, 0.25); } .ai-upsell-cta-btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 2px 8px rgba(52, 127, 252, 0.25); transition: transform 0.1s ease, box-shadow 0.1s ease; } .ai-upsell-cta-btn .shimmer { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: ai_shimmer 3s ease-in-out infinite; pointer-events: none; } @keyframes ai_shimmer { 0% { left: -100%; } 100% { left: 200%; } } .ai-upsell-sub { margin: 12px 0 0; font-size: 11px; color: #a1acb8; } .btn-outline-light:hover, .btn-outline-light:focus{ color: #575757; } /* ── Integration accordion ── */ .cl-accordion .card-header-toggle { cursor: pointer; user-select: none; min-height: 56px; transition: background-color .2s ease; } .cl-accordion .card-header-toggle:hover { background: rgba(0, 0, 0, .03); } .cl-accordion .cl-chevron { transition: transform .35s cubic-bezier(.4, 0, .2, 1); font-size: 18px; color: #a1a7b3; } .cl-accordion .card-header-toggle.collapsed .cl-chevron { transform: rotate(-90deg); } .cl-accordion .cl-collapse { overflow: hidden; max-height: 0; transition: max-height .4s cubic-bezier(.4, 0, .2, 1); } /* ============================================= Topbar — Badge contexte provider ============================================= */ .cl-provider-badge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; /*background: rgba(52, 127, 252, 0.06);*/ /*border: 1px solid rgba(52, 127, 252, 0.12);*/ color: var(--bs-body-color); text-decoration: none; border: 1px solid #FFF; transition: background .15s, border-color .15s; } .cl-provider-badge:hover { /*background: rgba(52, 127, 252, 0.1);*/ border-color: rgba(52, 127, 252, 0.2); color: var(--bs-body-color); } .cl-provider-label { font-weight: 600; font-size: 0.9rem; } .cl-provider-level { font-size: 0.65rem; letter-spacing: 0.5px; padding: 3px 6px; } /* ============================================= Topbar — Recherche globale (touche clavier) ============================================= */ .cl-kbd { display: inline-block; padding: 1px 6px; font-size: 0.7rem; font-family: inherit; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 4px; color: var(--bs-secondary-color); line-height: 1.4; } /* ============================================= Topbar — Modal recherche globale ============================================= */ .cl-search-modal .modal-content { border-radius: 12px; border: 1px solid var(--bs-border-color); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } /* Cards de choix d'entité / critère */ .cl-search-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; background: var(--bs-body-bg); border: 1.5px solid var(--bs-border-color); border-radius: 10px; color: var(--bs-body-color); text-align: center; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; } .cl-search-card:hover { background: rgba(52, 127, 252, 0.05); border-color: var(--bs-primary); transform: translateY(-1px); } .cl-search-card-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; } .cl-search-card-desc { font-size: 0.78rem; color: var(--bs-secondary-color); } /* Badge de contexte de recherche (étape 3) */ .cl-search-context { padding: 0 4px; } .cl-search-context .badge { font-size: 0.7rem; padding: 4px 8px; } .cl-search-input-wrapper { display: flex; align-items: center; gap: 12px; padding: 4px 0; } .cl-search-input-wrapper input { flex-grow: 1; background: transparent !important; box-shadow: none !important; font-size: 1rem; padding: 8px 0; } .cl-search-input-wrapper input:focus { background: transparent !important; box-shadow: none !important; outline: none !important; } .cl-search-results { min-height: 200px; max-height: 50vh; overflow-y: auto; } .cl-search-empty { padding: 40px 20px; } .cl-search-group { margin-bottom: 12px; } .cl-search-group-title { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px; color: var(--bs-secondary-color); padding: 8px 12px 4px; font-weight: 600; } .cl-search-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; color: var(--bs-body-color); transition: background .1s; } .cl-search-item:hover, .cl-search-item.cl-active { background: var(--bs-tertiary-bg); color: var(--bs-body-color); } .cl-search-item .cl-search-item-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--bs-tertiary-bg); } .cl-search-item.cl-active .cl-search-item-icon { background: var(--bs-body-bg); } .cl-search-item-body { flex-grow: 1; min-width: 0; } .cl-search-item-label { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl-search-item-sublabel { font-size: 0.75rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================= Topbar — Chip "Certifs du jour" temps réel ============================================= */ .cl-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; background: rgba(52, 127, 252, 0.06); border: 1px solid rgba(52, 127, 252, 0.12); color: var(--bs-body-color); text-decoration: none; transition: background .15s, border-color .15s, transform .15s; } .cl-chip:hover { background: rgba(52, 127, 252, 0.1); border-color: rgba(52, 127, 252, 0.2); color: var(--bs-body-color); } .cl-chip-label { font-size: 0.78rem; color: var(--bs-secondary-color); } .cl-chip-value { font-weight: 700; font-size: 1rem; color: var(--bs-body-color); } .cl-chip-delta { font-size: 0.65rem; padding: 3px 6px; } /* Animation pulse à chaque event certification.written */ @keyframes cl-pulse-anim { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.55); } 50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } } .cl-chip.cl-pulse { animation: cl-pulse-anim 0.7s ease-out; } /* ============================================= Topbar — Bouton Actions rapides (+ Nouveau) ============================================= */ .cl-quick-actions-btn { border-radius: 8px; padding: 6px 14px; } .cl-quick-actions-btn .ti { vertical-align: -0.125em; } /* ============================================= Topbar — Visibilité par rôle ============================================= */ /* Par défaut, items visibles seulement pour owner */ body:not(.role-owner) .cl-role-owner { display: none !important; } /* Items visibles pour owner OU admin */ body:not(.role-owner):not(.role-admin) .cl-role-admin { display: none !important; } /* ============================================= Topbar — Responsive (mobile) ============================================= */ @media (max-width: 991.98px) { .cl-search-btn { min-width: 0; padding: 6px 10px; } .cl-provider-badge { padding: 6px 10px; } .cl-provider-level { display: none; } } @media (max-width: 575.98px) { .cl-chip { padding: 6px 10px; } .cl-provider-label { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; } }