/* ────────────────────────────────────────────────────────────────────────────
Konfia — Option B Design Tokens
Drop this file into konfia-app/public/assets/css/ and include it globally
BEFORE your existing stylesheet so the tokens are available everywhere.
──────────────────────────────────────────────────────────────────────────── */
/* Fonts — load in your :
*/
:root {
/* Brand colors ---------------------------------------------------------- */
--k-navy: #1F3858; /* primary, rail active, titres, boutons primary */
--k-navy-ink: #0b1220; /* texte principal */
--k-gold: #FFB703; /* accent, streak, highlight aujourd'hui */
--k-gold-ink: #b07300;
--k-green: #2ECC71; /* CP, succès, payé */
--k-green-ink: #16803d;
--k-purple: #8B6FB5; /* pill CP alternatif */
--k-orange: #ea580c; /* séance à venir, surcharge */
--k-red: #ef4444; /* erreur, en retard */
--k-red-ink: #b91c1c;
/* Neutrals -------------------------------------------------------------- */
--k-bg: #fafbfc; /* fond app */
--k-surface: #ffffff; /* cartes */
--k-line: #e4e7ec; /* borders */
--k-line-soft: #eef1f6; /* séparateurs internes, table rows */
--k-mute: #6b7280; /* texte secondaire */
--k-mute-soft: #9ca3af; /* texte tertiaire */
--k-ghost: #cbd5e1; /* separateurs fil d'ariane */
/* Tint backgrounds (pills, subtle) -------------------------------------- */
--k-tint-navy: rgba(31,56,88,0.07);
--k-tint-green: rgba(46,204,113,0.10);
--k-tint-gold: rgba(255,183,3,0.12);
--k-tint-purple: rgba(155,89,182,0.10);
--k-tint-red: rgba(239,68,68,0.10);
--k-tint-orange: rgba(234,88,12,0.08);
/* Typography ------------------------------------------------------------ */
--k-font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--k-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
--k-fs-10: 10px; /* uppercase labels, kbd */
--k-fs-11: 11px; /* meta, small */
--k-fs-12: 12px; /* body table, body card */
--k-fs-13: 13px; /* body default */
--k-fs-15: 15px; /* headings medium */
--k-fs-18: 18px;
--k-fs-22: 22px; /* KPI medium */
--k-fs-24: 24px; /* KPI large */
/* Spacing scale --------------------------------------------------------- */
--k-s-2: 2px;
--k-s-4: 4px;
--k-s-6: 6px;
--k-s-8: 8px;
--k-s-10: 10px;
--k-s-12: 12px;
--k-s-14: 14px;
--k-s-16: 16px;
--k-s-18: 18px;
--k-s-20: 20px;
--k-s-24: 24px;
/* Radii ----------------------------------------------------------------- */
--k-r-3: 3px; /* pills, kbd */
--k-r-5: 5px; /* buttons, inputs */
--k-r-6: 6px; /* cards */
/* Shadows --------------------------------------------------------------- */
--k-shadow-sm: 0 1px 2px rgba(15,27,61,0.04);
--k-shadow-md: 0 4px 14px rgba(15,27,61,0.07);
/* Layout ---------------------------------------------------------------- */
--k-rail-w: 58px; /* largeur du rail gauche */
--k-topbar-h: 48px; /* hauteur du topbar */
}
/* ──────────────────────────────────────────────────────────────────────────
Base
────────────────────────────────────────────────────────────────────────── */
html, body {
font-family: var(--k-font);
color: var(--k-navy-ink);
background: var(--k-bg);
font-size: var(--k-fs-13);
line-height: 1.45;
}
.k-mono {
font-family: var(--k-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.2px;
}
h1, h2, h3, h4 { font-family: var(--k-font); color: var(--k-navy-ink); font-weight: 700; letter-spacing: -0.01em; }
.k-muted { color: var(--k-mute); }
.k-muted-soft { color: var(--k-mute-soft); }
.k-label-upper {
font-size: var(--k-fs-10);
color: var(--k-mute);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* ──────────────────────────────────────────────────────────────────────────
Layout shell : rail + main
────────────────────────────────────────────────────────────────────────── */
.k-shell { display: flex; min-height: 100vh; }
.k-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.k-rail {
width: var(--k-rail-w); flex-shrink: 0;
background: var(--k-surface);
border-right: 1px solid var(--k-line);
display: flex; flex-direction: column; align-items: center;
padding: var(--k-s-14) 0; gap: var(--k-s-4);
transition: width .2s ease;
overflow: hidden;
position: sticky; top: 0; height: 100vh;
overflow-y: auto;
}
.k-rail.is-expanded {
width: 220px;
align-items: stretch;
padding: var(--k-s-14) var(--k-s-8);
}
.k-rail__toggle {
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: var(--k-r-6);
color: var(--k-mute);
background: none; border: none; cursor: pointer;
transition: background .12s;
flex-shrink: 0;
align-self: center;
margin-bottom: var(--k-s-4);
}
.k-rail__toggle:hover { background: var(--k-line-soft); color: var(--k-navy); }
.k-rail.is-expanded .k-rail__toggle { align-self: flex-end; }
.k-rail__label {
display: none;
font-size: var(--k-fs-12);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.k-rail.is-expanded .k-rail__label { display: block; }
.k-rail__logo-icon { transition: opacity .2s ease; }
.k-rail__logo-full { opacity: 0; width: 0; height: 0; overflow: hidden; transition: opacity .35s ease .1s; }
.k-rail.is-expanded .k-rail__logo-icon { opacity: 0; width: 0; height: 0; overflow: hidden; }
.k-rail.is-expanded .k-rail__logo-full { opacity: 1 !important; width: auto !important; height: 84px !important; overflow: visible; }
.k-rail.is-expanded .k-rail__logo { justify-content: center !important; width: auto !important; }
.k-rail__logo:hover { background: transparent !important; }
.k-rail__beta {
display: none; font-size: .55rem; font-weight: 800; color: #fff;
background: var(--k-gold, #d4a023); padding: 1px 6px; border-radius: 3px;
letter-spacing: .1em; text-transform: uppercase;
}
.k-rail.is-expanded .k-rail__beta { display: inline-block; position: absolute; bottom: 4px; right: 8px; }
.k-rail__item {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
gap: var(--k-s-10);
border-radius: var(--k-r-6);
color: var(--k-mute);
border-left: 2px solid transparent;
margin-left: 2px;
text-decoration: none;
transition: background .12s;
flex-shrink: 0;
}
.k-rail.is-expanded .k-rail__item {
width: auto; height: 38px;
justify-content: flex-start;
padding: 0 var(--k-s-10);
}
.k-rail__item svg { flex-shrink: 0; }
.k-rail__item:hover { background: var(--k-line-soft); color: var(--k-navy); }
.k-rail__item.is-active {
background: var(--k-line-soft);
color: var(--k-navy);
border-left-color: var(--k-navy);
margin-left: 0;
}
.k-rail__spacer { flex: 1; }
.k-topbar {
height: var(--k-topbar-h);
padding: var(--k-s-10) var(--k-s-20);
background: var(--k-surface);
border-bottom: 1px solid var(--k-line);
display: flex; align-items: center; justify-content: space-between;
gap: var(--k-s-10);
}
.k-topbar__title { font-size: var(--k-fs-13); font-weight: 600; }
.k-topbar__crumb { font-size: var(--k-fs-12); color: var(--k-mute); }
.k-topbar__sep { color: var(--k-ghost); font-size: var(--k-fs-11); }
.k-page { padding: var(--k-s-18); overflow: auto; }
/* ──────────────────────────────────────────────────────────────────────────
Cards
────────────────────────────────────────────────────────────────────────── */
.k-card {
background: var(--k-surface);
border: 1px solid var(--k-line);
border-radius: var(--k-r-6);
overflow: hidden;
}
.k-card__head {
padding: var(--k-s-10) var(--k-s-16);
border-bottom: 1px solid var(--k-line);
display: flex; justify-content: space-between; align-items: center; gap: var(--k-s-12);
}
.k-card__title { font-size: var(--k-fs-12); font-weight: 700; }
.k-card__subtitle { font-size: var(--k-fs-11); color: var(--k-mute); margin-top: 2px; }
.k-card__body { padding: var(--k-s-14); }
.k-card__body--flush { padding: 0; }
/* ──────────────────────────────────────────────────────────────────────────
Buttons
────────────────────────────────────────────────────────────────────────── */
.k-btn {
display: inline-flex; align-items: center; gap: var(--k-s-6);
padding: 5px 10px;
font-size: var(--k-fs-11); font-weight: 600;
border-radius: var(--k-r-5);
border: 1px solid var(--k-line);
background: var(--k-surface);
color: var(--k-navy-ink);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: background .12s, border-color .12s;
}
.k-btn:hover { background: var(--k-bg); }
.k-btn--md { padding: 7px 14px; font-size: var(--k-fs-12); }
.k-btn--primary { background: var(--k-navy); border-color: var(--k-navy); color: #fff; }
.k-btn--primary:hover { background: #162a44; border-color: #162a44; }
.k-btn--danger { border-color: #fecaca; color: var(--k-red-ink); }
.k-btn--ghost { border-color: transparent; background: transparent; }
.k-btn--ghost:hover{ background: var(--k-line-soft); }
/* Segmented control */
.k-seg {
display: inline-flex;
border: 1px solid var(--k-line);
border-radius: var(--k-r-5);
overflow: hidden;
background: var(--k-surface);
}
.k-seg button {
padding: 5px 10px; font-size: var(--k-fs-11); font-weight: 600;
border: none; background: transparent; color: var(--k-mute);
cursor: pointer; font-family: inherit;
}
.k-seg button.is-on { background: var(--k-line-soft); color: var(--k-navy); }
/* ──────────────────────────────────────────────────────────────────────────
Inputs
────────────────────────────────────────────────────────────────────────── */
.k-input, .k-select {
padding: 5px 10px;
font-size: var(--k-fs-12);
border: 1px solid var(--k-line);
border-radius: var(--k-r-5);
background: var(--k-surface);
color: var(--k-navy-ink);
font-family: inherit;
outline: none;
}
.k-input:focus, .k-select:focus {
border-color: var(--k-navy);
box-shadow: 0 0 0 3px rgba(31,56,88,0.08);
}
.k-search {
display: flex; align-items: center; gap: var(--k-s-8);
padding: 5px 10px;
border: 1px solid var(--k-line);
border-radius: var(--k-r-6);
background: var(--k-bg);
font-size: var(--k-fs-12); color: var(--k-mute);
min-width: 260px;
}
/* Keyboard hint */
.k-kbd {
font-family: var(--k-mono);
font-size: var(--k-fs-10);
padding: 1px 5px;
border: 1px solid #d7dce3;
border-radius: var(--k-r-3);
color: var(--k-mute);
background: var(--k-bg);
}
/* ──────────────────────────────────────────────────────────────────────────
Table
────────────────────────────────────────────────────────────────────────── */
.k-table { width: 100%; border-collapse: collapse; font-size: var(--k-fs-12); }
.k-table th {
text-align: left; padding: 8px 14px;
font-size: var(--k-fs-10); color: var(--k-mute);
font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
background: var(--k-bg); border-bottom: 1px solid var(--k-line);
}
.k-table td {
padding: 10px 14px; vertical-align: middle;
border-top: 1px solid var(--k-line-soft);
}
.k-table tr:hover td { background: var(--k-bg); }
.k-table td--num { font-family: var(--k-mono); font-variant-numeric: tabular-nums; text-align: right; }
/* ──────────────────────────────────────────────────────────────────────────
Pills / badges
────────────────────────────────────────────────────────────────────────── */
.k-pill {
display: inline-block;
font-size: var(--k-fs-10); font-weight: 700; letter-spacing: 0.4px;
padding: 2px 7px; border-radius: var(--k-r-3);
text-transform: uppercase; white-space: nowrap;
background: #f3f4f6; color: #4b5563;
}
.k-pill--cp { background: var(--k-tint-purple); color: var(--k-purple); }
.k-pill--classe { background: var(--k-tint-navy); color: var(--k-navy); }
.k-pill--paid { background: var(--k-tint-green); color: var(--k-green-ink); }
.k-pill--due { background: var(--k-tint-gold); color: var(--k-gold-ink); }
.k-pill--late { background: var(--k-tint-red); color: var(--k-red-ink); }
.k-pill--good { background: var(--k-tint-green); color: var(--k-green-ink); }
.k-pill--warn { background: var(--k-tint-gold); color: var(--k-gold-ink); }
.k-pill--risk { background: var(--k-tint-red); color: var(--k-red-ink); }
/* ──────────────────────────────────────────────────────────────────────────
KPI bloc
────────────────────────────────────────────────────────────────────────── */
.k-kpi { padding: var(--k-s-14); }
.k-kpi__label { font-size: var(--k-fs-10); color: var(--k-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.k-kpi__value { font-family: var(--k-mono); font-size: var(--k-fs-24); font-weight: 600; margin-top: var(--k-s-8); color: var(--k-navy-ink); }
.k-kpi__unit { font-size: var(--k-fs-11); color: var(--k-mute-soft); margin-left: var(--k-s-6); }
/* ──────────────────────────────────────────────────────────────────────────
Utility
────────────────────────────────────────────────────────────────────────── */
.k-divider { height: 1px; background: var(--k-line-soft); }
.k-stack { display: flex; flex-direction: column; gap: var(--k-s-14); }
.k-row { display: flex; align-items: center; gap: var(--k-s-10); }
.k-grow { flex: 1; }
/* ──────────────────────────────────────────────────────────────────────────
Responsive — mobile (CP Dakar cible)
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.k-rail { display: none; } /* remplacer par un drawer / bottom nav */
.k-topbar { padding: var(--k-s-10) var(--k-s-14); height: auto; min-height: var(--k-topbar-h); }
.k-topbar__title { font-size: var(--k-fs-11); white-space: nowrap; }
.k-page { padding: var(--k-s-12); }
.k-search { min-width: 0; flex: 1; }
.k-kpi__value { font-size: var(--k-fs-22); }
}