/* ============================================= 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; } } /* ============================================= Headings — icon alignment fix ============================================= */ 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 ============================================= */ .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; } /* Detail stepper (shared: #cert_stepper + #verif_stepper + #profile_stepper) */ #cert_stepper.vertical .bs-stepper-header, #verif_stepper.vertical .bs-stepper-header, #profile_stepper.vertical .bs-stepper-header { min-inline-size: 15rem; } #cert_stepper.vertical .bs-stepper-content, #verif_stepper.vertical .bs-stepper-content, #profile_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, #verif_stepper .step, #profile_stepper .step { cursor: pointer; } #cert_stepper .step .step-trigger, #verif_stepper .step .step-trigger, #profile_stepper .step .step-trigger { gap: 0.5rem; } @media (max-width: 991.98px) { #cert_stepper.vertical .bs-stepper-header, #verif_stepper.vertical .bs-stepper-header, #profile_stepper.vertical .bs-stepper-header { min-inline-size: auto; } #cert_stepper.vertical .bs-stepper-content, #verif_stepper.vertical .bs-stepper-content, #profile_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; } /* ============================================= Verify Report — Redesign v2 ============================================= */ /* --- Hero "Verdict" banner --- */ .vr-hero { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; border-radius: var(--bs-border-radius-lg); background: linear-gradient(135deg, var(--vr-hero-start), var(--vr-hero-end)); border: 1px solid var(--vr-hero-border); margin-bottom: 1.5rem; animation: vr_hero_enter 0.5s ease-out; } .vr-hero--valid { --vr-hero-start: rgba(40,199,111,0.08); --vr-hero-end: rgba(40,199,111,0.02); --vr-hero-accent: #28c76f; --vr-hero-accent-rgb: 40,199,111; --vr-hero-border: rgba(40,199,111,0.15); } .vr-hero--revoked { --vr-hero-start: rgba(255,76,81,0.10); --vr-hero-end: rgba(255,76,81,0.02); --vr-hero-accent: #ff4c51; --vr-hero-accent-rgb: 255,76,81; --vr-hero-border: rgba(255,76,81,0.2); } .vr-hero--pending, .vr-hero--expired { --vr-hero-start: rgba(255,159,67,0.08); --vr-hero-end: rgba(255,159,67,0.02); --vr-hero-accent: #ff9f43; --vr-hero-accent-rgb: 255,159,67; --vr-hero-border: rgba(255,159,67,0.15); } .vr-hero--error, .vr-hero--not_found { --vr-hero-start: rgba(168,170,174,0.08); --vr-hero-end: rgba(168,170,174,0.02); --vr-hero-accent: #a8aaae; --vr-hero-accent-rgb: 168,170,174; --vr-hero-border: rgba(168,170,174,0.15); } .vr-hero__seal { position: relative; width: 72px; height: 72px; flex-shrink: 0; } .vr-hero__seal-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px dashed rgba(var(--vr-hero-accent-rgb),0.3); animation: vr_seal_rotate 20s linear infinite; } .vr-hero__seal-inner { position: absolute; inset: 6px; border-radius: 50%; background: rgba(var(--vr-hero-accent-rgb),0.12); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--vr-hero-accent); } .vr-hero__status { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.5px; color: var(--vr-hero-accent); } .vr-hero__token { font-family: 'Fira Code', monospace; font-size: 1rem; color: var(--bs-body-color); opacity: 0.85; margin-top: 0.25rem; } .vr-hero__meta { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--bs-secondary-color); flex-wrap: wrap; } .vr-hero__level { margin-left: auto; } .vr-hero__kpis { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid rgba(var(--vr-hero-accent-rgb),0.1); } .vr-hero__kpi { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8rem; padding: 0.3rem 0.65rem; border-radius: 50rem; background: rgba(var(--vr-hero-accent-rgb),0.06); color: var(--bs-body-color); } .vr-hero__kpi i { font-size: 0.875rem; color: var(--vr-hero-accent); } /* --- Pipeline stepper --- */ .vr-pipeline { --vr-node-size: 48px; --vr-badge-size: 18px; --vr-connector-thickness: 4px; display: flex; align-items: flex-start; justify-content: center; gap: 0; padding: 1rem 1rem 1.15rem; margin-bottom: 1.25rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; overflow-x: auto; overflow-y: visible; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.4); background: #f9f9f9; } /* Chaque étape */ .vr-pipeline__step { position: relative; flex: 1 1 0; min-width: 120px; max-width: 180px; padding-top: 2px; display: flex; flex-direction: column; align-items: center; cursor: pointer; opacity: 0; transform: translateY(8px); animation: vr_step_enter 0.45s ease-out forwards; z-index: 1; } .vr-pipeline__step:nth-child(1) { animation-delay: 0.08s; } .vr-pipeline__step:nth-child(2) { animation-delay: 0.16s; } .vr-pipeline__step:nth-child(3) { animation-delay: 0.24s; } .vr-pipeline__step:nth-child(4) { animation-delay: 0.32s; } .vr-pipeline__step:nth-child(5) { animation-delay: 0.40s; } /* Ligne de liaison */ .vr-pipeline__connector { position: absolute; top: calc(var(--vr-node-size) / 2); left: calc(-50% + (var(--vr-node-size) / 2)); width: calc(100% - var(--vr-node-size)); height: var(--vr-connector-thickness); transform: translateY(-50%); background: linear-gradient( 90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.12) ); border-radius: 999px; z-index: 0; pointer-events: none; } .vr-pipeline__step:first-child .vr-pipeline__connector { display: none; } .vr-pipeline__step--active .vr-pipeline__connector { background: linear-gradient( 90deg, rgba(var(--vr-step-rgb), 0.35), rgba(var(--vr-step-rgb), 0.9) ); box-shadow: 0 0 0 1px rgba(var(--vr-step-rgb), 0.08); } .vr-pipeline__step--locked .vr-pipeline__connector { background: linear-gradient( 90deg, rgba(140, 140, 140, 0.18), rgba(140, 140, 140, 0.28) ); } /* Le node est au-dessus de la ligne */ .vr-pipeline__node { position: relative; z-index: 2; width: var(--vr-node-size); height: var(--vr-node-size); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease; isolation: isolate; box-sizing: border-box; } /* halo de fond derrière le node pour bien “couper” la ligne */ .vr-pipeline__node::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; background: var(--bs-card-bg, #fff); z-index: -1; } .vr-pipeline__step--active .vr-pipeline__node { background: linear-gradient( 180deg, rgba(var(--vr-step-rgb), 0.16), rgba(var(--vr-step-rgb), 0.08) ); color: var(--vr-step-color); border: 2px solid var(--vr-step-color); box-shadow: 0 8px 20px rgba(var(--vr-step-rgb), 0.14), inset 0 1px 0 rgba(255,255,255,0.45); } .vr-pipeline__step--active:hover .vr-pipeline__node { transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 24px rgba(var(--vr-step-rgb), 0.18), 0 0 0 6px rgba(var(--vr-step-rgb), 0.10); } .vr-pipeline__step--locked .vr-pipeline__node { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 2px dashed var(--bs-border-color); opacity: 0.68; box-shadow: none; } /* Label */ .vr-pipeline__label { margin-top: 0.65rem; padding-inline: 0.25rem; font-size: 0.76rem; font-weight: 700; line-height: 1.15; text-align: center; color: var(--bs-body-color); letter-spacing: 0.01em; } .vr-pipeline__step--locked .vr-pipeline__label { color: var(--bs-secondary-color); opacity: 0.65; } /* Badge = positionné sur le node, donc plus jamais traversé par la ligne */ .vr-pipeline__badge { position: absolute; top: -3px; right: calc(50% - 30px); z-index: 3; width: var(--vr-badge-size); height: var(--vr-badge-size); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; border: 2px solid var(--bs-card-bg, #fff); box-shadow: 0 4px 10px rgba(0,0,0,0.10); backdrop-filter: blur(4px); } .vr-pipeline__step--pass .vr-pipeline__badge { background: #28c76f; color: #fff; } .vr-pipeline__step--warn .vr-pipeline__badge { background: #ff9f43; color: #fff; } .vr-pipeline__step--fail .vr-pipeline__badge { background: #ff4c51; color: #fff; } .vr-pipeline__step--locked .vr-pipeline__badge { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border-color: var(--bs-card-bg, #fff); box-shadow: none; opacity: 0.9; } /* États additionnels sympas */ .vr-pipeline__step--pass .vr-pipeline__node { box-shadow: 0 8px 20px rgba(40,199,111,0.12), inset 0 1px 0 rgba(255,255,255,0.45); } .vr-pipeline__step--warn .vr-pipeline__node { box-shadow: 0 8px 20px rgba(255,159,67,0.14), inset 0 1px 0 rgba(255,255,255,0.45); } .vr-pipeline__step--fail .vr-pipeline__node { box-shadow: 0 8px 20px rgba(255,76,81,0.16), inset 0 1px 0 rgba(255,255,255,0.45); } /* Animation */ @keyframes vr_step_enter { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Scrollbar discrète */ .vr-pipeline::-webkit-scrollbar { height: 6px; } .vr-pipeline::-webkit-scrollbar-thumb { background: rgba(120,120,120,0.25); border-radius: 999px; } .vr-pipeline::-webkit-scrollbar-track { background: transparent; } /* Mobile */ @media (max-width: 768px) { .vr-pipeline { justify-content: flex-start; padding: 0.9rem 0.75rem 1rem; } .vr-pipeline__step { min-width: 105px; max-width: 105px; } .vr-pipeline__label { font-size: 0.7rem; } } /* --- Level cards --- */ .vr-level-card { border: 1px solid var(--vr-card-border); background: var(--vr-card-gradient); border-radius: var(--bs-border-radius-lg); margin-bottom: 1.25rem; overflow: hidden; opacity: 0; animation: vr_fade_up 0.45s ease-out forwards; } .vr-level-card .card-header { border-bottom: 1px solid var(--vr-card-border); background: transparent; padding: 1rem 1.25rem; } .vr-level-card .card-body { padding: 1.25rem; } .vr-level-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.06); } .vr-card-icon { width: 40px; height: 40px; border-radius: var(--bs-border-radius); background: var(--vr-card-icon-bg); display: flex; align-items: center; justify-content: center; color: var(--vr-card-accent); font-size: 1.25rem; flex-shrink: 0; } .vr-level-verdict { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; } .vr-level-verdict--ok { background: rgba(40,199,111,0.12); color: #28c76f; } .vr-level-verdict--warn { background: rgba(255,159,67,0.12); color: #ff9f43; } .vr-level-verdict--fail { background: rgba(255,76,81,0.12); color: #ff4c51; } /* Level palettes */ .vr-level-card[data-level="1"] { --vr-card-accent: #28c76f; --vr-card-accent-rgb: 40,199,111; --vr-card-border: rgba(40,199,111,0.2); --vr-card-gradient: linear-gradient(135deg,rgba(40,199,111,0.04),transparent); --vr-card-icon-bg: rgba(40,199,111,0.12); } .vr-level-card[data-level="2"] { --vr-card-accent: #347FFC; --vr-card-accent-rgb: 52,127,252; --vr-card-border: rgba(52,127,252,0.2); --vr-card-gradient: linear-gradient(135deg,rgba(52,127,252,0.04),transparent); --vr-card-icon-bg: rgba(52,127,252,0.12); } .vr-level-card[data-level="3"] { --vr-card-accent: #00bad1; --vr-card-accent-rgb: 0,186,209; --vr-card-border: rgba(0,186,209,0.2); --vr-card-gradient: linear-gradient(135deg,rgba(0,186,209,0.04),transparent); --vr-card-icon-bg: rgba(0,186,209,0.12); } .vr-level-card[data-level="4"] { --vr-card-accent: #ff9f43; --vr-card-accent-rgb: 255,159,67; --vr-card-border: rgba(255,159,67,0.2); --vr-card-gradient: linear-gradient(135deg,rgba(255,159,67,0.04),transparent); --vr-card-icon-bg: rgba(255,159,67,0.12); } .vr-level-card[data-level="5"] { --vr-card-accent: #ff4c51; --vr-card-accent-rgb: 255,76,81; --vr-card-border: rgba(255,76,81,0.2); --vr-card-gradient: linear-gradient(135deg,rgba(255,76,81,0.04),transparent); --vr-card-icon-bg: rgba(255,76,81,0.12); } /* --- Proof stamps (Level 1) --- */ .vr-proof-stamp { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 1.25rem; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .vr-proof-stamp:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); } .vr-proof-circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; border: 3px solid; font-size: 1.5rem; } .vr-proof-circle--ok { border-color: #28c76f; color: #28c76f; background: rgba(40,199,111,0.08); } .vr-proof-circle--fail { border-color: #ff4c51; color: #ff4c51; background: rgba(255,76,81,0.08); } .vr-proof-circle--na { border-color: var(--bs-secondary-color); color: var(--bs-secondary-color); background: rgba(168,170,174,0.08); } /* --- Trust score gauge (Level 3) --- */ .vr-gauge { position: relative; width: 180px; height: 110px; margin: 0 auto; } .vr-gauge__track { position: relative; width: 180px; height: 90px; overflow: hidden; margin: 0 auto; } .vr-gauge__track::before { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: conic-gradient(from 0.75turn, var(--vr-gauge-color) calc(var(--vr-gauge-deg)), var(--bs-border-color,#e0e0e0) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px)); } .vr-gauge__center { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; } .vr-gauge__grade { font-size: 2.25rem; font-weight: 800; line-height: 1; color: var(--vr-gauge-color); letter-spacing: -1px; } .vr-gauge__score { font-size: 0.875rem; font-weight: 600; color: var(--bs-body-color); } .vr-gauge__score span { font-weight: 400; color: var(--bs-secondary-color); font-size: 0.75rem; } .vr-gauge__label { text-align: center; font-size: 0.75rem; color: var(--bs-secondary-color); margin-top: 0.5rem; } /* --- Risk gauge 4 segments (Levels 3-4) --- */ .vr-risk-gauge { display: flex; border-radius: var(--bs-border-radius); overflow: hidden; height: 30px; } .vr-risk-gauge__seg { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 500; color: rgba(0,0,0,0.35); transition: all 0.3s ease; position: relative; } .vr-risk-gauge__seg--none { background: rgba(40,199,111,0.12); } .vr-risk-gauge__seg--low { background: rgba(40,199,111,0.2); } .vr-risk-gauge__seg--medium { background: rgba(255,159,67,0.2); } .vr-risk-gauge__seg--high { background: rgba(255,76,81,0.2); } .vr-risk-gauge__seg--active { font-weight: 700; color: #fff; transform: scaleY(1.12); border-radius: var(--bs-border-radius); z-index: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .vr-risk-gauge__seg--none.vr-risk-gauge__seg--active { background: #28c76f; } .vr-risk-gauge__seg--low.vr-risk-gauge__seg--active { background: #28c76f; } .vr-risk-gauge__seg--medium.vr-risk-gauge__seg--active { background: #ff9f43; } .vr-risk-gauge__seg--high.vr-risk-gauge__seg--active { background: #ff4c51; } /* --- Check items --- */ .vr-check-item { 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; } .vr-check-item:last-child { border-bottom: none; } .vr-check-item .icon-base { flex-shrink: 0; } /* --- Metric item --- */ .vr-metric-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; } .vr-metric-item:not(:last-child) { border-bottom: 1px solid var(--bs-border-color-translucent); } /* --- WORM seal (Level 5) --- */ .vr-worm-seal { border: 2px solid rgba(255,76,81,0.18); border-radius: var(--bs-border-radius-lg); padding: 1.5rem; background: repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(0,0,0,0.015) 28px, rgba(0,0,0,0.015) 29px), linear-gradient(135deg, rgba(255,248,240,0.5), rgba(255,255,255,0.8)); position: relative; } .vr-worm-seal__stamp { width: 64px; height: 64px; position: relative; flex-shrink: 0; } .vr-worm-seal__stamp-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px double rgba(255,76,81,0.45); animation: vr_stamp_appear 0.6s ease-out 0.8s both; } .vr-worm-seal__stamp-inner { position: absolute; inset: 8px; border-radius: 50%; background: rgba(255,76,81,0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ff4c51; font-size: 1.25rem; gap: 0; } .vr-worm-seal__stamp-inner span { font-size: 0.5rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-top: -2px; } .vr-worm-card { border-left: 3px solid var(--vr-card-accent, #ff4c51) !important; } .vr-worm-field { margin-bottom: 0.75rem; } .vr-worm-field small { display: block; font-weight: 600; color: var(--bs-secondary-color); margin-bottom: 0.15rem; font-size: 0.75rem; } .vr-worm-field code { font-size: 0.75rem; word-break: break-all; line-height: 1.6; } /* --- Claims alert --- */ .vr-claims-alert { border: 1px solid rgba(255,159,67,0.3); border-radius: var(--bs-border-radius-lg); padding: 1rem 1.25rem; background: rgba(255,159,67,0.06); display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; animation: vr_fade_up 0.4s ease-out both; animation-delay: 0.1s; } /* --- Raw data accordion --- */ .vr-raw-accordion .accordion-item { border-radius: var(--bs-border-radius) !important; overflow: hidden; margin-bottom: 0.5rem; } .vr-raw-accordion .accordion-button { font-size: 0.875rem; padding: 0.75rem 1rem; } .vr-raw-accordion .accordion-button:not(.collapsed) { background: var(--bs-light, #f8f9fa); } /* --- JSON console --- */ .vr-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; } /* --- Animations --- */ @keyframes vr_fade_up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes vr_hero_enter { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes vr_seal_rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes vr_bounce { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } @keyframes vr_step_enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes vr_pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--vr-step-rgb),0.35); } 50% { box-shadow: 0 0 0 6px rgba(var(--vr-step-rgb),0); } } @keyframes vr_stamp_appear { from { transform: scale(0.5) rotate(-15deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } .vr-anim-bounce { animation: vr_bounce 0.4s ease both; } .vr-anim-delay-1 { animation-delay: 0.15s; } .vr-anim-delay-2 { animation-delay: 0.30s; } .vr-anim-delay-3 { animation-delay: 0.45s; } .vr-anim-delay-4 { animation-delay: 0.60s; } .vr-anim-delay-5 { animation-delay: 0.75s; } /* --- Progress bar animated fill --- */ .vr-progress-fill { width: 0; transition: width 0.8s cubic-bezier(0.25,0.46,0.45,0.94) 0.3s; } /* --- Behaviour analysis (Level 3) --- */ .vr-behaviour-card { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 1.25rem; } .vr-behaviour-flag { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); font-size: 0.8125rem; } .vr-behaviour-flag:last-child { border-bottom: none; } .vr-behaviour-flag code { font-size: 0.75rem; background: rgba(0,186,209,0.08); padding: 0.15rem 0.4rem; border-radius: 4px; white-space: nowrap; } .vr-behaviour-flag .flag-reason { color: var(--bs-secondary-color); font-size: 0.75rem; margin-top: 0.15rem; } .vr-coherence-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 50rem; font-size: 0.8125rem; font-weight: 600; } .vr-coherence-badge--ok { background: rgba(40,199,111,0.12); color: #28c76f; } .vr-coherence-badge--fail { background: rgba(255,76,81,0.12); color: #ff4c51; } .vr-risk-breakdown { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .vr-risk-signal { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 50rem; background: rgba(var(--bs-body-color-rgb, 0,0,0), 0.04); border: 1px solid var(--bs-border-color); } /* --- Responsive --- */ @media (max-width: 767.98px) { .vr-hero { flex-direction: column; text-align: center; padding: 1.25rem; gap: 1rem; } .vr-hero__seal { width: 56px; height: 56px; } .vr-hero__seal-inner { font-size: 1.35rem; } .vr-hero__level { margin-left: 0; } .vr-hero__kpis { justify-content: center; } .vr-gauge { width: 150px; height: 95px; } .vr-gauge__track, .vr-gauge__track::before { width: 150px; } .vr-gauge__track::before { height: 150px; } .vr-gauge__grade { font-size: 1.75rem; } .vr-proof-stamp { padding: 1rem !important; } .vr-worm-seal { padding: 1rem !important; } } .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%; } } /* ============================================= Verifications — Lock cells & Level badges ============================================= */ .verif-lock-cell { display: inline-flex; align-items: center; justify-content: center; cursor: help; } .verif-lock-cell i { font-size: 1.15rem; opacity: 0.35; transition: opacity 0.2s ease, color 0.2s ease; } .verif-lock-cell:hover i { opacity: 0.85; color: var(--bs-primary); } .verif-level-badge { font-size: 0.75rem; min-width: 70px; text-align: center; } /* ============================================= Level Upsell — Locked modal sections ============================================= */ .level-upsell { padding: 15px 28px; background: #f3faff; border: 1px solid rgba(52, 127, 252, 0.15); border-radius: 12px; position: relative; text-align: center; } [data-bs-theme="dark"] .level-upsell { background: rgba(52, 127, 252, 0.06); border-color: rgba(52, 127, 252, 0.2); } .level-upsell-icon { font-size: 48px; display: block; margin: 0 auto; } .level-upsell-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; color: #2e2e3a; } [data-bs-theme="dark"] .level-upsell-title { color: #cfd3ec; } .level-upsell-desc { color: #697a8d; font-size: 13px; max-width: 400px; margin: 0 auto 24px; } .level-upsell-benefits { display: flex; flex-direction: column; gap: 10px; max-width: 400px; margin: 0 auto 28px; } .level-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); text-align: left; } [data-bs-theme="dark"] .level-upsell-benefit { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } .level-upsell-benefit i { font-size: 20px; color: #347FFC; min-width: 24px; } .level-upsell-benefit-title { font-size: 13px; font-weight: 600; color: #2e2e3a; } [data-bs-theme="dark"] .level-upsell-benefit-title { color: #cfd3ec; } .level-upsell-benefit-desc { font-size: 12px; color: #697a8d; } .level-upsell-cta { text-align: center; } .level-upsell-cta-btn { 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; box-shadow: 0 4px 14px rgba(52, 127, 252, 0.35); cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; } .level-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); color: #fff; } .level-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: level_upsell_shimmer 3s ease-in-out infinite; } @keyframes level_upsell_shimmer { 0% { left: -100%; } 50% { left: 200%; } 100% { left: 200%; } } .level-upsell-sub { font-size: 12px; color: #697a8d; margin-top: 10px; margin-bottom: 0; } .ti-30px{ font-size: 30px; } .swal2-container .swal2-modal.swal2-popup .swal2-title{ font-size: 1.5rem; margin: auto; max-inline-size: 20em; color: #2f2f2f; } .swal2-container .swal2-modal.swal2-popup .swal2-title i{ position: relative; top:3px; } /* ============================================= Profile — Level button hover ============================================= */ .btn-level-hover { cursor: pointer; transition: border-color 0.2s; } .btn-level-hover:hover { border-color: var(--bs-primary) !important; } /* ============================================= Navbar indicators ============================================= */ .nb-indicator { font-size: 0.82rem; border-radius: 6px; transition: background 0.15s; } .nb-indicator:hover { background: rgba(0,0,0,0.04); } .nb-indicator.nb-ok { color: #198754; } .nb-indicator.nb-warn { color: #fd7e14; } .nb-indicator.nb-danger { color: #dc3545; } #nb_balance_value, #nb_today_value { transition: color 0.3s; } @keyframes nb-pulse-anim { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } .nb-pulse { animation: nb-pulse-anim 0.4s ease; } /* ============================================= API Guide — Console & Documentation ============================================= */ /* Layout */ .ag-layout { display: grid; grid-template-columns: 380px 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 992px) { .ag-layout { grid-template-columns: 1fr; } } /* Console */ .ag-console { background: #1a1d23; border-radius: 8px; border: 1px solid #2d3748; overflow: hidden; min-height: 520px; display: flex; flex-direction: column; } .ag-console-header { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; background: #111318; border-bottom: 1px solid #2d3748; color: #94a3b8; font-size: 0.8rem; font-weight: 500; font-family: 'JetBrains Mono', monospace; } .ag-console-btn { background: none; border: 1px solid #374151; color: #94a3b8; border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.8rem; cursor: pointer; margin-left: 0.5rem; transition: background 0.15s, color 0.15s; } .ag-console-btn:hover { background: #374151; color: #e2e8f0; } .ag-console-btn:disabled { opacity: 0.4; cursor: not-allowed; } .ag-console-body { padding: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; line-height: 1.6; color: #e2e8f0; overflow-y: auto; flex: 1; max-height: 75vh; scrollbar-width: thin; scrollbar-color: #374151 transparent; } .ag-console-body::-webkit-scrollbar { width: 6px; } .ag-console-body::-webkit-scrollbar-track { background: transparent; } .ag-console-body::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; } .ag-console-body::-webkit-scrollbar-thumb:hover { background: #4b5563; } .ag-console-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 350px; color: #4b5563; text-align: center; } .ag-console-placeholder i { font-size: 3rem; margin-bottom: 1rem; } /* Console entries */ .ag-console-entry + .ag-console-entry { border-top: 1px solid #2d3748; margin-top: 1rem; padding-top: 1rem; } .ag-console-entry-num { color: #4b5563; font-size: 0.7rem; margin-bottom: 0.4rem; } .ag-console-curl { background: #111318; border-radius: 6px; padding: 0.75rem; margin-bottom: 0.75rem; white-space: pre-wrap; word-break: break-all; color: #a5b4fc; font-size: 0.75rem; border: 1px solid #1e2530; } .ag-console-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; font-size: 0.75rem; } .ag-console-meta span { display: inline-flex; align-items: center; gap: 0.3rem; } .ag-status-2xx { color: #4ade80; } .ag-status-4xx { color: #fb923c; } .ag-status-5xx { color: #f87171; } .ag-console-details { margin-top: 0.5rem; } .ag-console-details summary { cursor: pointer; color: #64748b; font-size: 0.72rem; padding: 0.3rem 0; user-select: none; } .ag-console-details summary:hover { color: #94a3b8; } .ag-console-json { background: #0f1117; border-radius: 6px; padding: 0.75rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; font-size: 0.72rem; margin-top: 0.4rem; border: 1px solid #1e2530; max-height: 400px; overflow-y: auto; } .ag-json-key { color: #93c5fd; } .ag-json-string { color: #86efac; } .ag-json-number { color: #fbbf24; } .ag-json-bool { color: #c084fc; } .ag-json-null { color: #6b7280; } .ag-console-error { background: #2d1b1b; border: 1px solid #7f1d1d; border-radius: 6px; padding: 0.75rem; color: #fca5a5; } .ag-console-summary { background: #111318; border-radius: 6px; padding: 0.75rem; margin-bottom: 0.75rem; border: 1px solid #1e2530; } .ag-console-summary h6 { color: #94a3b8; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .ag-summary-header { padding: 0.4rem 0; font-weight: 500; } .ag-summary-msg { font-weight: 400; font-size: 0.72rem; margin-top: 0.25rem; opacity: 0.8; } .ag-summary-row { display: flex; justify-content: space-between; padding: 0.2rem 0; border-bottom: 1px solid #1e2530; } .ag-summary-row:last-child { border-bottom: none; } .ag-summary-label { color: #94a3b8; } .ag-summary-value { font-weight: 500; } .ag-summary-ok { color: #4ade80; } .ag-summary-fail { color: #f87171; } .ag-summary-warn { color: #fb923c; } .ag-summary-na { color: #6b7280; } /* Documentation — menu des sections (vue maître-détail) */ .ag-doc-menu { position: sticky; top: 5rem; } .ag-doc-menu .custom-option { margin-bottom: 0.5rem; } .ag-doc-menu .custom-option-content { padding: 0.7rem 1rem; } .ag-doc-menu .custom-option .form-check-input { display: none; } .ag-doc-menu .h6 { font-weight: 500; display: flex; align-items: center; } .ag-doc-menu .custom-option.checked .h6 { font-weight: 600; } /* Documentation styles */ .ag-code { background: #1a1d23; border: 1px solid #2d3748; border-radius: 8px; padding: 1rem; color: #e2e8f0; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; position: relative; overflow-x: auto; } .ag-code-copy { position: absolute; top: 0.5rem; right: 0.5rem; background: #374151; border: none; color: #94a3b8; border-radius: 4px; padding: 0.2rem 0.5rem; font-size: 0.7rem; cursor: pointer; transition: background 0.15s; } .ag-code-copy:hover { background: #4b5563; color: #e2e8f0; } .ag-code .ag-hl-method { color: #4ade80; font-weight: 600; } .ag-code .ag-hl-url { color: #93c5fd; } .ag-code .ag-hl-header { color: #fb923c; } .ag-code .ag-hl-value { color: #86efac; } .ag-code .ag-hl-comment { color: #6b7280; } .ag-level-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; } .ag-field-table th { font-size: 0.8rem; font-weight: 600; } .ag-field-table td { font-size: 0.8rem; vertical-align: top; } .ag-field-table .font-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #347FFC; } /* Jetons de test : 1re colonne en pastille différenciante, jamais coupée. width:1% + nowrap = la colonne épouse son contenu, la description absorbe le reste de la largeur. */ .ag-field-table td.ag-token-cell { white-space: nowrap; width: 1%; } .ag-token-pill { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; color: #347FFC; background: rgba(52, 127, 252, 0.10); border: 1px solid rgba(52, 127, 252, 0.25); border-radius: 6px; padding: 0.15rem 0.5rem; white-space: nowrap; } .ag-field-table .text-type { color: #94a3b8; font-size: 0.72rem; } /* ============================================= Topbar — Badge contexte customer (entreprise + niveau) ============================================= */ .cl-provider-badge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; color: var(--bs-body-color); text-decoration: none; border: 1px solid #FFF; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .cl-provider-badge:hover { border-color: rgba(52, 127, 252, 0.2); color: var(--bs-body-color); } /* Adaptation dark mode : la bordure blanche par défaut devient transparente */ [data-bs-theme="dark"] .cl-provider-badge { border-color: transparent; } [data-bs-theme="dark"] .cl-provider-badge:hover { border-color: rgba(127, 178, 253, 0.35); } .cl-provider-label { font-weight: 600; font-size: 0.9rem; } /* Le badge level (id=nb_level_badge) est mis à jour dynamiquement par Profile.js qui réécrit className. On garde donc le style inline 0.65rem sur le HTML pour ne pas être écrasé. */ /* Responsive : sur très petit écran, label tronqué */ @media (max-width: 575.98px) { .cl-provider-badge { padding: 6px 10px; } .cl-provider-label { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; } } /* ============================================= Qualité des leads — barres 7 jours (dashboard) Barres empilées à hauteur CONSTANTE : ce graphique compare des PROPORTIONS, pas des volumes. Une hauteur variable aurait mélangé les deux questions (« combien de leads ? » et « quelle part est exploitable ? ») ; le volume est déjà porté par le graphique 30 jours juste au-dessus. Couleurs prises sur les variables du thème (--bs-success / --bs-danger), donc cohérentes avec les badges de verdict et suivant le mode sombre sans règle supplémentaire. ============================================= */ /* Rouge adouci : `--bs-danger` (#ff4c51) est calibré pour de petits aplats (badges, alertes). Sur des surfaces hautes de 190 px il sature l'œil et fait lire chaque journée comme une alarme, alors qu'une part « à écarter » est normale. Teinte désaturée, assez proche pour rester lue comme un rouge, et d'un poids visuel comparable au vert #28c76f d'en face. */ :root, [data-bs-theme="light"] { --ql-ko: #e57373; } [data-bs-theme="dark"] { --ql-ko: #e8837f; /* un peu plus clair : sur fond sombre, la même teinte s'éteint */ } .ql-chart { display: flex; align-items: flex-end; gap: 12px; width: 100%; } .ql-col { flex: 1 1 0; min-width: 0; /* autorise la compression sous 7 colonnes */ display: flex; flex-direction: column; align-items: stretch; } .ql-bar { height: 190px; /* Plafond de largeur : sur un grand écran, sept colonnes réparties sur toute la ligne donneraient des barres très larges, plus proches de panneaux que d'un graphique. La colonne garde sa part de la largeur, la barre est centrée dedans, et le libellé reste aligné avec elle. `width: 100%` est INDISPENSABLE ici : des marges horizontales `auto` désactivent l'étirement que `align-items: stretch` appliquait à la colonne. Sans largeur explicite, la barre retombe sur sa largeur de contenu — or ses segments sont en `width: 100%` de ce même parent : la barre mesurait 0 px et disparaissait purement et simplement. */ width: 100%; max-width: 120px; margin-inline: auto; display: flex; flex-direction: column; /* 1er enfant = haut de la barre */ /* Arrondi en haut seulement : la barre repose sur la ligne des libellés, un pied arrondi la ferait flotter au-dessus de sa base. */ border-radius: 8px 8px 0 0; overflow: hidden; /* les segments épousent les coins arrondis */ cursor: default; transition: transform .15s ease, box-shadow .15s ease; } .ql-bar:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); } .ql-seg { width: 100%; transition: height .35s ease; } .ql-seg-ko { background-color: var(--ql-ko); } .ql-seg-ok { background-color: var(--bs-success); } /* Journée sans aucun contrôle : ni bon ni mauvais — une barre neutre, muette, qui ne doit pas se lire comme « 100 % à écarter ». */ .ql-bar-empty { background-color: var(--bs-secondary-bg); border: 1px dashed var(--bs-border-color); } [data-bs-theme="dark"] .ql-bar-empty { background-color: rgba(255, 255, 255, .04); } .ql-label { margin-top: 10px; text-align: center; font-size: .75rem; line-height: 1.2; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ql-label-today { font-weight: 600; color: var(--bs-body-color); } /* Carrés de légende : mêmes teintes que les segments */ .ql-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; } .ql-swatch-ok { background-color: var(--bs-success); } .ql-swatch-ko { background-color: var(--ql-ko); } /* Sous 576 px, sept libellés « Lundi 23 » ne tiennent plus côte à côte : les barres et l'écart se resserrent, et le libellé est tronqué par l'ellipsis défini plus haut (le nom du jour reste lisible en début de chaîne). */ @media (max-width: 575.98px) { .ql-chart { gap: 6px; } .ql-bar { height: 150px; } .ql-label { font-size: .7rem; } } /* Popover des barres « qualité » : même habillage que les infobulles des autres graphiques du tableau de bord (ApexCharts, tel que surchargé par le thème), pour qu'un même geste — survoler une donnée — produise partout la même bulle. Valeurs reprises de .apexcharts-tooltip : fond `paper`, bordure de thème, rayon 5 px, ombre standard, et pas de flèche. */ .popover.ql-popover { background: var(--bs-paper-bg); border: 1px solid var(--bs-border-color); border-radius: 5px; box-shadow: var(--bs-box-shadow); color: var(--bs-heading-color); font-size: 14px; max-width: 220px; } .popover.ql-popover .popover-arrow { display: none; /* les infobulles des graphiques n'en ont pas */ } .popover.ql-popover .popover-body { padding: 0; /* l'espacement vient de .px-3.py-2 du contenu */ color: inherit; font-size: inherit; } /* ══════════════════════════════════════════════════════════════════════ Logo de l'en-tête du menu — une variante par thème Le menu suit le thème de l'application (attribut data-bs-theme sur ) : le logo sombre y disparaîtrait en mode nuit. Les deux fichiers sont donc dans la page et le CSS n'en montre qu'un — plutôt qu'un basculement en JavaScript, qui laisserait voir le mauvais logo le temps du premier rendu. ══════════════════════════════════════════════════════════════════════ */ .app-brand-logo-dark { display: none; } [data-bs-theme="dark"] .app-brand-logo-light { display: none; } [data-bs-theme="dark"] .app-brand-logo-dark { display: inline-block; } /* Menu replié : le thème masque le texte de marque, l'image doit suivre. */ .layout-menu-collapsed:not(.layout-menu-hover) .app-brand-logo-light, .layout-menu-collapsed:not(.layout-menu-hover) .app-brand-logo-dark { display: none; }