/* ========================================================== CAP PILOT — Custom styles on top of Bootstrap 5 DA inspirée de la carte de visite : palette champagne / noir profond / fond crème, motifs hexagonaux line-art. ========================================================== */ /* Thèmes alternatifs (opt-in via classe sur ) */ @import "themes/cap-noir-gSoout2.css"; :root { --cap-sidebar-w: 256px; --cap-topbar-h: 64px; --cap-primary: #1a1a1a; --cap-primary-rgb: 26, 26, 26; --cap-primary-dark: #000000; --cap-accent: #eab98a; --cap-accent-rgb: 234, 185, 138; --cap-accent-dark: #d4a574; --cap-accent-soft: #f5dcc0; --cap-bg: #fafaf7; --cap-card-border: #ece9e0; --cap-text-secondary: #6b7280; } /* ── Bootstrap variable overrides ── */ [data-bs-theme="light"], :root { --bs-primary: var(--cap-primary); --bs-primary-rgb: var(--cap-primary-rgb); --bs-link-color: var(--cap-primary); --bs-link-hover-color: var(--cap-primary-dark); --bs-body-bg: var(--cap-bg); --bs-body-color: #1a1a1a; --bs-body-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --bs-body-font-size: 0.875rem; --bs-border-color: var(--cap-card-border); --bs-border-radius: 0.625rem; } body { -webkit-font-smoothing: antialiased; } .btn-primary { --bs-btn-bg: var(--cap-primary); --bs-btn-border-color: var(--cap-primary); --bs-btn-hover-bg: var(--cap-primary-dark); --bs-btn-hover-border-color: var(--cap-primary-dark); --bs-btn-active-bg: var(--cap-primary-dark); --bs-btn-active-border-color: var(--cap-primary-dark); --bs-btn-disabled-bg: var(--cap-primary); --bs-btn-disabled-border-color: var(--cap-primary); } .text-primary { color: var(--cap-primary) !important; } /* ========================================================== LAYOUT — Wrapper, Sidebar, Main, Topbar ========================================================== */ .cap-wrapper { display: flex; min-height: 100vh; } /* ── Sidebar ── */ .cap-sidebar { width: var(--cap-sidebar-w); position: fixed; inset: 0 auto 0 0; background: linear-gradient(180deg, var(--cap-primary) 0%, var(--cap-primary-dark) 100%); display: flex; flex-direction: column; overflow-y: auto; z-index: 1030; box-shadow: 4px 0 12px rgba(0,0,0,.04); } .cap-sidebar .sidebar-brand { padding: 20px 20px 18px; display: flex; align-items: center; gap: 12px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .cap-sidebar .sidebar-brand { flex-direction: column; align-items: stretch; gap: 8px; padding: 18px 18px 16px; } .cap-sidebar .sidebar-brand-logo { display: block; width: 100%; max-width: 180px; height: auto; object-fit: contain; margin: 0 auto; } .cap-sidebar .sidebar-brand-tag { color: var(--cap-accent); font-size: 10px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; text-align: center; padding-top: 4px; border-top: 1px solid rgba(234,185,138,0.18); } /* Legacy / fallback (compact brand) — kept for safety */ .cap-sidebar .brand-mark { width: 42px; height: 42px; color: var(--cap-accent); flex-shrink: 0; } .cap-sidebar .brand-mark svg { width: 100%; height: 100%; display: block; } .cap-sidebar .brand-name { color: #fff; font-size: 14px; font-weight: 800; line-height: 1.15; letter-spacing: 0.6px; } .cap-sidebar .brand-sub { color: var(--cap-accent); font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; } .cap-sidebar .nav-section-label { padding: 18px 22px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(255,255,255,.32); } .cap-sidebar .nav-link { display: flex; align-items: center; gap: 12px; margin: 1px 10px; padding: 10px 14px; border-radius: 8px; color: rgba(255,255,255,.7); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; position: relative; } .cap-sidebar .nav-link i { font-size: 17px; width: 20px; text-align: center; line-height: 1; } .cap-sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.95); } .cap-sidebar .nav-link.active { background: rgba(255,255,255,.13); color: #fff; font-weight: 600; } .cap-sidebar .nav-link.active::before { content: ''; position: absolute; left: -10px; top: 22%; bottom: 22%; width: 3px; background: var(--cap-accent); border-radius: 0 3px 3px 0; } .cap-sidebar .nav-link .badge-mini { margin-left: auto; background: rgba(var(--cap-accent-rgb), .85); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; line-height: 1.2; } .cap-sidebar .sidebar-user { margin-top: auto; padding: 14px 12px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .cap-sidebar .user-link { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; text-decoration: none; transition: background .15s; } .cap-sidebar .user-link:hover { background: rgba(255,255,255,.07); } .cap-sidebar .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--cap-accent) 0%, var(--cap-accent-dark) 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12.5px; flex-shrink: 0; } .cap-sidebar .user-name { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; } .cap-sidebar .user-meta { color: rgba(255,255,255,.45); font-size: 11px; line-height: 1.3; } /* ── Main ── */ .cap-main { margin-left: var(--cap-sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } /* ── Topbar ── */ .cap-topbar { height: var(--cap-topbar-h); background: #fff; border-bottom: 1px solid var(--cap-card-border); box-shadow: none; position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; padding: 0 28px; gap: 14px; flex-shrink: 0; /* Signature DA : motif hexagonal champagne en filigrane à l'extrême droite */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 64' fill='none'%3E%3Cpolygon points='170,8 188,18 188,46 170,56 152,46 152,18' stroke='%23eab98a' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right -20px center; background-size: 200px 64px; } .cap-topbar .page-title { font-size: 17px; font-weight: 700; margin: 0; flex: 1; color: #1a1a1a; padding-left: 12px; border-left: 2px solid var(--cap-accent); } .cap-topbar .topbar-search { position: relative; width: 280px; max-width: 100%; } .cap-topbar .topbar-search i { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: #9ca3af; font-size: 14px; pointer-events: none; } .cap-topbar .topbar-search input { height: 36px; padding-left: 34px; background: #f9fafb; border-color: #e5e7eb; font-size: 13px; } .cap-topbar .topbar-search input:focus { background: #fff; border-color: var(--cap-primary); box-shadow: 0 0 0 3px rgba(var(--cap-primary-rgb), .1); } .cap-topbar .topbar-icon-btn { width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: #4b5563; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; position: relative; cursor: pointer; font-size: 16px; } .cap-topbar .topbar-icon-btn:hover { background: #f3f4f6; border-color: #e5e7eb; } .cap-topbar .topbar-icon-btn .dot-notif { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; background: #dc3545; border: 2px solid #fff; border-radius: 50%; } .topbar-avatar-circle { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: linear-gradient(135deg, var(--cap-primary) 0%, var(--cap-primary-dark) 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; border: 0; padding: 0; } /* Chip utilisateur en haut à droite : avatar + nom + rôle. Pour l'admin, c'est le déclencheur du menu de bascule en mode démo (audit Julien 2026-07-16). Remplace l'ancien badge « ADMINISTRATEUR » criard. */ .topbar-user-chip { display: flex; align-items: center; gap: 9px; padding: 3px 8px 3px 3px; border-radius: 999px; background: transparent; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; max-width: 220px; } .topbar-user-chip:hover, .topbar-user-chip[aria-expanded="true"] { background: #f3f4f6; border-color: #e5e7eb; } .topbar-user-chip--static { cursor: default; } .topbar-user-chip--static:hover { background: transparent; border-color: transparent; } .topbar-user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; text-align: left; } .topbar-user-name { font-size: 12.5px; font-weight: 600; color: #1f2937; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-user-role { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; } .topbar-user-role::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; } .topbar-user-role[data-role="admin"]::before { background: var(--cap-primary); } .topbar-user-role[data-role="collab"]::before { background: #10b981; } .topbar-user-role[data-role="client"]::before { background: #f59e0b; } .topbar-user-caret { font-size: 10px; color: #9ca3af; transition: transform .15s; } .topbar-user-chip[aria-expanded="true"] .topbar-user-caret { transform: rotate(180deg); } /* Sur écran étroit : on ne garde que l'avatar pour ne pas encombrer. */ @media (max-width: 1100px) { .topbar-user-meta, .topbar-user-caret { display: none; } .topbar-user-chip { max-width: none; padding: 3px; gap: 0; } } /* ── Page content ── */ .page { padding: 28px; } /* ========================================================== CARDS & KPI ========================================================== */ .card { border: 1px solid var(--cap-card-border); border-radius: 12px; box-shadow: none; background: #ffffff; } .card-header { background: transparent; border-bottom: 1px solid var(--cap-card-border); padding: 18px 24px; } .card-body { padding: 22px 24px; } .section-title { font-size: 16px; font-weight: 800; margin: 0; color: #1a1a1a; letter-spacing: -0.1px; } .section-sub { font-size: 12.5px; color: var(--cap-text-secondary); margin: 2px 0 0; } /* Page heading (h2.fw-bold dans les vues) */ .cap-wrapper h2.fw-bold, .cap-page-title { font-size: 28px !important; font-weight: 800; color: #1a1a1a; letter-spacing: -0.5px; line-height: 1.2; } /* ========================================================== SIGNATURE DA — barre verticale champagne + motifs hexagonaux (DA carte de visite Julien 2026-05-27) ========================================================== */ /* Barre verticale champagne — séparateur de bloc info (style carte de visite) */ .cap-accent-bar { border-left: 2px solid var(--cap-accent); padding-left: 16px; } .cap-accent-bar-faded { border-left: 2px solid rgba(var(--cap-accent-rgb), 0.4); padding-left: 16px; } /* Motifs hexagonaux décoratifs en line-art champagne Usage :

dans un container relative */ .cap-hex-deco { position: absolute; width: 140px; height: 140px; pointer-events: none; opacity: 0.55; background-repeat: no-repeat; background-size: contain; } .cap-hex-deco-top-right { top: -22px; right: -22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none'%3E%3Cpolygon points='100,10 130,30 130,72 100,92 70,72 70,30' stroke='%23eab98a' stroke-width='1.4'/%3E%3Cpath d='M 70 30 L 70 72' stroke='%23eab98a' stroke-width='1.4'/%3E%3C/svg%3E"); } .cap-hex-deco-bottom-right { bottom: -22px; right: -22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none'%3E%3Cpolygon points='100,48 130,68 130,110 100,130 70,110 70,68' stroke='%23eab98a' stroke-width='1.4'/%3E%3C/svg%3E"); } /* Wrapper relatif pour pouvoir poser le motif décoratif */ .cap-page-with-deco { position: relative; overflow: hidden; } /* ========================================================== OUTILS / SIMULATEURS — onglets + grilles + résultats ========================================================== */ .outils-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 22px; border-bottom: 1px solid var(--cap-card-border); } .outils-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; color: var(--cap-text-secondary); text-decoration: none; font-size: 13.5px; font-weight: 600; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .outils-tab i { font-size: 14px; } .outils-tab:hover { color: var(--cap-primary); } .outils-tab.is-active { color: var(--cap-primary); border-bottom-color: var(--cap-accent); } /* Saisie d'un simulateur — grille à 2 colonnes responsive */ .sim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; } @media (max-width: 640px) { .sim-grid { grid-template-columns: 1fr; } } .sim-field { display: flex; flex-direction: column; gap: 4px; } .sim-label { font-size: 12px; font-weight: 600; color: var(--cap-text-secondary); text-transform: uppercase; letter-spacing: 0.4px; } .sim-input-wrap { display: inline-flex; align-items: stretch; border: 1px solid var(--cap-card-border); border-radius: 8px; overflow: hidden; background: #fff; transition: border-color .15s; } .sim-input-wrap:focus-within { border-color: var(--cap-accent); box-shadow: 0 0 0 3px rgba(var(--cap-accent-rgb), .15); } .sim-input-wrap input { flex: 1; border: 0; padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--cap-primary); background: transparent; min-width: 0; outline: none; } .sim-input-wrap input[type=text] { font-weight: 500; } .sim-unit { padding: 9px 12px; font-size: 12px; color: var(--cap-text-secondary); background: #fafaf7; border-left: 1px solid var(--cap-card-border); display: inline-flex; align-items: center; white-space: nowrap; } .sim-derived { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 10px 14px; background: var(--cap-accent-soft); border-left: 3px solid var(--cap-accent); border-radius: 0 8px 8px 0; font-size: 13px; } .sim-derived span { color: var(--cap-text-secondary); font-weight: 600; } .sim-derived strong { color: var(--cap-primary); font-size: 15px; font-weight: 800; } .sim-derived small { font-size: 11px; } /* Carte résultats à droite */ .sim-result-card { border: 1px solid var(--cap-card-border); } .sim-result-hero { text-align: center; padding: 4px 0 6px; } .sim-result-hero .sim-result-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cap-accent-dark); margin-bottom: 8px; } .sim-result-hero .sim-result-value { display: block; font-size: 38px; font-weight: 800; color: var(--cap-primary); line-height: 1; letter-spacing: -1px; } .sim-result-hero .sim-result-sub { display: block; margin-top: 6px; font-size: 12px; color: var(--cap-text-secondary); } .sim-result-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; } .sim-result-row span { color: var(--cap-text-secondary); } .sim-result-row strong { color: var(--cap-primary); font-weight: 700; } .sim-result-table tbody td { font-size: 13px; padding: 7px 10px; } .sim-result-table tbody tr.table-active td { background: var(--cap-accent-soft); } .sim-result-table tbody tr.table-active td strong { color: var(--cap-primary); } /* Historique repliable — bouton header style cardheader + chevron pivotant */ .renta-history-toggle { border: 0; background: transparent; text-align: left; cursor: pointer; transition: background .15s; } .renta-history-toggle:hover { background: #fafaf7; } .renta-history-toggle:focus { outline: none; box-shadow: none; } .renta-history-chevron { transition: transform .22s ease; color: var(--cap-text-secondary); font-size: 14px; } .renta-history-toggle[aria-expanded="true"] .renta-history-chevron { transform: rotate(180deg); } /* KPI cards */ .kpi-card { border-top: 3px solid var(--cap-accent); transition: transform .15s, box-shadow .15s; } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); } .kpi-card .kpi-icon { width: 44px; height: 44px; border-radius: 11px; background: rgba(var(--cap-accent-rgb), .12); color: var(--cap-accent-dark); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .kpi-card .kpi-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; } .kpi-card .kpi-value { font-size: 28px; font-weight: 800; color: #111827; line-height: 1.1; margin: 6px 0 8px; } .kpi-card .kpi-trend { font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; } .kpi-card .kpi-trend.up { background: #d1fae5; color: #065f46; } .kpi-card .kpi-trend.down { background: #fee2e2; color: #991b1b; } .kpi-card .kpi-trend.neu { background: #f3f4f6; color: #4b5563; } /* ========================================================== PILIERS ========================================================== */ .pilier-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f3f4f6; } .pilier-row:last-child { border-bottom: none; } .pilier-score { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12.5px; flex-shrink: 0; } .pilier-name { font-size: 13px; font-weight: 600; color: #111827; } /* ========================================================== TABLE ========================================================== */ .table { margin: 0; } .table > :not(caption) > * > * { padding: 13px 22px; } .table thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb; white-space: nowrap; } .table tbody td { font-size: 13.5px; vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } /* ========================================================== LOGIN ========================================================== */ .login-page { min-height: 100vh; display: flex; } .login-left { background: linear-gradient(160deg, var(--cap-primary) 0%, var(--cap-primary-dark) 100%); position: relative; overflow: hidden; flex-direction: column; justify-content: center; padding: 56px; } .login-left::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(var(--cap-accent-rgb), .18) 0%, transparent 55%), radial-gradient(circle at 80% 20%, rgba(59, 130, 246, .12) 0%, transparent 55%); pointer-events: none; } .login-left .login-content { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; } .login-brand-logo { display: block; width: 220px; max-width: 100%; height: auto; margin-bottom: 28px; filter: drop-shadow(0 0 24px rgba(var(--cap-accent-rgb), .25)); } .login-welcome { font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--cap-accent); margin-bottom: 14px; } .login-headline { color: #fff; font-size: 27px; font-weight: 800; line-height: 1.25; margin-bottom: 12px; /* « Donnez une trajectoire claire » doit tenir sur une seule ligne (le saut de ligne voulu est le
avant « à votre entreprise »). */ white-space: nowrap; } .login-headline em { color: var(--cap-accent); font-style: normal; } .login-desc { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.65; margin-bottom: 24px; text-align: justify; } /* « Cap Pilot » reprend exactement la couleur de « trajectoire claire » (.login-headline em) : accent par défaut, primary en thème noir. */ .login-brand-accent { color: var(--cap-accent); font-weight: 700; font-style: normal; } .login-tagline { list-style: none; padding: 0; margin: 0 0 28px 0; } .login-tagline li { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.5; padding-left: 22px; position: relative; } .login-tagline li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 12px; height: 2px; background: var(--cap-accent); border-radius: 2px; } .feature-item { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.78); font-size: 13.5px; margin-bottom: 14px; } .feature-item:last-child { margin-bottom: 0; } .feature-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; color: var(--cap-accent); font-size: 17px; flex-shrink: 0; } .login-right { background: #fff; display: flex; align-items: center; justify-content: center; padding: 48px 40px; } .login-right .login-form-wrap { width: 100%; max-width: 420px; } .login-form-wrap h1 { font-size: 26px; font-weight: 800; margin-bottom: 6px; color: #111827; } .demo-account-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; margin-bottom: 8px; background: #f9fafb; border: 1.5px solid #e5e7eb; border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; font-family: inherit; } .demo-account-btn:last-child { margin-bottom: 0; } .demo-account-btn:hover { background: #eff6ff; border-color: var(--cap-primary); } .demo-account-btn:active { transform: scale(.99); } .demo-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; flex-shrink: 0; } .demo-icon.admin { background: linear-gradient(135deg, var(--cap-primary), #404040); } .demo-icon.collab { background: linear-gradient(135deg, #198754, #20c997); } .demo-icon.client { background: linear-gradient(135deg, #fd7e14, #ffc107); } .demo-role { font-size: 13px; font-weight: 700; color: #111827; line-height: 1.2; } .demo-mail { font-size: 11.5px; color: #6b7280; line-height: 1.3; margin-top: 1px; } /* ========================================================== SELECTS — style global CAP ========================================================== */ .form-select { background-color: #fff; border: 1px solid #e5e7eb; border-radius: 8px; font-family: inherit; font-size: 13px; color: #1f2937; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231e3a5f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .15s, box-shadow .15s, background-color .15s; cursor: pointer; appearance: none; -webkit-appearance: none; } .form-select:not(:disabled):hover { border-color: #9ca3af; background-color: #fafbfc; } .form-select:focus { border-color: var(--cap-primary); box-shadow: 0 0 0 3px rgba(var(--cap-primary-rgb), .10); background-color: #fff; outline: none; } .form-select:disabled { background-color: #f9fafb; color: #9ca3af; cursor: not-allowed; } .form-select-sm { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; border-radius: 8px; } /* ========================================================== PAGES D'ERREUR (404 / 403 / 500) ========================================================== */ .error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 20% 80%, rgba(var(--cap-accent-rgb), .07) 0%, transparent 55%), radial-gradient(circle at 80% 20%, rgba(var(--cap-primary-rgb), .07) 0%, transparent 55%), var(--cap-bg); } .error-card { width: 100%; max-width: 500px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); padding: 48px 40px; text-align: center; } .error-mark { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, var(--cap-primary), var(--cap-primary-dark)); color: #fff; font-size: 32px; margin: 0 auto 20px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(var(--cap-primary-rgb), .25); } .error-code { font-size: 13px; font-weight: 700; letter-spacing: 4px; color: var(--cap-accent); text-transform: uppercase; margin-bottom: 8px; } .error-title { font-size: 26px; font-weight: 800; color: #111827; margin: 0 0 12px; line-height: 1.2; } .error-desc { color: #6b7280; font-size: 14px; line-height: 1.6; margin-bottom: 28px; } .error-actions { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; } /* ========================================================== EMPTY STATES ========================================================== */ .cap-empty { text-align: center; padding: 48px 24px; color: #6b7280; } .cap-empty-icon { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, rgba(var(--cap-primary-rgb), .08), rgba(var(--cap-primary-rgb), .03)); display: inline-flex; align-items: center; justify-content: center; color: var(--cap-primary); font-size: 30px; margin-bottom: 16px; } .cap-empty-title { font-size: 16px; font-weight: 700; color: #1f2937; margin: 0 0 6px; } .cap-empty-desc { font-size: 13px; color: #6b7280; line-height: 1.55; max-width: 380px; margin: 0 auto 16px; } /* ========================================================== RESPONSIVE ========================================================== Audit Julien 2026-07-16 : « même visu quel que soit le zoom tant qu'on est sur PC ». Le zoom navigateur réduit la largeur effective du viewport et déclenchait la vue mobile (sidebar escamotée, layout remanié). Le mode mobile est donc réservé aux écrans TACTILES (pointer: coarse) ; sur desktop, le layout garde sa forme et scrolle horizontalement si le zoom est très fort. */ @media (max-width: 991.98px) and (pointer: coarse) { .cap-sidebar { transform: translateX(-100%); transition: transform .25s; } .cap-sidebar.show { transform: translateX(0); } .cap-main { margin-left: 0; } } @media (max-width: 991.98px) { .login-left { display: none !important; } .cap-topbar .topbar-search { display: none; } } @media (pointer: fine) { /* Largeur plancher du layout desktop : au-delà, scroll horizontal plutôt que réorganisation des blocs. Le burger mobile n'a pas de raison d'apparaître sur PC. */ body { min-width: 1240px; } .cap-topbar > .topbar-icon-btn.d-lg-none { display: none !important; } } /* ========================================================== TOM SELECT — design CAP ========================================================== */ /* Le contrôle principal (état fermé) — affiche l'item sélectionné + chevron */ .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control { min-height: 38px !important; padding: 7px 36px 7px 14px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; color: #1f2937 !important; font-size: 13.5px !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; transition: border-color .15s, box-shadow .15s, background-color .15s !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px; cursor: pointer; } .ts-wrapper.single .ts-control > .item { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-wrapper.single .ts-control:hover, .ts-wrapper.multi .ts-control:hover { border-color: #9ca3af !important; background-color: #fafbfc !important; } .ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control { border-color: var(--cap-primary) !important; background-color: #fff !important; box-shadow: 0 0 0 3px rgba(var(--cap-primary-rgb), .12) !important; } /* Chevron qui pivote quand le dropdown est ouvert (effet caret) */ .ts-wrapper.dropdown-active .ts-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231e3a5f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m2 11 6-6 6 6'/%3e%3c/svg%3e") !important; } .ts-wrapper.single .ts-control .item { color: #1f2937 !important; } /* Panel dropdown */ .ts-dropdown { border: 1px solid #e5e7eb !important; border-radius: 10px !important; background: #fff !important; color: #1f2937 !important; box-shadow: 0 16px 40px -8px rgba(15, 23, 42, .18), 0 2px 4px rgba(15, 23, 42, .04) !important; margin-top: 6px !important; overflow: hidden !important; z-index: 2000 !important; /* Largeur adaptée à l'option la plus longue (sinon Tom Select copie la largeur du contrôle, qui est plus étroite que les libellés). */ min-width: max-content !important; max-width: min(420px, 95vw) !important; /* léger fade-in à l'ouverture */ animation: tsDropdownIn .12s ease-out; } @keyframes tsDropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Searchbox au sommet du dropdown (plugin dropdown_input) */ .ts-dropdown .dropdown-input-wrap { padding: 10px 10px 8px !important; border-bottom: 1px solid #f3f4f6 !important; background: #fafbfc !important; } .ts-dropdown .dropdown-input { width: 100% !important; padding: 8px 12px 8px 36px !important; border: 1px solid #e5e7eb !important; border-radius: 7px !important; font-size: 13px !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M11 11l3 3m-2-7a5 5 0 1 1-10 0 5 5 0 0 1 10 0z'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: 11px center !important; background-size: 14px !important; color: #1f2937 !important; transition: border-color .15s, box-shadow .15s !important; outline: none !important; } .ts-dropdown .dropdown-input::placeholder { color: #9ca3af !important; } .ts-dropdown .dropdown-input:focus { border-color: var(--cap-primary) !important; box-shadow: 0 0 0 3px rgba(var(--cap-primary-rgb), .12) !important; } /* Liste d'options */ .ts-dropdown .ts-dropdown-content { background: #fff !important; color: #1f2937 !important; padding: 4px !important; max-height: 260px !important; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; } .ts-dropdown .option { padding: 9px 12px !important; margin: 1px 0 !important; color: #1f2937 !important; background: transparent !important; font-size: 13.5px !important; border-radius: 6px !important; cursor: pointer; transition: background .1s, color .1s; } .ts-dropdown .option.active, .ts-dropdown .option:hover { background: rgba(var(--cap-primary-rgb), .08) !important; color: var(--cap-primary) !important; } .ts-dropdown .option.selected { background: rgba(var(--cap-primary-rgb), .14) !important; color: var(--cap-primary) !important; font-weight: 600 !important; } .ts-dropdown .option.selected.active { background: rgba(var(--cap-primary-rgb), .22) !important; } .ts-dropdown .no-results { padding: 14px !important; color: #6b7280 !important; background: transparent !important; font-style: italic; font-size: 13px !important; text-align: center; } .ts-dropdown .ts-dropdown-content::-webkit-scrollbar { width: 8px; } .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-track { background: transparent; } .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; } .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* Multi : pills cuivre */ .ts-wrapper.multi .ts-control > .item { background: rgba(var(--cap-primary-rgb), .12) !important; color: var(--cap-primary) !important; border: 1px solid rgba(var(--cap-primary-rgb), .30) !important; border-radius: 999px !important; padding: 2px 8px 2px 12px !important; font-size: 12.5px !important; font-weight: 500 !important; } .ts-wrapper.multi .ts-control > .item.active { background: var(--cap-primary) !important; color: #fff !important; border-color: var(--cap-primary) !important; } /* ========================================================== AUDIT — panel d'historique d'activité ========================================================== */ .audit-page { display: flex; flex-direction: column; gap: 18px; } /* Hero */ .audit-hero { background: linear-gradient(135deg, rgba(var(--cap-primary-rgb), .08), rgba(var(--cap-primary-rgb), .02)); border: 1px solid rgba(var(--cap-primary-rgb), .18); border-radius: 16px; padding: 22px 26px; } .audit-hero-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .audit-hero-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--cap-primary), var(--cap-primary-dark)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; box-shadow: 0 8px 22px rgba(var(--cap-primary-rgb), .30); } .audit-hero-text { flex: 1 1 auto; min-width: 0; } .audit-hero-title { font-size: 22px; font-weight: 800; color: #111827; margin: 0 0 4px; line-height: 1.2; } .audit-hero-sub { font-size: 13.5px; color: #6b7280; margin: 0; } .audit-hero-stat { text-align: right; padding: 6px 18px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; flex-shrink: 0; } .audit-hero-stat-num { font-size: 24px; font-weight: 800; color: var(--cap-primary); line-height: 1.1; } .audit-hero-stat-lbl { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .6px; } /* Filtres : searchbox prominente + ligne de dropdowns natifs */ .audit-filters { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; } /* Searchbox */ .audit-search { position: relative; display: flex; align-items: center; background: #f9fafb; border: 1.5px solid #e5e7eb; border-radius: 10px; transition: border-color .15s, background .15s, box-shadow .15s; } .audit-search:focus-within { background: #fff; border-color: var(--cap-primary); box-shadow: 0 0 0 3px rgba(var(--cap-primary-rgb), .12); } .audit-search-icon { position: absolute; left: 14px; color: #9ca3af; font-size: 16px; pointer-events: none; } .audit-search-input { flex: 1 1 auto; background: transparent; border: 0; padding: 11px 14px 11px 42px; font-size: 14px; color: #111827; outline: 0; } .audit-search-input::placeholder { color: #9ca3af; } .audit-search-go { margin-right: 6px; padding: 7px 14px; background: var(--cap-primary); color: #fff; border: 0; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, transform .1s; flex-shrink: 0; } .audit-search-go:hover { background: var(--cap-primary-dark); } .audit-search-go:active { transform: scale(.98); } /* Ligne de dropdowns natifs sous la searchbox */ .audit-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .audit-filter { display: flex; flex-direction: column; gap: 4px; /* Largeur dictée par le contenu (le plus long label de l'option), avec un plancher juste assez pour rester lisible et un plafond pour ne pas qu'un libellé monstrueux casse la barre de filtres. */ min-width: 0; width: auto; max-width: 280px; } /* Tom Select : par défaut Bootstrap pose width:100% sur .form-select → on force auto pour que la pillule s'aligne sur le contenu. */ .audit-filter .ts-wrapper, .audit-filter .ts-wrapper.form-select { width: auto; min-width: max-content; display: inline-flex; flex-direction: column; } .audit-filter input[type="date"] { width: 140px; } .audit-filter-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; margin: 0; } .audit-filter-reset { align-self: center; min-width: 0; padding-bottom: 2px; } /* Timeline */ .audit-timeline { display: flex; flex-direction: column; gap: 24px; } .audit-day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed #e5e7eb; } .audit-day-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cap-primary); box-shadow: 0 0 0 4px rgba(var(--cap-primary-rgb), .15); flex-shrink: 0; } .audit-day-title { margin: 0; font-size: 14px; font-weight: 700; color: #111827; text-transform: capitalize; } .audit-day-count { margin-left: auto; font-size: 11px; font-weight: 600; color: #6b7280; background: #f3f4f6; padding: 2px 9px; border-radius: 999px; } .audit-day-list { list-style: none; margin: 0; padding: 0 0 0 6px; display: flex; flex-direction: column; gap: 4px; position: relative; } .audit-day-list::before { content: ''; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, rgba(var(--cap-primary-rgb), .35) 0%, rgba(var(--cap-primary-rgb), .08) 100%); } .audit-item { display: flex; gap: 14px; padding: 12px 14px 12px 0; border-radius: 10px; transition: background .15s; position: relative; z-index: 1; } .audit-item:hover { background: #fafbfc; } .audit-item-marker { flex-shrink: 0; padding-top: 2px; } .audit-item-marker-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; box-shadow: 0 0 0 4px #fff, 0 2px 6px rgba(0,0,0,.10); } .audit-act-info { background: #3b82f6; } .audit-act-success { background: #10b981; } .audit-act-warning { background: #f59e0b; } .audit-act-danger { background: #ef4444; } .audit-act-soft { background: #9ca3af; } .audit-item-body { flex: 1 1 auto; min-width: 0; } .audit-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; line-height: 1.45; } .audit-item-actor { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #111827; flex-shrink: 0; } .audit-actor-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--cap-primary), var(--cap-primary-dark)); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; flex-shrink: 0; } .audit-item-msg { font-size: 13.5px; color: #1f2937; flex: 1 1 auto; min-width: 0; } .audit-item-time { font-size: 11.5px; color: #9ca3af; font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: auto; } .audit-item-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .audit-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 11px; font-weight: 500; text-decoration: none; border: 1px solid transparent; } .audit-tag-link { background: rgba(var(--cap-primary-rgb), .10); color: var(--cap-primary-dark); } .audit-tag-link:hover { background: rgba(var(--cap-primary-rgb), .18); color: var(--cap-primary-dark); } .audit-tag-soft { background: transparent; border-color: #e5e7eb; } .audit-diff-toggle { background: transparent; border: 1px solid #e5e7eb; color: #6b7280; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .15s; } .audit-diff-toggle:hover { background: #f3f4f6; color: #111827; border-color: #d1d5db; } .audit-diff-toggle.is-open { background: rgba(var(--cap-primary-rgb), .12); color: var(--cap-primary-dark); border-color: rgba(var(--cap-primary-rgb), .35); } .audit-diff-toggle.is-open .bi-arrows-angle-expand::before { content: "\F12B"; /* bi-arrows-angle-contract */ } .audit-diff { margin-top: 10px; background: #fafbfc; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; } .audit-diff-table { width: 100%; font-size: 12px; border-collapse: collapse; } .audit-diff-table th { text-align: left; padding: 6px 12px; background: #f3f4f6; color: #6b7280; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid #e5e7eb; } .audit-diff-table td { padding: 6px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #1f2937; word-break: break-word; } .audit-diff-table td code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; color: #6b7280; } .audit-diff-old { color: #b91c1c; text-decoration: line-through; text-decoration-thickness: 1px; } .audit-diff-new { color: #047857; font-weight: 500; } .audit-diff-table tr:last-child td { border-bottom: none; } /* Sévérité — accent à gauche de l'item */ .audit-item.severity-critical { background: rgba(239, 68, 68, .04); border-left: 3px solid #ef4444; padding-left: 11px; } .audit-item.severity-warning { border-left: 3px solid #f59e0b; padding-left: 11px; } .audit-item.severity-success { border-left: 3px solid #10b981; padding-left: 11px; } /* Pagination */ .audit-pagination { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 14px; margin-top: 4px; } .audit-pagination-info { font-size: 12.5px; color: #6b7280; font-weight: 500; } /* ========================================================== ANALYSE DE GESTION — table TDB ========================================================== */ .tdb-scroll { max-height: 560px; overflow-y: auto; overflow-x: hidden; } .tdb-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: 11px !important; } .tdb-table thead th, .tdb-table tbody td { padding: 4px 2px !important; } .tdb-table thead th { position: sticky; top: 0; z-index: 3; background: #f3f5f9; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; padding: 6px 6px; border-bottom: 2px solid #e5e7eb; } .tdb-table tbody td { padding: 4px 4px; border-bottom: 1px solid #f3f4f6; white-space: nowrap; font-variant-numeric: tabular-nums; } .tdb-poste { background: #fff; width: 22%; font-size: 11px; overflow: hidden; text-overflow: ellipsis; } .tdb-table thead .tdb-poste { background: #f3f5f9; } .tdb-compte { background: #fff; width: 3.5%; font-size: 10px; color: #9ca3af; } .tdb-table thead .tdb-compte { background: #f3f5f9; } .tdb-total { background: #fafbfc; font-weight: 600; width: 6%; } .tdb-total.tdb-obj { background: #fff8e6; color: #b07700; font-weight: 500; width: 5%; } .tdb-total.tdb-n1 { color: #6b7280; font-weight: 500; width: 5%; } .tdb-table thead .tdb-total { z-index: 4; background: #eef0f4; } .tdb-table thead .tdb-total.tdb-obj { background: #fff3d6; color: #8a5f00; } .tdb-input.tdb-input-obj:hover, .tdb-input.tdb-input-obj:focus { background: #fff8e6; border-color: var(--cap-accent); } /* Bouton actif "Réalisé/Prévisionnel" reste cohérent avec la charte */ .tdb-mode-switch .btn { padding: 4px 12px; font-size: 12px; font-weight: 600; } tr.tdb-calc td { background: #f9fafb; color: #4b5563; } tr.tdb-calc .tdb-poste { background: #f9fafb; } /* Lignes SIG majeures plus marquées (audit Julien 2026-07-16) : fond plus soutenu, liserés haut/bas, graisse renforcée y compris sur cumul/obj/N-1. */ tr.tdb-hero td { background: rgba(30,58,95,0.10) !important; color: var(--cap-primary); font-weight: 600; border-top: 1px solid rgba(30,58,95,0.22); border-bottom: 1px solid rgba(30,58,95,0.22); } tr.tdb-hero .tdb-poste { background: rgba(30,58,95,0.10) !important; } tr.tdb-hero td.tdb-total { font-weight: 700; } /* Séparation nette entre les 12 mois et le bloc de synthèse Cumul/Obj/N-1. */ .tdb-table th.tdb-total-first, .tdb-table td.tdb-total-first { border-left: 2px solid #d8dee6; } /* Colonne du mois courant subtilement surlignée. */ .tdb-table th.tdb-mois-courant, .tdb-table td.tdb-mois-courant { background: rgba(240,165,0,0.07); } tr.tdb-hero td.tdb-mois-courant { background: rgba(240,165,0,0.16) !important; } tr.tdb-saisi:hover td { background: rgba(240,165,0,0.05); } tr.tdb-saisi:hover .tdb-poste { background: rgba(240,165,0,0.05); } .tdb-input { width: 100%; min-width: 0; font-size: 10.5px; padding: 2px 3px; border-color: transparent; background: transparent; text-align: center; } .tdb-input:hover, .tdb-input:focus { background: #fff; border-color: #d1d5db; } .tdb-input::-webkit-outer-spin-button, .tdb-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tdb-input[type=number] { -moz-appearance: textfield; } /* Bouton « recopier jusqu'à décembre » d'une cellule (TDB + suivi des charges, audit Julien 2026-07-16). Position absolue dans .tdb-cell pour ne pas élargir la colonne ; visible au survol/focus de la cellule. */ .tdb-cell { position: relative; } .tdb-copy-right { display: none; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; color: #6b7280; font-size: 10px; line-height: 1; cursor: pointer; z-index: 2; } .tdb-cell:hover .tdb-copy-right, .tdb-cell:focus-within .tdb-copy-right { display: inline-flex; } .tdb-copy-right:hover { background: var(--cap-accent, #f0a500); border-color: var(--cap-accent, #f0a500); color: #fff; } /* ========================================================== Inline assign-picker (overflow-safe, with search) ========================================================== */ .assign-picker-menu { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06); z-index: 2000; overflow: hidden; } .assign-picker-search { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #f3f4f6; background: #fafbfc; } .assign-picker-search > .bi-search { color: #9ca3af; font-size: 13px; } .assign-picker-search input { border: none; box-shadow: none !important; background: transparent; padding: 4px 0; font-size: 12.5px; } .assign-picker-search input:focus { border: none; outline: none; } .assign-picker-list { list-style: none; margin: 0; padding: 4px 0; max-height: 280px; overflow-y: auto; } .assign-picker-list li { margin: 0; } .assign-picker-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; background: transparent; border: 0; text-align: left; font-size: 12.5px; cursor: pointer; color: #1f2937; } .assign-picker-item:hover, .assign-picker-item:focus { background: rgba(30, 58, 95, 0.06); outline: none; } .assign-picker-item-main { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .assign-picker-item-meta { color: #9ca3af; font-size: 10.5px; white-space: nowrap; flex-shrink: 0; } /* Bouton trigger qui mime un