/* ═══════════════════════════════════════════════════════════════════════ * Formation Téléassistance — Design System (refonte UI 2026-05-21) * * Override layer ajouté EN PLUS de la CSS embarquée dans admin.html / * formation.html / index.html. Activé via une classe sur : * • body.theme-admin-dark → admin sombre pro (Linear / Vercel) * • body.theme-candidat → site candidat (déjà sombre, on densifie) * • body.theme-auth → page de connexion * * NB : aucune règle ne touche la logique métier (rebuilds JS / DOM). * Tout est purement visuel / layout. * ═══════════════════════════════════════════════════════════════════════ */ /* ─── 0. Reset minimal ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ─── 1. Variables globales (design tokens) ─────────────────────────── */ :root { /* Backgrounds (dark business) */ --ds-bg-base: #0F172A; --ds-bg-surface: #1E293B; --ds-bg-surface-2: #273548; --ds-bg-elevated: #2D3B52; /* Borders */ --ds-border-subtle: #334155; --ds-border-default: #475569; /* Text */ --ds-text-primary: #F1F5F9; --ds-text-secondary: #94A3B8; --ds-text-muted: #64748B; /* Accent unique : bleu pro sobre */ --ds-accent: #3B82F6; --ds-accent-hover: #2563EB; --ds-accent-soft: rgba(59, 130, 246, 0.12); --ds-accent-ring: rgba(59, 130, 246, 0.45); /* Semantic (discrets) */ --ds-success: #10B981; --ds-warning: #F59E0B; --ds-danger: #EF4444; --ds-info: #06B6D4; --ds-success-soft: rgba(16, 185, 129, 0.14); --ds-warning-soft: rgba(245, 158, 11, 0.14); --ds-danger-soft: rgba(239, 68, 68, 0.14); /* Spacing scale */ --ds-sp-1: 4px; --ds-sp-2: 8px; --ds-sp-3: 12px; --ds-sp-4: 16px; --ds-sp-5: 20px; --ds-sp-6: 24px; --ds-sp-8: 32px; --ds-sp-10: 40px; --ds-sp-12: 48px; /* Typo */ --ds-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ds-fs-xs: 12px; --ds-fs-sm: 13px; --ds-fs-base: 14px; --ds-fs-md: 16px; --ds-fs-lg: 20px; --ds-fs-xl: 24px; --ds-fs-2xl: 32px; /* Radius */ --ds-r-sm: 6px; --ds-r-md: 8px; --ds-r-lg: 12px; --ds-r-xl: 16px; /* Shadows */ --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.25); --ds-shadow-md: 0 4px 12px rgba(0,0,0,0.30); --ds-shadow-lg: 0 10px 28px rgba(0,0,0,0.40); /* Layout */ --ds-content-pad-x: 28px; --ds-grid-gap: 16px; } /* ─── 2. Inter sur toutes les pages avec design-system actif ────────── */ body.theme-admin-dark, body.theme-candidat, body.theme-auth { font-family: var(--ds-font-sans) !important; font-feature-settings: 'cv11', 'ss01', 'kern'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.theme-admin-dark *, body.theme-candidat *, body.theme-auth * { font-family: inherit; } /* ═══════════════════════════════════════════════════════════════════════ * 3. THÈME ADMIN — REFONTE DARK PRO * ═══════════════════════════════════════════════════════════════════════ */ body.theme-admin-dark { background: var(--ds-bg-base) !important; color: var(--ds-text-primary) !important; font-size: var(--ds-fs-base); line-height: 1.55; } /* — Sidebar : sombre uni, plus aucun dégradé cyan — */ body.theme-admin-dark #sidebar { background: var(--ds-bg-surface) !important; border-right: 1px solid var(--ds-border-subtle) !important; box-shadow: none !important; } body.theme-admin-dark .sidebar-logo { border-bottom: 1px solid var(--ds-border-subtle) !important; padding: 22px 20px 18px !important; } body.theme-admin-dark .sidebar-logo h1 { color: var(--ds-text-primary) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: -0.005em; text-shadow: none !important; } body.theme-admin-dark .sidebar-logo span { color: var(--ds-text-secondary) !important; font-weight: 500 !important; } body.theme-admin-dark .admin-badge { background: var(--ds-accent-soft) !important; color: var(--ds-accent) !important; border: 1px solid var(--ds-accent-ring) !important; font-size: 10px !important; font-weight: 600 !important; padding: 2px 9px !important; letter-spacing: 0.06em !important; } body.theme-admin-dark nav ul li a { color: var(--ds-text-secondary) !important; font-size: 13.5px !important; font-weight: 500 !important; padding: 9px 12px !important; border-radius: 7px !important; transition: background .15s, color .15s !important; border-left: none !important; box-shadow: none !important; backdrop-filter: none !important; } body.theme-admin-dark nav ul li a:hover { background: var(--ds-bg-surface-2) !important; color: var(--ds-text-primary) !important; } body.theme-admin-dark nav ul li a.active { background: var(--ds-accent-soft) !important; color: var(--ds-accent) !important; box-shadow: inset 2px 0 0 var(--ds-accent) !important; backdrop-filter: none !important; font-weight: 600 !important; } body.theme-admin-dark nav ul li a span[id^="cnt-"] { background: var(--ds-bg-elevated) !important; color: var(--ds-text-secondary) !important; border: 1px solid var(--ds-border-subtle) !important; font-weight: 600 !important; font-size: 11px !important; } body.theme-admin-dark nav ul li a.active span[id^="cnt-"] { background: var(--ds-accent) !important; color: #fff !important; border-color: var(--ds-accent) !important; } body.theme-admin-dark .nav-subnav { background: transparent !important; } body.theme-admin-dark .sidebar-footer { border-top: 1px solid var(--ds-border-subtle) !important; } body.theme-admin-dark .user-chip { background: var(--ds-bg-elevated) !important; border: 1px solid var(--ds-border-subtle) !important; backdrop-filter: none !important; } body.theme-admin-dark .user-chip * { color: var(--ds-text-primary) !important; } body.theme-admin-dark .avatar { background: var(--ds-accent) !important; color: #fff !important; } /* — Main content full-width — */ body.theme-admin-dark #main { background: var(--ds-bg-base) !important; padding: 24px var(--ds-content-pad-x) 56px !important; width: calc(100% - var(--sidebar-w, 240px)) !important; max-width: none !important; } body.theme-admin-dark .section { background: transparent !important; } body.theme-admin-dark .app-header { background: transparent !important; border-bottom: 1px solid var(--ds-border-subtle) !important; padding-bottom: 12px !important; margin-bottom: 18px !important; } body.theme-admin-dark .app-header-exit { background: transparent !important; color: var(--ds-text-secondary) !important; border: 1px solid var(--ds-border-subtle) !important; padding: 6px 12px !important; border-radius: var(--ds-r-md) !important; font-size: 13px !important; font-weight: 500 !important; } body.theme-admin-dark .app-header-exit:hover { background: var(--ds-bg-surface-2) !important; color: var(--ds-text-primary) !important; border-color: var(--ds-border-default) !important; } /* — Titres de page — */ body.theme-admin-dark .page-title { color: var(--ds-text-primary) !important; font-weight: 700 !important; font-size: 22px !important; letter-spacing: -0.015em !important; margin-bottom: 4px !important; } body.theme-admin-dark .page-sub, body.theme-admin-dark .page-subtitle { color: var(--ds-text-secondary) !important; font-size: 13.5px !important; } /* — Cards / table-wrap / dash-group — */ body.theme-admin-dark .table-wrap, body.theme-admin-dark .dash-group, body.theme-admin-dark .stat-card, body.theme-admin-dark .stat-hero, body.theme-admin-dark .insight-card, body.theme-admin-dark .challenge-widget, body.theme-admin-dark .funnel-wrap, body.theme-admin-dark .ct-blocage-item, body.theme-admin-dark .ct-module-card, body.theme-admin-dark .detail-box, body.theme-admin-dark .gen-pwd-box, body.theme-admin-dark .reset-pwd-box { background: var(--ds-bg-surface) !important; border: 1px solid var(--ds-border-subtle) !important; box-shadow: none !important; color: var(--ds-text-primary) !important; border-radius: var(--ds-r-lg) !important; } /* — KPI cards (stat-hero / stat-card) — pas de fonds pastel — */ body.theme-admin-dark .stat-hero, body.theme-admin-dark .stat-card { padding: 18px 18px !important; background: var(--ds-bg-surface) !important; border-left: 3px solid var(--ds-accent) !important; transition: background .15s, transform .15s !important; } body.theme-admin-dark .stat-hero:hover, body.theme-admin-dark .stat-card:hover { background: var(--ds-bg-surface-2) !important; transform: translateY(-1px); } body.theme-admin-dark .stat-hero.accent-green, body.theme-admin-dark .stat-card.accent-green { border-left-color: var(--ds-success) !important; background-image: none !important; } body.theme-admin-dark .stat-hero.accent-gold, body.theme-admin-dark .stat-card.accent-gold, body.theme-admin-dark .stat-card.accent-orange { border-left-color: var(--ds-warning) !important; background-image: none !important; } body.theme-admin-dark .stat-card.accent-rouge, body.theme-admin-dark .stat-card.accent-danger { border-left-color: var(--ds-danger) !important; background-image: none !important; } body.theme-admin-dark .stat-card.accent-violet { border-left-color: var(--ds-info) !important; background-image: none !important; } body.theme-admin-dark .stat-hero .num, body.theme-admin-dark .stat-card .num, body.theme-admin-dark .insight-num { color: var(--ds-text-primary) !important; font-weight: 700 !important; font-size: 28px !important; letter-spacing: -0.025em !important; } body.theme-admin-dark .stat-hero .lbl, body.theme-admin-dark .stat-card .lbl, body.theme-admin-dark .insight-lbl { color: var(--ds-text-secondary) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; text-transform: none !important; } /* — Grilles KPI : densification (6 par ligne sur >=1536, 4 par ligne sur >=1280) — */ body.theme-admin-dark .stats-grid, body.theme-admin-dark .stat-hero-grid { display: grid !important; gap: var(--ds-grid-gap) !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; } body.theme-admin-dark .insights-row { display: grid !important; gap: var(--ds-grid-gap) !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; align-items: stretch !important; } body.theme-admin-dark .insight-card { background: var(--ds-bg-surface) !important; border: 1px solid var(--ds-border-subtle) !important; padding: 16px 16px !important; display: flex; align-items: center; gap: 12px; } /* — Tableaux denses pro — */ body.theme-admin-dark table.data-table, body.theme-admin-dark table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: var(--ds-bg-surface) !important; font-size: 13px !important; color: var(--ds-text-primary) !important; } body.theme-admin-dark table.data-table thead th, body.theme-admin-dark table thead th { background: var(--ds-bg-surface-2) !important; color: var(--ds-text-secondary) !important; font-size: 11.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 11px 12px !important; border-bottom: 1px solid var(--ds-border-subtle) !important; text-align: left !important; } body.theme-admin-dark table.data-table th.sortable:hover { background: var(--ds-bg-elevated) !important; color: var(--ds-text-primary) !important; } body.theme-admin-dark table.data-table tbody td, body.theme-admin-dark table tbody td { padding: 10px 12px !important; border-bottom: 1px solid var(--ds-border-subtle) !important; color: var(--ds-text-primary) !important; background: transparent !important; } body.theme-admin-dark table.data-table tbody tr:nth-child(even) { background: rgba(39, 53, 72, 0.5) !important; } body.theme-admin-dark table.data-table tbody tr:hover { background: var(--ds-accent-soft) !important; } /* — Inputs — */ body.theme-admin-dark .search-input, body.theme-admin-dark input[type="text"], body.theme-admin-dark input[type="email"], body.theme-admin-dark input[type="url"], body.theme-admin-dark input[type="date"], body.theme-admin-dark input[type="search"], body.theme-admin-dark textarea, body.theme-admin-dark select { background: var(--ds-bg-elevated) !important; border: 1px solid var(--ds-border-subtle) !important; color: var(--ds-text-primary) !important; border-radius: var(--ds-r-md) !important; font-size: 13.5px !important; padding: 8px 12px !important; transition: border-color .12s, box-shadow .12s !important; } body.theme-admin-dark .search-input:focus, body.theme-admin-dark input:focus, body.theme-admin-dark textarea:focus, body.theme-admin-dark select:focus { outline: none !important; border-color: var(--ds-accent) !important; box-shadow: 0 0 0 3px var(--ds-accent-ring) !important; } body.theme-admin-dark input::placeholder, body.theme-admin-dark textarea::placeholder { color: var(--ds-text-muted) !important; } /* — Boutons — */ body.theme-admin-dark .refresh-btn, body.theme-admin-dark .btn-gen-pwd, body.theme-admin-dark button[type="submit"]:not(.app-header-exit) { background: var(--ds-accent) !important; color: #fff !important; border: 1px solid var(--ds-accent) !important; border-radius: var(--ds-r-md) !important; padding: 8px 14px !important; font-weight: 600 !important; font-size: 13px !important; box-shadow: none !important; transition: background .15s !important; cursor: pointer; } body.theme-admin-dark .refresh-btn:hover, body.theme-admin-dark .btn-gen-pwd:hover { background: var(--ds-accent-hover) !important; border-color: var(--ds-accent-hover) !important; transform: none !important; } body.theme-admin-dark .gen-pwd-cancel { background: transparent !important; border: 1px solid var(--ds-border-default) !important; color: var(--ds-text-secondary) !important; } body.theme-admin-dark .gen-pwd-cancel:hover { background: var(--ds-bg-surface-2) !important; color: var(--ds-text-primary) !important; } /* — Contenu pédagogique : onglets — */ body.theme-admin-dark .ct-tab { background: var(--ds-bg-surface) !important; color: var(--ds-text-secondary) !important; border: 1px solid var(--ds-border-subtle) !important; } body.theme-admin-dark .ct-tab:hover { background: var(--ds-bg-surface-2) !important; color: var(--ds-text-primary) !important; border-color: var(--ds-border-default) !important; } body.theme-admin-dark .ct-tab.active { background: var(--ds-accent) !important; border-color: var(--ds-accent) !important; color: #fff !important; box-shadow: none !important; } body.theme-admin-dark .ct-blocage-item .ct-num { background: var(--ds-accent-soft) !important; color: var(--ds-accent) !important; } body.theme-admin-dark #ct-video-current { background: var(--ds-bg-surface-2) !important; color: var(--ds-text-secondary) !important; } body.theme-admin-dark #ct-comparatif-table thead th { background: var(--ds-bg-surface-2) !important; color: var(--ds-text-secondary) !important; border-bottom: 1px solid var(--ds-border-subtle) !important; } /* — Badges / status pills — */ body.theme-admin-dark .badge, body.theme-admin-dark .count-badge { background: var(--ds-bg-elevated) !important; color: var(--ds-text-secondary) !important; border: 1px solid var(--ds-border-subtle) !important; border-radius: 99px !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 9px !important; } /* — Toast — */ body.theme-admin-dark #toast { background: var(--ds-bg-elevated) !important; border: 1px solid var(--ds-border-default) !important; color: var(--ds-text-primary) !important; box-shadow: var(--ds-shadow-lg) !important; } /* — Dégradés tueurs : on les neutralise sur toute la zone admin — */ body.theme-admin-dark #loading-screen { background: var(--ds-bg-base) !important; } /* — Modales sombres — */ body.theme-admin-dark #detail-modal, body.theme-admin-dark #gen-pwd-modal, body.theme-admin-dark #reset-pwd-modal { background: rgba(0, 0, 0, 0.65) !important; } body.theme-admin-dark .detail-box, body.theme-admin-dark .gen-pwd-box, body.theme-admin-dark .reset-pwd-box { background: var(--ds-bg-surface) !important; border: 1px solid var(--ds-border-subtle) !important; box-shadow: var(--ds-shadow-lg) !important; } body.theme-admin-dark .detail-top { border-bottom: 1px solid var(--ds-border-subtle) !important; } body.theme-admin-dark .detail-top h2, body.theme-admin-dark .gen-pwd-title, body.theme-admin-dark .reset-pwd-title { color: var(--ds-text-primary) !important; } body.theme-admin-dark .gen-pwd-explain, body.theme-admin-dark .reset-pwd-explain { color: var(--ds-text-secondary) !important; } body.theme-admin-dark .gen-pwd-target, body.theme-admin-dark .reset-pwd-target { background: var(--ds-bg-surface-2) !important; border: 1px solid var(--ds-border-subtle) !important; } body.theme-admin-dark .gen-pwd-result-value { background: var(--ds-bg-base) !important; color: var(--ds-text-primary) !important; border: 1px solid var(--ds-accent) !important; font-family: var(--ds-font-mono) !important; } body.theme-admin-dark .gen-pwd-warning { background: var(--ds-warning-soft) !important; border: 1px solid var(--ds-warning) !important; color: var(--ds-warning) !important; } /* — Empty states — */ body.theme-admin-dark .empty-state { color: var(--ds-text-muted) !important; background: transparent !important; } body.theme-admin-dark .empty-state .empty-icon { opacity: 0.6; } /* — Challenge widget : neutralisation des dégradés — */ body.theme-admin-dark .challenge-widget { background: var(--ds-bg-surface) !important; border: 1px solid var(--ds-border-subtle) !important; color: var(--ds-text-primary) !important; } body.theme-admin-dark .challenge-widget * { background-image: none !important; } body.theme-admin-dark .challenge-bar-wrap { background: var(--ds-bg-elevated) !important; } body.theme-admin-dark .challenge-bar-fill { background: var(--ds-accent) !important; } body.theme-admin-dark .challenge-big-num { color: var(--ds-accent) !important; } body.theme-admin-dark .challenge-msg { color: var(--ds-text-secondary) !important; } body.theme-admin-dark .challenge-badge { background: var(--ds-bg-elevated) !important; border: 1px solid var(--ds-border-subtle) !important; color: var(--ds-text-secondary) !important; } /* — dash-group-title — */ body.theme-admin-dark .dash-group { padding: 16px 18px 12px !important; margin-bottom: var(--ds-grid-gap) !important; } body.theme-admin-dark .dash-group-title { color: var(--ds-text-secondary) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 10px !important; } /* — Table-header (titre interne aux blocs) — */ body.theme-admin-dark .table-header { background: transparent !important; border-bottom: 1px solid var(--ds-border-subtle) !important; padding: 12px 16px !important; } body.theme-admin-dark .table-header h3 { color: var(--ds-text-primary) !important; font-size: 15px !important; font-weight: 600 !important; } /* — Photos avatar — */ body.theme-admin-dark .user-avatar { background: var(--ds-accent) !important; color: #fff !important; font-weight: 600 !important; } /* — Commentaires — */ body.theme-admin-dark .comment-agent { color: var(--ds-accent) !important; } /* — Lignes alternées légères en fallback — */ body.theme-admin-dark .data-table tbody tr { border-bottom: 1px solid var(--ds-border-subtle) !important; } /* — Full-width plus large que sidebar — */ @media (min-width: 1280px) { body.theme-admin-dark .stats-grid { grid-template-columns: repeat(4, 1fr) !important; } body.theme-admin-dark .stat-hero-grid { grid-template-columns: repeat(3, 1fr) !important; } body.theme-admin-dark .insights-row { grid-template-columns: repeat(5, 1fr) !important; } } @media (min-width: 1536px) { body.theme-admin-dark .stats-grid { grid-template-columns: repeat(6, 1fr) !important; } body.theme-admin-dark .insights-row { grid-template-columns: repeat(5, 1fr) !important; } body.theme-admin-dark #main { padding-left: 36px !important; padding-right: 36px !important; } } /* ═══════════════════════════════════════════════════════════════════════ * 4. SITE CANDIDAT — Densification + panneau contextuel droit * ═══════════════════════════════════════════════════════════════════════ */ /* — Désactiver la max-width 1600px qui bloque l'expansion — */ body.theme-candidat .section { max-width: none !important; width: 100% !important; } /* — Padding réduit pour exploiter plus d'espace — */ @media (min-width: 1280px) { body.theme-candidat #main { padding: 28px 32px !important; } } @media (min-width: 1536px) { body.theme-candidat #main { padding: 28px 44px !important; } } /* — Layout 3 colonnes : contenu central + aside droit (desktop large) — */ body.theme-candidat .ds-with-aside { display: grid !important; grid-template-columns: 1fr 320px !important; gap: 24px !important; align-items: start !important; } @media (max-width: 1279px) { body.theme-candidat .ds-with-aside { grid-template-columns: 1fr !important; } body.theme-candidat .ds-aside { display: none !important; } } /* — Aside : sticky compagnon — */ body.theme-candidat .ds-aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; } body.theme-candidat .ds-aside .ds-aside-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: var(--ds-r-lg); padding: 16px 16px; } body.theme-candidat .ds-aside .ds-aside-title { font-size: 11px; color: rgba(148, 163, 184, 0.9); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 10px; } body.theme-candidat .ds-aside .ds-aside-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: rgba(241, 245, 249, 0.92); } body.theme-candidat .ds-aside .ds-aside-row strong { color: #fff; font-weight: 600; } body.theme-candidat .ds-aside .ds-aside-progress { height: 6px; background: rgba(148, 163, 184, 0.2); border-radius: 99px; overflow: hidden; margin: 8px 0 4px; } body.theme-candidat .ds-aside .ds-aside-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ds-accent), var(--ds-info)); border-radius: 99px; } body.theme-candidat .ds-aside ul { list-style: none; padding: 0; margin: 0; } body.theme-candidat .ds-aside li { font-size: 13px; color: rgba(241, 245, 249, 0.85); padding: 6px 0; border-bottom: 1px dashed rgba(148, 163, 184, 0.15); } body.theme-candidat .ds-aside li:last-child { border-bottom: 0; } body.theme-candidat .ds-aside .ds-aside-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--ds-accent-soft); color: var(--ds-accent); border: 1px solid var(--ds-accent); border-radius: var(--ds-r-md); font-size: 12.5px; font-weight: 600; text-decoration: none; margin-top: 8px; } /* — Tableaux candidat (rare) — */ body.theme-candidat table { width: 100% !important; } /* ═══════════════════════════════════════════════════════════════════════ * 5. PAGE AUTH (index.html) — typographie + dark * ═══════════════════════════════════════════════════════════════════════ */ body.theme-auth #how-to-connect-video { background: rgba(2, 132, 199, 0.05) !important; border: 1px solid rgba(2, 132, 199, 0.22) !important; border-radius: var(--ds-r-lg) !important; } /* ═══════════════════════════════════════════════════════════════════════ * 6. UTILITIES (utilisables depuis n'importe quelle page) * ═══════════════════════════════════════════════════════════════════════ */ .ds-grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ds-grid-gap); } .ds-full-bleed { margin-left: calc(-1 * var(--ds-content-pad-x)); margin-right: calc(-1 * var(--ds-content-pad-x)); } .ds-text-muted { color: var(--ds-text-secondary); } .ds-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; background: var(--ds-bg-elevated); border: 1px solid var(--ds-border-subtle); border-radius: 99px; font-size: 11.5px; color: var(--ds-text-secondary); font-weight: 600; } .ds-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ds-pill.success { color: var(--ds-success); } .ds-pill.warning { color: var(--ds-warning); } .ds-pill.danger { color: var(--ds-danger); } /* ═══════════════════════════════════════════════════════════════════════ * 7. Scrollbar discret (admin et candidat) * ═══════════════════════════════════════════════════════════════════════ */ body.theme-admin-dark *::-webkit-scrollbar { width: 9px; height: 9px; } body.theme-admin-dark *::-webkit-scrollbar-track { background: var(--ds-bg-base); } body.theme-admin-dark *::-webkit-scrollbar-thumb { background: var(--ds-border-subtle); border-radius: 99px; } body.theme-admin-dark *::-webkit-scrollbar-thumb:hover { background: var(--ds-border-default); }