/* ==========================================================
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-oi1SE3_.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: 36px; height: 36px;
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: 12.5px;
cursor: pointer;
}
/* ── 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: 420px; 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: 30px; font-weight: 800;
line-height: 1.25;
margin-bottom: 12px;
}
.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;
}
.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
========================================================== */
@media (max-width: 991.98px) {
.cap-sidebar { transform: translateX(-100%); transition: transform .25s; }
.cap-sidebar.show { transform: translateX(0); }
.cap-main { margin-left: 0; }
.login-left { display: none !important; }
.cap-topbar .topbar-search { display: none; }
}
/* ==========================================================
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; }
tr.tdb-hero td {
background: rgba(30,58,95,0.06) !important;
color: var(--cap-primary);
}
tr.tdb-hero .tdb-poste { background: rgba(30,58,95,0.06) !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: right;
}
.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; }
/* ==========================================================
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