/* =====================================================================
Jarvis CRM — THEME LUKANA-LIKE (clone pixel-near de la maquette)
Fond gris clair · sidebar blanche · cartes blanches plates ·
typographie Inter · accent blanc nacré (gris perle chaud).
Charge APRES app.css : surcharge du dark theme historique.
===================================================================== */
/* Inter : charger via css/tailwind.css (évite double téléchargement). */
/* ---------- Tokens ---------- */
:root {
/* Surfaces — slate très clair, séparation nette avec les cartes blanches */
--bg: #eaeef5;
--bg-canvas: #eaeef5;
--bg-elevated: #ffffff;
--surface: #ffffff;
--surface-hover: #eef2f8;
--surface-strong: #ffffff;
/* Borders — visibles, structurent la hiérarchie pour une UI nette */
--border: rgba(15, 23, 42, 0.12);
--border-glass: rgba(15, 23, 42, 0.1);
--border-strong: rgba(15, 23, 42, 0.22);
/* Texte — contraste élevé pour un look pro / dashboard financier */
--text: #0b1220;
--text-strong: #020617;
--text-muted: #334155;
--text-soft: #475569;
/* Accent — argent / graphite poli, miroir cool du nacré gris-slate du mode sombre.
accent-bright / accent-bright-2 sont les variantes "haut-contraste" pour surfaces claires. */
--accent: #1e293b;
--accent-strong: #0f172a;
--accent-deep: #020617;
--accent-soft: #e2e8f0;
--accent-bright: #475569;
--accent-bright-2: #334155;
--accent-dim: rgba(30, 41, 59, 0.1);
/* Statuts — famille slate pour success (cohérent avec dark) + warn/danger/info vifs.
Red-500 / amber-500 = couleurs vivantes et lumineuses qui ressortent sur fond clair,
sans tomber dans le sombre. Se propagent aux pills P1, danger pills, P2, etc. */
--success: #1e293b;
--success-soft: #e2e8f0;
--warning: #f59e0b;
--danger: #ef4444;
--danger-soft: #fee2e2;
--info: #3b82f6;
/* Géométrie */
--radius: 20px;
--radius-sm: 14px;
--radius-xs: 10px;
--radius-pill: 999px;
/* Ombres — légèrement plus marquées pour donner du relief aux surfaces blanches */
--shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-hover: 0 14px 32px -14px rgba(15, 23, 42, 0.22);
--shadow-sidebar: 1px 0 0 rgba(15, 23, 42, 0.06);
--sidebar-w: 220px;
--sidebar-w-collapsed: 64px;
--header-h: 64px;
--gap: 24px;
--pad-card: 28px;
--pad-card-tight: 24px;
--font: var(--font-geist-sans);
/* Aligné sur tailwind.css (Inter) — évite une famille invalide si --font-geist-sans est absent */
--font-geist-sans: Inter, ui-sans-serif, system-ui, sans-serif;
/* Échelle typo — proche Lukana / Tailwind (base 16px) */
--fs-page-title: 1.875rem; /* ~text-3xl */
--fs-page-sub: 0.8125rem; /* ~13px, entre xs et sm */
--fs-card-title: 1.0625rem; /* ~17px */
--fs-kpi-label: 0.875rem; /* text-sm — libellé discret */
--fs-kpi-value: 2.125rem; /* ~34px — chiffres dominants */
--fs-stat-value: 1.875rem; /* cartes stats hors bento KPI */
--input-placeholder: #94a3b8;
}
/* ---------- Mode sombre (tokens) ---------- */
html[data-theme="dark"] {
/* Fond noir, mesh gradient irrégulier appliqué sur (voir plus bas) */
--bg: #000000;
--bg-canvas: #000000;
--bg-elevated: #0e1013;
--surface: #121418;
--surface-hover: #1a1d22;
--surface-strong: #16181c;
--border: rgba(255, 255, 255, 0.08);
--border-glass: rgba(255, 255, 255, 0.06);
--border-strong: rgba(255, 255, 255, 0.14);
--text: #e2e8f0;
--text-strong: #f8fafc;
--text-muted: #94a3b8;
--text-soft: #64748b;
--accent: #8f8880;
--accent-strong: #a39b91;
--accent-deep: #e8e4dc;
--accent-soft: rgba(200, 192, 180, 0.14);
--accent-bright: #c4bbb0;
--accent-bright-2: #aea59a;
--accent-dim: rgba(196, 188, 176, 0.22);
--success: #9a9389;
--success-soft: rgba(200, 192, 180, 0.16);
--warning: #fbbf24;
--danger: #f87171;
--danger-soft: rgba(248, 113, 113, 0.16);
--info: #60a5fa;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-hover: 0 18px 44px -14px rgba(0, 0, 0, 0.55);
--shadow-sidebar: 1px 0 0 rgba(255, 255, 255, 0.06);
--input-placeholder: #3a4150;
/* Dégradé shell : gauche un peu plus marquée, toujours sans blanc (contraste avec le texte préservé) */
--shell-gradient-edge: color-mix(in srgb, var(--surface) 35%, var(--surface-hover) 65%);
}
/* ---------- Reset global ---------- */
html {
font-size: 16px;
background-color: var(--bg-canvas);
/* Pas de scroll document : évite que la scrollbar du viewport réduise la largeur de la topbar */
height: 100%;
overflow: hidden;
}
body {
height: 100%;
min-height: 100%;
margin: 0;
overflow: hidden;
background: var(--bg-canvas);
color: var(--text);
font-family: var(--font-geist-sans);
font-weight: 400;
letter-spacing: -0.008em;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body,
body * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Mode sombre : mesh atmosphérique fortement diffusé via filter:blur.
- Tache bleu marine haut-gauche conservée (ancre, contraste avec texte blanc).
- Autres taches : accents taupe / champagne du thème (cohérence palette).
- Mesh posé dans un pseudo-élément en position:fixed, flouté à 60px →
les formes des ellipses disparaissent, il ne reste qu'une atmosphère.
- `isolation: isolate` sur body crée un stacking context pour confiner
le pseudo (z-index: -1) derrière le contenu mais devant la bg-color. */
html[data-theme="dark"] body {
background-color: #000;
isolation: isolate;
}
html[data-theme="dark"] body::before {
content: "";
position: fixed;
inset: -120px;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient(ellipse 55% 50% at 6% 10%, rgba(28, 48, 145, 0.24), transparent 70%),
radial-gradient(ellipse 50% 45% at 96% 90%, rgba(143, 136, 128, 0.14), transparent 75%),
radial-gradient(ellipse 42% 55% at 94% 28%, rgba(196, 188, 176, 0.11), transparent 70%),
radial-gradient(ellipse 40% 35% at 22% 88%, rgba(232, 228, 220, 0.07), transparent 75%),
radial-gradient(ellipse 28% 25% at 65% 48%, rgba(174, 165, 154, 0.10), transparent 70%);
filter: blur(60px);
}
a {
color: var(--text-strong);
}
/* ---------- App layout ---------- */
.app-layout {
padding: 0;
gap: 0;
height: 100%;
min-height: 100dvh;
}
/* ---------- Sidebar (flush gauche, bordure droite unique) ---------- */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: var(--sidebar-w);
border-radius: 0;
border: none;
border-right: 1px solid var(--border);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
display: flex;
flex-direction: column;
overflow: hidden;
transition: width 0.22s ease, transform 0.25s ease;
background: #050608;
}
/* Brand : pastille verte + Lukana-style + chevron */
.sidebar-brand {
padding: 18px 18px 14px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sidebar-brand h1 {
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-strong);
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.sidebar-brand h1::before {
content: none;
}
.sidebar-brand h1::after {
content: none;
}
.sidebar-brand span:not(.sidebar-brand-text) {
display: none;
}
.sidebar-collapse-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: none;
border-radius: var(--radius-xs);
background: transparent;
color: var(--text-soft);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-collapse-btn:hover {
background: var(--surface-hover);
color: var(--text-strong);
}
.sidebar-collapse-icon {
width: 18px;
height: 18px;
display: block;
transition: transform 0.22s ease;
}
.sidebar.sidebar--collapsed .sidebar-collapse-icon {
transform: scaleX(-1);
}
.sidebar-nav {
flex: 1;
padding: 12px 12px 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1px;
}
.nav-section {
font-size: 0.5rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--text-muted);
padding: 16px 12px 10px;
}
.nav-section:not(:first-child) {
margin-top: 6px;
}
.nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px 11px 14px;
border-radius: 12px;
color: var(--text-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-decoration: none;
text-transform: uppercase;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
/* Icône monochrome (mask) — fine, gris */
.nav-link::before {
content: "";
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
flex-shrink: 0;
}
/* Icônes SVG — même pictos que la barre sombre de référence (traits fins) */
/* Aujourd’hui : grille 2×2 */
.nav-link[data-route="dashboard"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Tâches : carré + coche */
.nav-link[data-route="tasks"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.nav-link[data-route="contacts"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.nav-link[data-route="agenda"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Monitoring : axe en L + courbe vers le haut */
.nav-link[data-route="monitoring"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Équipe : silhouette + petit plus à droite */
.nav-link[data-route="team"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Solutions : empilement de couches (lisible en petit, même trait que le reste) */
.nav-link[data-route="solutions"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Événements : même calendrier à encoches (trait), point marqueur en contour */
.nav-link[data-route="events"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.nav-link[data-route="settings"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Support : cercle + point d'interrogation (lucide help-circle, trait fin) */
.nav-link[data-route="support"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Docs : livre ouvert (lucide book-open, trait fin) */
.nav-link[data-route="docs"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Admin : bouclier + coche (lucide shield-check, trait fin) */
.nav-link[data-route="admin"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.nav-link:hover {
background: transparent;
color: #b8c3ea;
text-shadow: 0 0 6px rgba(184, 195, 234, 0.22);
text-decoration: none;
}
.nav-link.active {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 22%,
rgba(255, 255, 255, 0.01) 52%,
rgba(255, 255, 255, 0) 100%
);
color: #f3f5fb;
font-weight: 600;
position: relative;
box-shadow: none;
}
.nav-link.active::after {
content: none;
}
.nav-link.active::before {
background: #ffffff;
}
.nav-link .nav-link-text {
white-space: nowrap;
line-height: 1;
}
.sidebar-footer {
padding: 12px 18px;
border-top: 1px solid var(--border);
font-size: 0.75rem;
font-weight: 400;
color: var(--text-soft);
line-height: 1.5;
}
/* ---------- Sidebar réduite (icônes seules, desktop) ---------- */
.sidebar.sidebar--collapsed {
width: var(--sidebar-w-collapsed);
}
.sidebar.sidebar--collapsed + .main-wrap {
margin-left: var(--sidebar-w-collapsed);
}
.sidebar.sidebar--collapsed .sidebar-brand {
flex-direction: column;
align-items: center;
padding: 14px 8px 12px;
gap: 8px;
}
.sidebar.sidebar--collapsed .sidebar-brand h1 {
position: relative;
justify-content: center;
width: 100%;
}
.sidebar.sidebar--collapsed .sidebar-brand-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sidebar.sidebar--collapsed .sidebar-brand h1::after {
display: none;
}
.sidebar.sidebar--collapsed .sidebar-nav {
padding: 8px 8px 12px;
}
.sidebar.sidebar--collapsed .nav-section {
display: none;
}
.sidebar.sidebar--collapsed .nav-link {
justify-content: center;
padding: 10px 8px;
gap: 0;
}
.sidebar.sidebar--collapsed .nav-link-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sidebar.sidebar--collapsed .sidebar-footer {
display: none;
}
/* ---------- Wrap principal ---------- */
.main-wrap {
margin-left: var(--sidebar-w);
margin-right: 0;
padding: 0 32px 32px;
background: transparent;
min-height: 0;
height: 100%;
transition: margin-left 0.22s ease;
}
/* ---------- Topbar (hero global) ---------- */
.topbar {
height: var(--header-h);
padding: 0;
background: transparent;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
position: sticky;
top: 0;
z-index: 50;
margin: 0 0 8px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
}
/* Search — sans encadré (icône + champ seuls), alignée à droite avec les actions */
.topbar-search {
flex: 0 1 320px;
max-width: 340px;
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
border-radius: 0;
padding: 4px 0;
box-shadow: none;
margin-left: auto;
margin-right: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.topbar-search-icon {
width: 14px;
height: 14px;
color: var(--text-soft);
flex-shrink: 0;
opacity: 0.92;
}
.topbar-search input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-size: 0.875rem; /* text-sm */
font-weight: 400;
color: var(--text);
font-family: inherit;
padding: 0;
}
.topbar-search input::placeholder {
color: var(--input-placeholder);
font-weight: 400;
}
.topbar-title {
display: none;
}
.topbar-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
margin-left: auto;
}
.topbar-icon-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.topbar-icon-btn:hover {
background: var(--surface-hover);
color: var(--text-strong);
}
/* Pill "Assistant" (nacré) */
.assistant-pill,
.sync-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px 7px 8px;
border-radius: var(--radius-pill);
background: var(--accent-soft);
border: 1px solid rgba(110, 102, 92, 0.22);
color: var(--accent-deep);
font-size: 0.875rem; /* text-sm */
font-weight: 500;
letter-spacing: -0.01em;
}
.assistant-pill::before,
.sync-pill::before {
content: "";
width: 22px;
height: 22px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, var(--accent-bright), var(--accent) 70%);
box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15);
flex-shrink: 0;
}
/* Thème clair / sombre */
.topbar-theme-toggle {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.topbar-theme-toggle:hover {
background: var(--surface-hover);
color: var(--text-strong);
}
.topbar-theme-toggle .theme-icon-sun {
display: none;
}
html[data-theme="dark"] .topbar-theme-toggle .theme-icon-moon {
display: none;
}
html[data-theme="dark"] .topbar-theme-toggle .theme-icon-sun {
display: block;
}
/* Bell */
.topbar-bell {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: pointer;
position: relative;
}
.topbar-bell.is-alert::after {
content: "";
position: absolute;
top: 8px;
right: 9px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
border: 2px solid var(--surface);
}
/* Profile chip — style Linear/GitHub/Vercel : carré subtilement arrondi,
pas de gradient, padding tighter. Bordure container moins arrondie aussi
pour casser le côté "pill iOS". */
.topbar-profile {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px 4px 4px;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-soft);
color: var(--text-strong);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
letter-spacing: -0.01em;
}
.topbar-profile:hover {
background: var(--surface-hover);
text-decoration: none;
}
.topbar-profile-avatar {
width: 28px;
height: 28px;
border-radius: 5px;
/* Dégradé bleu marine → taupe : echo des 2 teintes dominantes
(anchor du mesh + --accent du thème). 135deg = navy en haut-gauche,
taupe en bas-droite. text-shadow pour préserver la lisibilité
blanc sur la moitié taupe (contraste plus serré). */
background: linear-gradient(135deg, #1c3091 0%, #8f8880 100%);
color: #f1f5f9;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
flex-shrink: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.topbar-profile-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
}
.topbar-profile-meta strong {
font-weight: 600;
color: var(--text-strong);
font-size: 0.875rem;
}
.topbar-profile-meta small {
font-size: 0.75rem; /* text-xs */
font-weight: 400;
color: var(--text-muted);
}
html[data-theme="dark"] .topbar-profile {
background: #13161a;
border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .topbar-theme-toggle,
html[data-theme="dark"] .topbar-icon-btn,
html[data-theme="dark"] .topbar-bell {
background: #13161a;
border-color: rgba(255, 255, 255, 0.08);
color: #94a3b8;
}
html[data-theme="dark"] .topbar-theme-toggle:hover,
html[data-theme="dark"] .topbar-icon-btn:hover,
html[data-theme="dark"] .topbar-bell:hover {
background: #181c21;
color: #f1f5f9;
}
.topbar-profile-chevron {
width: 14px;
height: 14px;
color: var(--text-muted);
flex-shrink: 0;
transition: transform 0.15s ease;
}
.topbar-profile[aria-expanded="true"] .topbar-profile-chevron {
transform: rotate(180deg);
}
.topbar-profile-wrap {
position: relative;
}
button.topbar-profile {
cursor: pointer;
font-family: inherit;
}
.topbar-profile-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
width: 100%;
padding: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-soft);
z-index: 1000;
}
.topbar-profile-menu[hidden] {
display: none;
}
.topbar-profile-menu-item {
display: block;
width: 100%;
text-align: center;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: var(--radius-pill);
color: var(--text-strong);
font-size: 0.875rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
}
.topbar-profile-menu-item:hover {
background: var(--surface-hover);
}
html[data-theme="dark"] .topbar-profile-menu {
background: #13161a;
border-color: rgba(255, 255, 255, 0.08);
}
/* ---------- Boutons ---------- */
.btn {
border-radius: var(--radius-pill);
font-weight: 600; /* text-sm + semibold — boutons type “+ New Payment” */
font-size: 0.875rem;
letter-spacing: -0.01em;
padding: 10px 18px;
transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
border: 1px solid transparent;
}
.btn:active {
transform: scale(0.97);
}
/* Primary = même pastille que .rdv-time (page Aujourd’hui) — tout le site */
.btn-primary {
background: var(--accent-soft);
color: var(--accent-deep);
border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-strong));
font-weight: 600;
}
.btn-primary:hover {
background: color-mix(in srgb, var(--accent-soft) 82%, var(--accent-bright) 10%);
color: var(--accent-deep);
border-color: color-mix(in srgb, var(--accent) 34%, var(--border-strong));
filter: none;
}
/* Bouton "Nouveau contact" de la page d'accueil :
reprend le rendu d'un onglet sidebar sélectionné. */
.btn-sidebar-active {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 22%,
rgba(255, 255, 255, 0.01) 52%,
rgba(255, 255, 255, 0) 100%
);
border-color: rgba(255, 255, 255, 0.12);
font-weight: 600;
font-size: 0.72rem;
padding: 5px 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: transparent;
background-image:
linear-gradient(
120deg,
#d3d8e3 0%,
#cfd5e0 30%,
#a9b5cf 49%,
#95a2c4 51%,
#cfd5e0 70%,
#d3d8e3 100%
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 22%,
rgba(255, 255, 255, 0.01) 52%,
rgba(255, 255, 255, 0) 100%
);
background-origin: border-box;
background-clip: text, border-box;
-webkit-background-clip: text, border-box;
-webkit-text-fill-color: transparent;
box-shadow: none;
}
.btn-sidebar-active:hover {
background-image:
linear-gradient(
120deg,
#d3d8e3 0%,
#cfd5e0 30%,
#a9b5cf 49%,
#95a2c4 51%,
#cfd5e0 70%,
#d3d8e3 100%
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 22%,
rgba(255, 255, 255, 0.02) 52%,
rgba(255, 255, 255, 0) 100%
);
text-shadow: 0 0 6px rgba(184, 195, 234, 0.22);
}
html[data-theme="dark"] .btn-primary {
background: var(--accent-soft);
color: var(--accent-deep);
border-color: color-mix(in srgb, var(--accent-bright) 36%, var(--border-strong));
}
html[data-theme="dark"] .btn-primary:hover {
background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface-hover));
color: var(--accent-deep);
border-color: color-mix(in srgb, var(--accent-bright) 48%, var(--border));
filter: none;
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
background: var(--surface-hover);
}
.btn-ghost {
background: transparent;
color: var(--text-muted);
border: none;
font-weight: 500;
}
.btn-ghost:hover {
background: rgba(15, 23, 42, 0.04);
color: var(--text);
}
.btn-sm {
padding: 7px 14px;
font-size: 0.8125rem;
font-weight: 600;
}
/* Bouton noir (Receive-style) si besoin */
.btn-dark {
background: var(--text-strong);
color: #ffffff;
border: 1px solid var(--text-strong);
box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.45);
}
.btn-dark:hover {
background: #1f2937;
}
/* ---------- Content / view ---------- */
.content {
padding: 0 0 32px;
max-width: none;
width: 100%;
flex: 1;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.content::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* ---------- Bandeau de rappel Google Calendar (lundi) ---------- */
.gcal-reminder {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 16px;
margin-bottom: var(--gap);
border-radius: 10px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.45);
color: var(--text);
}
.gcal-reminder-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.4;
}
.gcal-reminder-text strong {
color: #f59e0b;
font-weight: 600;
}
.gcal-reminder-text span {
color: var(--text-muted);
font-size: 0.9rem;
}
.gcal-reminder-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.gcal-reminder-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
.gcal-reminder-close:hover {
color: var(--text);
}
/* ---------- Hero du dashboard (Overview / +New Payment) ---------- */
.page-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: var(--gap);
}
/* Page Contacts : hero compact (texte vide), tableau remonté juste sous le bouton « + Nouveau contact ». */
#view-contacts .page-hero {
margin-bottom: 0;
align-items: center;
}
#view-contacts .table-wrap {
margin-top: 0.75rem;
}
.page-hero-text h1 {
margin: 0;
font-size: var(--fs-page-title);
font-weight: 700;
letter-spacing: -0.032em;
line-height: 1.12;
color: var(--text-strong);
}
.page-hero-text p {
margin: 6px 0 0;
max-width: 42ch;
font-size: var(--fs-page-sub);
font-weight: 400;
line-height: 1.55;
color: var(--text-muted);
}
.page-hero-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* ---------- Cartes & tableaux — même “liquid glass” que les KPI (Aujourd’hui) ---------- */
.card,
.stat-card {
position: relative;
border-radius: 18px !important;
border: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
background: color-mix(in srgb, var(--surface) 64%, transparent) !important;
backdrop-filter: blur(14px) saturate(128%);
-webkit-backdrop-filter: blur(14px) saturate(128%);
box-shadow:
0 3px 20px -10px rgba(15, 23, 42, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.38) inset,
0 1px 0 rgba(255, 255, 255, 0.45) inset !important;
padding: var(--pad-card) !important;
transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
overflow: hidden;
}
.table-wrap {
position: relative;
border-radius: var(--radius) !important;
border: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
background: color-mix(in srgb, var(--surface) 64%, transparent) !important;
backdrop-filter: blur(14px) saturate(128%);
-webkit-backdrop-filter: blur(14px) saturate(128%);
box-shadow:
0 3px 20px -10px rgba(15, 23, 42, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.38) inset,
0 1px 0 rgba(255, 255, 255, 0.45) inset !important;
transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card {
border: 1px solid rgba(255, 255, 255, 0.09) !important;
background: color-mix(in srgb, var(--surface) 50%, transparent) !important;
box-shadow:
0 6px 28px -14px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
}
html[data-theme="dark"] .table-wrap {
border: 1px solid rgba(255, 255, 255, 0.09) !important;
background: color-mix(in srgb, var(--surface) 50%, transparent) !important;
box-shadow:
0 6px 28px -14px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
}
/* Mode clair : vignettes premium "givrées" — verre cristal au-dessus du wallpaper.
Insets blancs marqués (arête haute + halo cyan subtil) + ombres bleutées
pour le ressenti glacial-minéral cohérent avec la palette argent. */
html[data-theme="light"] .card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .table-wrap {
background: rgba(255, 255, 255, 0.94) !important;
border-color: rgba(15, 23, 42, 0.1) !important;
box-shadow:
0 10px 30px -14px rgba(15, 23, 42, 0.18),
0 2px 6px -2px rgba(15, 23, 42, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.85) inset,
0 1px 0 rgba(255, 255, 255, 0.95) inset,
inset 0 -1px 0 rgba(200, 215, 235, 0.4) !important;
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .table-wrap:hover {
background: rgba(255, 255, 255, 0.98) !important;
border-color: rgba(15, 23, 42, 0.18) !important;
box-shadow:
0 14px 38px -12px rgba(15, 23, 42, 0.24),
0 3px 8px -2px rgba(15, 23, 42, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.9) inset,
0 1px 0 rgba(255, 255, 255, 1) inset,
inset 0 -1px 0 rgba(180, 200, 225, 0.5) !important;
}
/* Mode clair — pills priorité (le fond sombre rgba(15,23,42,.35) deviendrait
un gris écrasé sur clair → wash slate ultra léger pour ressenti aérien). */
html[data-theme="light"] .th-add-btn,
html[data-theme="light"] .task-col--priority .task-priority-pills,
html[data-theme="light"] .task-priority-filter-pills {
background: rgba(15, 23, 42, 0.05) !important;
border-color: rgba(15, 23, 42, 0.14) !important;
}
html[data-theme="light"] .th-add-btn:hover {
background: rgba(15, 23, 42, 0.09) !important;
border-color: var(--accent-strong) !important;
color: var(--accent-strong) !important;
}
/* Note : le bouton « + Nouvelle tâche » (ajouté par JS dans tasks) reçoit aussi
la classe `.btn-sidebar-active` qui porte nativement le dégradé métallique
sur le texte. Aucun override ici → laisse `.btn-sidebar-active` (et son
mirror light défini plus bas) faire le boulot, identique aux boutons
« + Ajouter un contact », « + Nouvelle solution », « + Nouvel événement ». */
/* Mode clair — zone dangereuse "Supprimer ce contact" (fiche contact / options).
Le titre `#fecaca` (red-200 pâle) prévu pour fond sombre est illisible sur
le fond rose pâle de la panel → on inverse en red-800 (foncé) pour mirror
du dark mode. Border, hint et bouton ajustés pour cohérence danger. */
html[data-theme="light"] .cd-options-danger {
border-color: rgba(239, 68, 68, 0.32);
background: rgba(254, 226, 226, 0.5);
}
html[data-theme="light"] .cd-options-danger-title {
color: #991b1b;
}
html[data-theme="light"] .cd-delete-btn {
background: rgba(239, 68, 68, 0.1);
color: #991b1b;
border-color: rgba(239, 68, 68, 0.45);
}
html[data-theme="light"] .cd-delete-btn:hover,
html[data-theme="light"] .sd-delete-btn:hover {
background: rgba(239, 68, 68, 0.18);
color: #7f1d1d;
border-color: rgba(239, 68, 68, 0.65);
}
/* Mode clair — agenda : bulles d'événements (pro / relationnel / chez=client).
Texte d'origine pâle pour fond sombre → illisible sur les bulles claires.
Uniquement le `color` du texte change (fond + liseré gauche inchangés). */
html[data-theme="light"] .agenda-slot--pro {
color: #3d5879;
}
html[data-theme="light"] .agenda-slot--relationnel {
color: #3d6a4d;
}
html[data-theme="light"] .agenda-slot--chez {
color: #6c4970;
}
/* Mode clair — en-têtes des 3 vues agenda (Semaine / Jour / Mois).
Tous utilisent rgba(0, 0, 0, 0.2) → gris terne sur clair. Wash slate propre. */
html[data-theme="light"] .agenda-day strong,
html[data-theme="light"] .agenda-day-view__head,
html[data-theme="light"] .agenda-month__weekday {
background: rgba(15, 23, 42, 0.06);
color: #334155;
}
/* Mode clair — page Monitoring : trends KPI + insight cards.
`var(--success)` et `var(--accent)` pointent sur du slate sombre (refactor DA
argent), donc les indicateurs « positifs » et « neutres » perdent leur
sémantique color-coded. On force emerald-500 (positive) et blue-500 (neutral)
pour la lisibilité immédiate, en cohérence avec les pills `.delta` du dashboard. */
html[data-theme="light"] .mon-kpi-trend[data-trend="positive"] {
color: #10b981;
}
html[data-theme="light"] .mon-insight-card--positive .mon-insight-icon,
html[data-theme="light"] .mon-insight-card--positive .mon-insight-tag {
color: #10b981;
}
html[data-theme="light"] .mon-insight-card--neutral .mon-insight-icon,
html[data-theme="light"] .mon-insight-card--neutral .mon-insight-tag {
color: #3b82f6;
}
/* Mode clair — badges d'état d'avancement contacts (.pipeline-step-badge).
Les couleurs de texte d'origine (champagne pâle, corail, slate-blue clair…)
sont conçues pour fond sombre → illisibles sur cards blanches. On ne touche
PAS au fond ni au border (déjà pastels), juste le texte qui passe en version
foncée de la même teinte (mirror logique du nacré dark mode). */
html[data-theme="light"] .pipeline-step-badge[data-step="c1"] {
background: rgba(212, 180, 130, 0.26);
border-color: rgba(212, 180, 130, 0.7);
color: #7a5a25;
}
html[data-theme="light"] .pipeline-step-badge[data-step="r0"] {
background: rgba(212, 147, 126, 0.26);
border-color: rgba(212, 147, 126, 0.7);
color: #8b4a2f;
}
html[data-theme="light"] .pipeline-step-badge[data-step="r1"] {
background: rgba(138, 165, 197, 0.26);
border-color: rgba(138, 165, 197, 0.7);
color: #3d5879;
}
html[data-theme="light"] .pipeline-step-badge[data-step="r2"] {
background: rgba(90, 154, 175, 0.26);
border-color: rgba(90, 154, 175, 0.7);
color: #2d6275;
}
html[data-theme="light"] .pipeline-step-badge[data-step="r3"] {
background: rgba(156, 120, 158, 0.28);
border-color: rgba(156, 120, 158, 0.75);
color: #6c4970;
}
html[data-theme="light"] .pipeline-step-badge[data-step="r4"] {
background: rgba(123, 164, 133, 0.28);
border-color: rgba(123, 164, 133, 0.75);
color: #3d6a4d;
}
/* Mode clair — filtre dropdown pipeline : trigger en slate sombre +
blocs internes en noir translucide → cassent la DA argent. On les
passe en blanc/slate clair (mirror du dark mode). */
html[data-theme="light"] .filter-dd--pipeline .filter-dd-trigger,
html[data-theme="light"] .filter-dd--lifecycle .filter-dd-trigger,
html[data-theme="light"] .filter-dd-trigger {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
html[data-theme="light"] .filter-dd-panel--pipeline {
color-scheme: light;
}
html[data-theme="light"] .filter-dd-group-block {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .filter-dd-panel--multi .filter-dd-group-head {
background-color: rgba(15, 23, 42, 0.06);
color: #334155;
}
html[data-theme="light"] .filter-dd-panel--multi .filter-dd-group-head:hover {
background-color: rgba(15, 23, 42, 0.1);
color: #0f172a;
}
html[data-theme="light"] .filter-dd-check:hover {
background: rgba(15, 23, 42, 0.05);
color: #0f172a;
}
/* Mode clair — drawer Récap : adoucit le corps de texte (gris slate moyen) pour
créer une hiérarchie nette avec les titres uppercase qui restent bien contrastés. */
html[data-theme="light"] .drawer-head .meta,
html[data-theme="light"] #recap-subtitle {
color: #64748b;
}
html[data-theme="light"] .recap-block p,
html[data-theme="light"] .recap-block .recap-text {
color: #64748b;
}
html[data-theme="light"] .recap-block a.zoom-link {
color: #64748b;
}
html[data-theme="light"] .recap-block a.zoom-link:hover {
color: var(--accent-strong);
}
/* Mode clair : sous-vignettes (RDV + Rappels du dashboard Aujourd'hui)
→ fond gris slate très léger pour les détacher du blanc pur des cartes parentes. */
html[data-theme="light"] .rdv-item,
html[data-theme="light"] .reminders-list li {
background: #f4f6fb !important;
border-color: rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .rdv-item:hover {
background: #eef2f8 !important;
border-color: rgba(15, 23, 42, 0.16) !important;
}
html[data-theme="light"] .reminders-list li:hover {
background: #eef2f8 !important;
}
/* Mode clair : variations KPI (↑↓ + pills delta) en couleurs vives et lumineuses.
Tailwind -500 / -400 mid-tones : red-500 #ef4444 et emerald-500 #10b981 → claquent
sur fond blanc sans tomber dans le sombre. */
html[data-theme="light"] .bento-grid .stat-card.b-kpi .kpi-footer[data-status="positive"] {
color: #10b981;
text-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}
html[data-theme="light"] .bento-grid .stat-card.b-kpi .kpi-footer[data-status="alert"] {
color: #ef4444;
text-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
}
html[data-theme="light"] .bento-grid .stat-card.b-kpi .kpi-footer[data-status="info"],
html[data-theme="light"] .bento-grid .stat-card.b-kpi .kpi-footer[data-status="steady"] {
color: #475569;
}
/* Pills delta — pastel vif + texte vibrant */
html[data-theme="light"] .stat-card .delta {
background: #d1fae5;
color: #10b981;
font-weight: 700;
}
html[data-theme="light"] .stat-card .delta.delta-down {
background: #fee2e2;
color: #ef4444;
}
/* Pill delta KPI bento (override plus spécifique) — même teintes vives */
html[data-theme="light"] .bento-grid .stat-card.b-kpi .delta {
background: #d1fae5;
color: #10b981;
box-shadow:
0 0 0 1px rgba(16, 185, 129, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
html[data-theme="light"] .bento-grid .stat-card.b-kpi .delta.delta-down {
background: #fee2e2;
color: #ef4444;
box-shadow:
0 0 0 1px rgba(239, 68, 68, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.card::before,
.stat-card::before,
.table-wrap::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: linear-gradient(
125deg,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.04) 38%,
rgba(255, 255, 255, 0) 52%
);
opacity: 0.4;
}
html[data-theme="dark"] .card::before,
html[data-theme="dark"] .stat-card::before,
html[data-theme="dark"] .table-wrap::before {
background: linear-gradient(
125deg,
rgba(255, 255, 255, 0.09) 0%,
rgba(255, 255, 255, 0.02) 35%,
rgba(255, 255, 255, 0) 50%
);
opacity: 0.55;
}
.card > *,
.stat-card > * {
position: relative;
z-index: 1;
}
.table-wrap > * {
position: relative;
z-index: 1;
}
.card:hover,
.stat-card:hover {
border-color: color-mix(in srgb, var(--border-strong) 48%, transparent) !important;
background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
box-shadow:
0 6px 28px -12px rgba(15, 23, 42, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.45) inset,
0 1px 0 rgba(255, 255, 255, 0.52) inset !important;
}
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .stat-card:hover {
border-color: rgba(255, 255, 255, 0.12) !important;
background: color-mix(in srgb, var(--surface) 58%, transparent) !important;
box-shadow:
0 10px 36px -16px rgba(0, 0, 0, 0.48),
0 0 0 1px rgba(255, 255, 255, 0.07) inset,
0 1px 0 rgba(255, 255, 255, 0.09) inset !important;
}
.table-wrap:hover {
border-color: color-mix(in srgb, var(--border-strong) 48%, transparent) !important;
background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
box-shadow:
0 6px 28px -12px rgba(15, 23, 42, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.45) inset,
0 1px 0 rgba(255, 255, 255, 0.52) inset !important;
}
html[data-theme="dark"] .table-wrap:hover {
border-color: rgba(255, 255, 255, 0.12) !important;
background: color-mix(in srgb, var(--surface) 58%, transparent) !important;
box-shadow:
0 10px 36px -16px rgba(0, 0, 0, 0.48),
0 0 0 1px rgba(255, 255, 255, 0.07) inset,
0 1px 0 rgba(255, 255, 255, 0.09) inset !important;
}
.card-header {
margin-bottom: 18px;
padding-bottom: 0;
border-bottom: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
margin: 0;
font-size: var(--fs-card-title);
font-weight: 600;
letter-spacing: -0.018em;
color: var(--text-strong);
}
/* ---------- Grilles (override valeurs historiques) ---------- */
.grid-2,
.grid-3 {
gap: var(--gap) !important;
}
/* ---------- DASHBOARD — BENTO ---------- */
.bento-grid {
display: grid;
grid-template-columns: 9fr 7fr;
gap: 16px;
align-items: stretch;
}
.bento-left {
display: grid;
grid-template-rows: auto 1fr;
gap: 16px;
min-width: 0;
min-height: 0;
}
.bento-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
min-width: 0;
}
.bento-grid > .b-rappels {
min-width: 0;
}
.bento-left > .b-rdv {
min-height: 0;
}
@media (max-width: 1180px) {
.bento-grid {
grid-template-columns: 1fr;
gap: var(--gap);
}
}
@media (max-width: 720px) {
.bento-kpis {
grid-template-columns: 1fr;
}
}
/* KPI card — typo de la maquette, label en casse normale + delta pill */
.stat-card {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 118px;
overflow: hidden;
padding: 18px 20px !important;
}
.stat-card .label {
font-size: 0.875rem; /* text-sm */
font-weight: 500;
text-transform: none;
letter-spacing: -0.01em;
color: var(--text-muted);
}
.stat-card .value {
font-size: var(--fs-stat-value);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.034em;
color: var(--text-strong);
margin: 0;
font-variant-numeric: tabular-nums;
}
/* Même traitement chiffres que les KPI du dashboard (Monitoring, etc.) */
.stat-card:not(.b-kpi) .value {
font-size: 2.125rem;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.05;
color: transparent;
background: linear-gradient(
120deg,
#d3d8e3 0%,
#cfd5e0 30%,
#a9b5cf 49%,
#95a2c4 51%,
#cfd5e0 70%,
#d3d8e3 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Aujourd'hui — KPI Contacts / Rendez-vous / À relancer : dégradé métallique
plus contrasté (vraie bande brillante au milieu) pour rendre l'effet bien visible. */
#view-dashboard .bento-kpis .stat-card.b-kpi .value {
color: transparent;
background-color: transparent;
background-image: linear-gradient(
120deg,
#475569 0%,
#94a3b8 28%,
#f1f5f9 48%,
#ffffff 52%,
#94a3b8 72%,
#475569 100%
);
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Mode sombre : chiffres KPI Aujourd'hui en blanc uni (pas de dégradé) pour plus de lisibilité. */
html[data-theme="dark"] #view-dashboard .bento-kpis .stat-card.b-kpi .value,
html[data-theme="dark"] #view-dashboard .bento-kpis .stat-card.b-kpi .value[style] {
background-image: none !important;
background-color: transparent !important;
color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
}
.stat-card:not(.b-kpi) .label {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.stat-card .hint {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
font-size: 0.75rem; /* text-xs — “Since last week” */
font-weight: 400;
color: var(--text-muted);
margin-top: auto;
}
.stat-card .hint-text {
flex: 1;
min-width: 0;
line-height: 1.35;
}
/* Si un span.delta est présent (ajouté côté HTML) il prend la pill */
.stat-card .delta {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 2px 8px;
border-radius: var(--radius-pill);
font-size: 0.75rem;
font-weight: 500;
background: var(--success-soft);
color: var(--success);
}
.stat-card .delta.delta-down {
background: var(--danger-soft);
color: var(--danger);
}
/* ---------- Vignettes KPI (Aujourd’hui) — liquid glass (flou + translucide + reflet) ---------- */
.bento-grid .stat-card.b-kpi {
border-radius: 18px !important;
border: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
background: color-mix(in srgb, var(--surface) 64%, transparent) !important;
backdrop-filter: blur(14px) saturate(128%);
-webkit-backdrop-filter: blur(14px) saturate(128%);
box-shadow:
0 3px 20px -10px rgba(15, 23, 42, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.38) inset,
0 1px 0 rgba(255, 255, 255, 0.45) inset !important;
padding: 16px 22px !important;
min-height: 112px;
gap: 10px;
}
.bento-grid .stat-card.b-kpi::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: linear-gradient(
125deg,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.04) 38%,
rgba(255, 255, 255, 0) 52%
);
opacity: 0.4;
}
.bento-grid .stat-card.b-kpi > * {
position: relative;
z-index: 1;
}
.bento-grid .stat-card.b-kpi:hover {
border-color: color-mix(in srgb, var(--border-strong) 48%, transparent) !important;
background: color-mix(in srgb, var(--surface) 70%, transparent) !important;
box-shadow:
0 6px 28px -12px rgba(15, 23, 42, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.45) inset,
0 1px 0 rgba(255, 255, 255, 0.52) inset !important;
}
html[data-theme="dark"] .bento-grid .stat-card.b-kpi {
border: 1px solid rgba(255, 255, 255, 0.09) !important;
background: color-mix(in srgb, var(--surface) 50%, transparent) !important;
box-shadow:
0 6px 28px -14px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
}
html[data-theme="dark"] .bento-grid .stat-card.b-kpi::before {
background: linear-gradient(
125deg,
rgba(255, 255, 255, 0.09) 0%,
rgba(255, 255, 255, 0.02) 35%,
rgba(255, 255, 255, 0) 50%
);
opacity: 0.55;
}
html[data-theme="dark"] .bento-grid .stat-card.b-kpi:hover {
border-color: rgba(255, 255, 255, 0.12) !important;
background: color-mix(in srgb, var(--surface) 58%, transparent) !important;
box-shadow:
0 10px 36px -16px rgba(0, 0, 0, 0.48),
0 0 0 1px rgba(255, 255, 255, 0.07) inset,
0 1px 0 rgba(255, 255, 255, 0.09) inset !important;
}
.bento-grid .stat-card.b-kpi .label {
font-size: 0.625rem;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.bento-grid .stat-card.b-kpi .value {
font-size: 3rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: transparent;
/* Même traitement que #view-tasks .tasks-kpi-cat-value (dégradé métal + clip, sans ombre). */
background-color: transparent;
background-image: linear-gradient(
120deg,
#d3d8e3 0%,
#cfd5e0 30%,
#a9b5cf 49%,
#95a2c4 51%,
#cfd5e0 70%,
#d3d8e3 100%
);
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 0;
min-height: 3rem;
display: inline-flex;
align-items: flex-end;
font-variant-numeric: tabular-nums;
}
.bento-grid .card.b-rdv {
min-height: 332px;
display: flex;
flex-direction: column;
}
.bento-grid > .card.b-rappels {
min-height: 468px;
display: flex;
flex-direction: column;
}
/* Quand le panneau d'aide est ouvert, faire passer la carte au-dessus des cartes voisines. */
.bento-grid > .card.b-rappels:has(.reminders-help-host.is-expanded) {
position: relative;
z-index: 40;
}
/* En-têtes Aujourd’hui : titre et boutons + sur la même ligne, centrés entre eux (pas de décalage vertical). */
.bento-grid .card.b-rdv .card-header,
.bento-grid > .card.b-rappels .card-header {
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.bento-grid .card.b-rdv .card-header .card-title,
.bento-grid > .card.b-rappels .card-header .card-title {
flex: 1;
min-width: 0;
line-height: 1.35;
}
.bento-grid .card.b-rdv .card-header .dash-card-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.bento-grid > .card.b-rappels .card-header .dash-card-add-btn {
flex-shrink: 0;
}
.dash-card-add-btn {
min-width: 2.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-weight: 600;
font-size: 1.0625rem;
line-height: 1.35;
}
.bento-grid .card.b-rdv #dash-next-rdvs {
flex: 1;
}
.bento-grid > .card.b-rappels .reminders-list {
flex: 1;
min-height: 0;
}
.bento-grid .stat-card.b-kpi .value[style] {
font-size: 3rem !important;
font-weight: 800 !important;
letter-spacing: -0.04em !important;
color: transparent !important;
background-color: transparent !important;
background-image: linear-gradient(
120deg,
#d3d8e3 0%,
#cfd5e0 30%,
#a9b5cf 49%,
#95a2c4 51%,
#cfd5e0 70%,
#d3d8e3 100%
) !important;
background-repeat: no-repeat !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* Titres de section cartes : même micro-style que Prochains RDV / Rappels (Aujourd’hui) */
.card h3.card-title {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-bright);
}
.bento-grid .stat-card.b-kpi .hint {
margin-top: 0;
padding-top: 8px;
font-size: 12px;
font-weight: 500;
color: #64748b;
line-height: 1.25;
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 1rem;
white-space: nowrap;
}
.bento-grid .stat-card.b-kpi {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
align-items: start;
}
.bento-grid .stat-card.b-kpi .kpi-footer::before {
content: "";
display: inline-block;
width: 0.7rem;
text-align: center;
flex-shrink: 0;
}
.bento-grid .stat-card.b-kpi .kpi-footer[data-status="positive"] {
color: #86d9bf;
text-shadow: 0 0 8px rgba(134, 217, 191, 0.22);
}
.bento-grid .stat-card.b-kpi .kpi-footer[data-status="positive"]::before {
content: "↑";
}
.bento-grid .stat-card.b-kpi .kpi-footer[data-status="alert"] {
color: #f0a3a8;
text-shadow: 0 0 8px rgba(240, 163, 168, 0.22);
}
.bento-grid .stat-card.b-kpi .kpi-footer[data-status="alert"]::before {
content: "↓";
}
.bento-grid .stat-card.b-kpi .kpi-footer[data-status="info"] {
color: #64748b;
}
.bento-grid .stat-card.b-kpi .kpi-footer[data-status="info"]::before {
content: "↑";
opacity: 0;
}
.bento-grid .stat-card.b-kpi .kpi-footer[data-status="steady"] {
color: #64748b;
}
.bento-grid .stat-card.b-kpi .kpi-footer[data-status="steady"]::before {
content: "→";
opacity: 1;
}
/* Chiffre seul, surbrillance (même emplacement que l’ancienne pastille) */
.bento-grid .stat-card.b-kpi .delta {
margin: 0;
padding: 4px 10px;
border-radius: var(--radius-xs);
font-size: 0.8125rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text-strong);
background: color-mix(in srgb, var(--accent-bright) 42%, transparent);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-theme="dark"] .bento-grid .stat-card.b-kpi .delta {
background: color-mix(in srgb, var(--text-strong) 12%, transparent);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* ---------- RDV list ---------- */
.rdv-item {
border: 1px solid var(--border) !important;
background: var(--surface);
border-radius: var(--radius-sm) !important;
padding: 14px 16px !important;
margin-bottom: 10px;
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.rdv-item:hover {
border-color: rgba(110, 102, 92, 0.32) !important;
transform: translateY(-1px);
box-shadow: 0 8px 22px -16px rgba(15, 23, 42, 0.25);
}
.rdv-time {
color: var(--accent-deep);
font-weight: 500;
font-size: 0.75rem;
background: var(--accent-soft);
padding: 6px 10px;
border-radius: var(--radius-pill);
width: max-content;
height: max-content;
align-self: flex-start;
}
.rdv-time--stacked {
align-items: stretch;
text-align: left;
}
.rdv-time-inner--stacked {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
}
.rdv-time-date {
font-size: 0.68rem;
font-weight: 600;
line-height: 1.25;
opacity: 0.9;
}
.rdv-time-hm {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.rdv-time--date-only {
font-size: 0.7rem;
font-weight: 600;
line-height: 1.3;
max-width: 7rem;
white-space: normal;
text-align: center;
}
.rdv-body h4 {
font-size: 0.875rem; /* text-sm — titres liste comme noms en tableau */
font-weight: 500;
color: var(--text-strong);
letter-spacing: -0.01em;
margin: 0 0 2px;
}
.rdv-meta {
font-size: 0.75rem;
font-weight: 400;
color: var(--text-muted);
}
/* sync-pill quand utilisée dans rdv-meta : variante mini, pas la grosse pill assistant */
.rdv-meta .sync-pill {
background: var(--success-soft);
border: 1px solid rgba(110, 102, 92, 0.2);
color: var(--accent-deep);
padding: 1px 8px;
font-size: 0.68rem;
}
.rdv-meta .sync-pill::before {
display: none;
}
.rdv-actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 6px;
align-items: center;
justify-content: flex-end;
}
/* Boutons icône RDV : même taille (profil = discret, récap = .btn-rdv-file nacré) */
.rdv-actions .btn-rdv-icon {
box-sizing: border-box;
width: 2.375rem;
min-width: 2.375rem;
height: 2.375rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
white-space: nowrap;
}
.rdv-actions .btn-rdv-icon.btn-secondary {
border-radius: 50%;
background: rgba(15, 23, 42, 0.04);
border: 1px solid var(--border);
color: var(--text-muted);
}
.rdv-actions .btn-rdv-icon.btn-secondary:hover {
background: rgba(15, 23, 42, 0.09);
color: var(--text-strong);
}
html[data-theme="dark"] .rdv-actions .btn-rdv-icon.btn-secondary {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(255, 255, 255, 0.08);
color: #cbd5e1;
}
html[data-theme="dark"] .rdv-actions .btn-rdv-icon.btn-secondary:hover {
background: rgba(148, 163, 184, 0.22);
color: #f8fafc;
}
/* Fiche contact (icône profil) : fond discret type onglet sidebar + teinte KPI */
.rdv-actions .btn-rdv-icon.btn-rdv-contact-fiche {
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 22%,
rgba(255, 255, 255, 0.01) 52%,
rgba(255, 255, 255, 0) 100%
);
color: #a9b5cf;
box-shadow: none;
filter: drop-shadow(0 1px 3px rgba(211, 216, 227, 0.18));
}
.rdv-actions .btn-rdv-icon.btn-rdv-contact-fiche:hover {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 22%,
rgba(255, 255, 255, 0.02) 52%,
rgba(255, 255, 255, 0) 100%
);
color: #d3d8e3;
filter: drop-shadow(0 0 5px rgba(184, 195, 234, 0.22));
}
html[data-theme="light"] .rdv-actions .btn-rdv-icon.btn-rdv-contact-fiche {
border-color: rgba(15, 23, 42, 0.12);
background: linear-gradient(
90deg,
rgba(15, 23, 42, 0.08) 0%,
rgba(15, 23, 42, 0.035) 30%,
rgba(15, 23, 42, 0) 100%
);
color: #475569;
filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.06));
}
html[data-theme="light"] .rdv-actions .btn-rdv-icon.btn-rdv-contact-fiche:hover {
background: linear-gradient(
90deg,
rgba(15, 23, 42, 0.12) 0%,
rgba(15, 23, 42, 0.05) 35%,
rgba(15, 23, 42, 0) 100%
);
color: #1e293b;
}
/* Récap (icône fichier) : fond discret, peu de reflet (moins « brillant » que l’ancien nacré). */
.btn-rdv-icon.btn-rdv-file {
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--accent-bright) 22%, rgba(255, 255, 255, 0.08));
background:
linear-gradient(
145deg,
color-mix(in srgb, var(--accent-bright) 28%, transparent) 0%,
color-mix(in srgb, var(--accent-strong) 18%, transparent) 42%,
transparent 72%
),
linear-gradient(
118deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.02) 35%,
rgba(255, 255, 255, 0) 100%
);
color: #7d8aa3;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent-bright) 12%, transparent) inset,
0 1px 0 rgba(255, 255, 255, 0.03) inset;
filter: none;
}
.btn-rdv-icon.btn-rdv-file:hover {
background:
linear-gradient(
145deg,
color-mix(in srgb, var(--accent-bright) 36%, transparent) 0%,
color-mix(in srgb, var(--accent-strong) 26%, transparent) 44%,
transparent 74%
),
linear-gradient(
118deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 38%,
rgba(255, 255, 255, 0) 100%
);
color: #9aa6bd;
filter: none;
}
html[data-theme="light"] .btn-rdv-icon.btn-rdv-file {
border-color: color-mix(in srgb, var(--accent-strong) 22%, rgba(15, 23, 42, 0.12));
background:
linear-gradient(
145deg,
color-mix(in srgb, var(--accent-bright) 26%, transparent) 0%,
color-mix(in srgb, var(--accent) 16%, transparent) 48%,
transparent 78%
),
linear-gradient(
90deg,
rgba(15, 23, 42, 0.05) 0%,
rgba(15, 23, 42, 0.02) 40%,
rgba(15, 23, 42, 0) 100%
);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent-strong) 14%, transparent) inset,
0 1px 0 rgba(255, 255, 255, 0.28) inset;
color: #57534e;
filter: none;
}
html[data-theme="light"] .btn-rdv-icon.btn-rdv-file:hover {
background:
linear-gradient(
145deg,
color-mix(in srgb, var(--accent-bright) 36%, transparent) 0%,
color-mix(in srgb, var(--accent-strong) 24%, transparent) 50%,
transparent 78%
),
linear-gradient(
90deg,
rgba(15, 23, 42, 0.07) 0%,
rgba(15, 23, 42, 0.03) 42%,
rgba(15, 23, 42, 0) 100%
);
color: #292524;
}
.rdv-actions .btn-rdv-icon .rdv-action-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: block;
}
.rdv-actions a.btn-rdv-icon {
text-decoration: none;
}
/* Récap : comportement JS via .js-rdv-recap ; rendu fichier via .btn-rdv-file */
.btn-recap {
background: var(--accent-bright);
color: var(--text-strong);
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: var(--radius-pill);
font-weight: 600;
}
html[data-theme="dark"] .btn-recap {
background: linear-gradient(145deg, var(--accent-strong), var(--accent));
border-color: rgba(255, 255, 255, 0.12);
}
/* ---------- Liste rappels ---------- */
.reminders-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.reminders-list li {
position: relative;
padding: 12px 14px;
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
font-size: 0.875rem;
font-weight: 400;
color: var(--text);
line-height: 1.45;
display: flex;
align-items: flex-start;
gap: 12px;
}
.reminders-list li::before {
content: none;
}
.reminders-list li::marker {
content: "";
}
.reminders-task-tag {
flex: 0 0 110px;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.01em;
padding: 0;
padding-right: 12px;
background: transparent;
border: 0;
border-right: 1px solid var(--border);
border-radius: 0;
}
.reminders-task-tag--today {
color: var(--text-strong);
}
.reminders-task-tag--overdue {
color: #f87171;
}
.reminders-prio {
font-weight: 700;
letter-spacing: 0.02em;
}
.reminders-task-tag--today .reminders-prio--P1 {
color: #f87171;
}
.reminders-task-tag--today .reminders-prio--P2 {
color: #fbbf24;
}
.reminders-task-tag--today .reminders-prio--P3 {
color: #94a3b8;
}
/* ---------- Tables ---------- */
.table-wrap {
overflow-x: auto;
padding: 0 !important;
}
table.data-table {
font-size: 0.875rem;
}
.data-table th {
background: var(--surface-hover);
color: var(--text-muted);
font-size: 0.75rem; /* text-xs */
font-weight: 400;
text-transform: none;
letter-spacing: 0.01em;
border-bottom: 1px solid var(--border);
padding: 14px 18px;
}
/* Page Contacts : refonte « liquid glass » alignée sur la page Tâches. */
#contacts-table thead th,
#contacts-table thead .th-sort-btn {
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* En-tête : transparent + texte accent-bright (même couleur que le label « Tâches en cours »). */
#contacts-table thead th,
#contacts-table thead .th-sort-btn {
background: transparent;
color: var(--accent-bright);
font-size: 0.68rem;
font-weight: 650;
border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
/* Corps : lignes plus aériennes, séparateurs souples. */
#contacts-table tbody td {
background: transparent;
color: var(--text);
border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
#contacts-table tbody tr {
transition: background 0.18s ease;
}
#contacts-table tbody tr:hover {
background: color-mix(in srgb, var(--surface) 38%, transparent);
}
#contacts-table tbody tr:last-child td {
border-bottom: none;
}
/* Séparateurs verticaux en teinte estompée (même rythme que la page Tâches). */
#contacts-table th:not(:last-child),
#contacts-table td:not(:last-child) {
border-right: 1px solid color-mix(in srgb, var(--border) 45%, transparent) !important;
}
/* Bouton « + Ajouter un contact » : même gris que les onglets de la sidebar (var(--text-muted)). */
#contacts-table .th-add-btn {
background: color-mix(in srgb, var(--surface) 55%, transparent);
border-color: color-mix(in srgb, var(--border) 65%, transparent);
color: var(--text-muted);
}
#contacts-table .th-add-btn:hover,
#contacts-table .th-add-btn:focus-visible {
background: color-mix(in srgb, var(--accent) 18%, transparent);
border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
color: var(--text-muted);
}
#contacts-table .filter-dd-trigger--icon {
color: color-mix(in srgb, var(--text) 60%, transparent);
}
#contacts-table .filter-dd--icon.is-open .filter-dd-trigger--icon {
color: var(--accent);
}
/* Popover de recherche : carte en cohérence avec les panneaux des autres filtres. */
#contacts-table .filter-dd-panel--search {
padding: 0;
}
#contacts-table .filter-dd-panel--search .input.search-input {
background: color-mix(in srgb, var(--surface) 70%, transparent);
border: 1px solid transparent;
color: var(--text);
padding: 9px 13px;
border-radius: var(--radius-sm);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
#contacts-table .filter-dd-panel--search .input.search-input:focus {
border-color: transparent;
}
#contacts-table .filter-dd-panel--search:focus-within {
border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
}
/* Séparation visuelle entre colonnes (en-tête + corps), sauf après la dernière. */
#contacts-table th:not(:last-child),
#contacts-table td:not(:last-child) {
border-right: 1px solid var(--border);
}
/* Largeurs : Contact prend tout l'espace restant ; les autres ont une largeur fixe + min-width. */
#contacts-table {
table-layout: auto;
width: 100%;
}
#contacts-table th:nth-child(1),
#contacts-table td:nth-child(1) {
width: 100%;
}
#contacts-table th:nth-child(1) {
overflow: hidden;
}
#contacts-table th[data-sort-col="avancement"],
#contacts-table td:nth-child(2) {
width: 20rem;
min-width: 14rem;
}
#contacts-table th[data-sort-col="rdv"],
#contacts-table td:nth-child(3) {
width: 14rem;
min-width: 12rem;
}
#contacts-table th[data-sort-col="suivi"],
#contacts-table td:nth-child(4) {
width: 14rem;
min-width: 11rem;
}
/* No-wrap strict + ellipsis sur la cellule de la première colonne. */
#contacts-table th,
#contacts-table td {
white-space: nowrap;
}
#contacts-table tbody td:nth-child(1) {
overflow: hidden;
text-overflow: ellipsis;
}
/* Ellipsis sur le bloc nom + e-mail à l'intérieur de la cellule Contact + gap accru avec l'avatar. */
#contacts-table tbody td:nth-child(1) .flex-center {
min-width: 0;
gap: 1.4rem;
}
#contacts-table tbody td:nth-child(1) .flex-center > div {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
padding: 0;
}
#contacts-table tbody td:nth-child(1) .flex-center > div > strong,
#contacts-table tbody td:nth-child(1) .flex-center > div > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
line-height: 1.15;
margin: 0;
padding: 0;
text-indent: 0;
}
/* Couleur du mail uniformément gris (même teinte que les onglets de la sidebar : var(--text-muted)). */
#contacts-table tbody td:nth-child(1) .flex-center > div > span {
color: var(--text-muted) !important;
}
#contacts-table tbody td:nth-child(1) .flex-center > div > br {
display: none;
}
/* Lignes du tableau Contacts : hauteur compacte (l'en-tête garde son padding d'origine). */
#contacts-table tbody td {
padding-top: 8px;
padding-bottom: 8px;
line-height: 1.2;
}
/*
* Disposition en grille 3 slots (cf. .th-cell-content dans app.css).
* Col 2 : titre centré naturellement, filtre dans slot droit.
* Col 1 : on bascule en flex justify-content: flex-end pour caler tout le contenu
* (titre + boutons) à droite, le filtre étant le dernier item, donc collé
* au séparateur droit avec la même marge que la col 2.
* Cols 3 et 4 : pas de wrapper .th-cell-content (button directement enfant du th),
* on centre via le sort-btn lui-même.
*/
#contacts-table th:nth-child(1) .th-cell-content {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0 0 2rem;
width: 100%;
}
#contacts-table th:nth-child(1) .th-cell-content::before {
display: none;
}
/* Cols 3 et 4 : sort-btn (sans wrapper) centré dans la cellule, sort-ind sorti du flux pour
* ne pas décaler le texte centré. */
#contacts-table th[data-sort-col="rdv"] > .th-sort-btn,
#contacts-table th[data-sort-col="suivi"] > .th-sort-btn {
position: relative;
width: 100%;
justify-content: center;
text-align: center;
}
#contacts-table th[data-sort-col="rdv"] > .th-sort-btn > .sort-ind,
#contacts-table th[data-sort-col="suivi"] > .th-sort-btn > .sort-ind {
position: absolute;
right: 0.6rem;
top: 50%;
transform: translateY(-50%);
}
/* Col 1 : décale le filtre lifecycle vers la droite (espace avec la loupe). */
#contacts-table th:nth-child(1) .th-icon-actions--end .filter-dd--lifecycle {
margin-left: 1.2rem;
}
/* Col 1 : popovers (loupe + filtre lifecycle) ancrés au bord droit de la cellule entière,
pour qu'ils apparaissent toujours sous le groupe d'icônes (jamais à hauteur du th). */
#contacts-table th:nth-child(1) {
position: relative;
overflow: visible;
}
#contacts-table th:nth-child(1) .filter-dd--icon {
position: static !important;
}
#contacts-table th:nth-child(1) .filter-dd-panel {
position: absolute !important;
top: 100% !important;
margin-top: 6px !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
}
#contacts-table th:nth-child(1) .filter-dd-panel--search {
width: 18rem;
}
/* Centrage des badges/dates pour les colonnes 2, 3, 4 (corps).
* Les en-têtes sont déjà centrés naturellement par la grille 3 slots. */
#contacts-table tbody td:nth-child(n + 2) {
text-align: center;
}
.data-table td {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
color: var(--text);
font-weight: 400;
}
.data-table tbody tr {
transition: background 0.12s ease;
}
.data-table tbody tr:hover {
background: var(--surface-hover);
}
.data-table strong {
font-weight: 500; /* noms type “Kristin Watson” */
color: var(--text-strong);
}
/* ---------- Avatars ---------- */
.avatar-sm {
background: var(--accent-soft);
color: var(--accent-deep);
font-weight: 600;
border: 1px solid rgba(110, 102, 92, 0.18);
}
/* ---------- Badges ---------- */
.badge {
font-weight: 500;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 0.75rem;
}
.badge-prospect {
background: rgba(217, 119, 6, 0.12);
color: #b45309;
}
.badge-client {
background: var(--success-soft);
color: var(--success);
}
.badge-rdv {
background: rgba(37, 99, 235, 0.1);
color: var(--info);
}
/* ---------- Inputs ---------- */
.input,
.select,
.textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"] {
background: var(--surface);
border: 1px solid var(--border-strong);
color: var(--text);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 0.875rem;
font-family: inherit;
}
.input:focus,
.select:focus,
.textarea:focus,
input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(110, 102, 92, 0.18);
outline: none;
}
.input::placeholder,
.select::placeholder,
.textarea::placeholder,
input::placeholder,
textarea::placeholder {
color: var(--input-placeholder) !important;
-webkit-text-fill-color: var(--input-placeholder) !important;
opacity: 1;
}
.input::-webkit-input-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: var(--input-placeholder) !important;
-webkit-text-fill-color: var(--input-placeholder) !important;
opacity: 1;
}
.input::-moz-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
color: var(--input-placeholder) !important;
opacity: 1;
}
/* Pas de halo vert global sur l’input topbar */
.topbar-search input:focus {
box-shadow: none;
}
/* ---------- Toolbar ---------- */
.toolbar {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 20px !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
margin-bottom: var(--gap) !important;
gap: 12px;
display: flex;
align-items: center;
flex-wrap: wrap;
box-shadow: var(--shadow);
}
/* ---------- Tabs (Tâches) ---------- */
.tabs,
.tasks-card .tasks-main-tabs {
background: var(--surface-hover) !important;
border: 1px solid var(--border) !important;
padding: 4px !important;
border-radius: var(--radius-pill) !important;
}
.tab,
.tasks-card .tasks-main-tabs .tab {
color: var(--text-muted) !important;
background: transparent !important;
}
.tab.active,
.tasks-card .tasks-main-tabs .tab.active {
background: var(--surface) !important;
color: var(--text-strong) !important;
box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.15) !important;
}
.sub-tab {
color: var(--text-muted);
}
.sub-tab.active {
color: var(--accent-deep);
background: var(--accent-soft);
}
/* Page Tâches : libellés d’onglets en capitales (sans toucher aux autres .tab / .sub-tab) */
#view-tasks .tasks-card .tasks-main-tabs .tab {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.68rem;
}
#view-tasks .sub-tabs .sub-tab {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.64rem;
}
.tasks-add-type-pill {
background: var(--surface);
border-color: var(--border-strong);
color: var(--text-muted);
}
.tasks-add-type-pill.is-active {
background: var(--accent-soft);
color: var(--accent-deep);
border-color: rgba(110, 102, 92, 0.28);
}
/* ---------- Onglet Tâches (hiérarchie type v2-backup + shell Lukana) ---------- */
#view-tasks {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
/* Largeur fixe colonne « catégorie » (Feedback / Rappel ou emplacement vide) */
--task-rel-pill-col: 6.1rem;
/* Pastille P1/P2/P3 en ligne + libellé « P » nouveau rappel : mêmes métriques */
--task-prio-row-fs: 0.78rem;
--task-prio-row-fw: 750;
--task-prio-row-ls: 0.02em;
--task-prio-row-lh: 1.2;
}
/* Bande KPI Tâches : même chrome que les cartes Aujourd’hui (.stat-card.b-kpi) */
#view-tasks .tasks-kpi-strip.bento-grid {
/* 1/2 « Tâches en cours », 1/4 « Par priorité », 1/4 échéances / retard */
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto;
gap: 16px;
margin-bottom: var(--gap);
width: 100%;
}
#view-tasks .tasks-kpi-strip.bento-grid > .b-kpi,
#view-tasks .tasks-kpi-strip.bento-grid > .b-kpi:nth-child(1),
#view-tasks .tasks-kpi-strip.bento-grid > .b-kpi:nth-child(2),
#view-tasks .tasks-kpi-strip.bento-grid > .b-kpi:nth-child(3) {
grid-column: auto;
grid-row: auto;
}
#view-tasks .tasks-kpi-strip > .stat-card.b-kpi {
grid-template-rows: auto minmax(0, 1fr);
min-height: 90px !important;
padding: 18px 22px 11px 22px !important;
gap: 7px !important;
}
/* Titres des cases : même couleur que h3.card-title (ex. Prochains rendez-vous) */
#view-tasks .tasks-kpi-strip > .stat-card.b-kpi .label {
color: var(--accent-bright);
}
#view-tasks .tasks-kpi-strip > .stat-card.b-kpi:nth-child(1) .tasks-kpi-main-head {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.65rem 2.7rem;
width: 100%;
min-width: 0;
}
#view-tasks .tasks-kpi-strip > .stat-card.b-kpi:nth-child(1) .tasks-kpi-main-head .label {
margin: 0;
flex: 0 1 auto;
min-width: 0;
}
#view-tasks .tasks-kpi-strip > .stat-card.b-kpi:nth-child(1) .tasks-kpi-main-head .tasks-kpi-cat-head {
flex: 0 0 auto;
margin: 0;
margin-left: 0.75rem;
text-align: left;
white-space: nowrap;
color: var(--text-muted);
}
/* Carte coupée en deux : mêmes .label que les autres KPI (alignés à gauche), trait au milieu. */
#view-tasks .tasks-kpi-strip > .stat-card.b-kpi#tasks-kpi-overdue-card {
display: flex !important;
flex-direction: column;
gap: 0 !important;
}
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-duo {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-duo-pane {
flex: 1 1 0;
min-height: 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 7px;
}
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-metric-mid + .tasks-kpi-duo-pane {
margin-top: 0.70rem;
}
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-duo-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-metric-mid {
flex: 0 0 0.76rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-metric-mid::after {
content: "";
width: min(78%, 12.5rem);
height: 1px;
background: color-mix(in srgb, var(--border) 82%, transparent);
}
html[data-theme="dark"] #view-tasks .tasks-kpi-strip .tasks-kpi-metric-mid::after {
background: color-mix(in srgb, var(--border) 62%, transparent);
}
#view-tasks .tasks-kpi-strip .tasks-kpi-open-row {
display: flex;
flex-direction: row;
align-items: flex-end;
flex-wrap: nowrap;
gap: 0;
min-height: 2.65rem;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-open-total {
flex: 0 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-right: 0.65rem;
min-width: 0;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-open-total .value {
margin: 0;
line-height: 1;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-open-sep {
flex: 0 0 1px;
width: 1px;
align-self: stretch;
min-height: 2.5rem;
background: color-mix(in srgb, var(--border) 85%, transparent);
margin-left: 4.35rem;
margin-right: 1.75rem;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-open-cat {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.35rem;
}
/* Même couleur que .bento-grid .stat-card.b-kpi .label (ex. Contacts, Aujourd’hui) */
#view-tasks .tasks-kpi-strip .tasks-kpi-cat-head {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.2;
color: var(--text-muted);
}
#view-tasks .tasks-kpi-strip .tasks-kpi-cat-body {
display: flex;
flex-direction: row;
align-items: flex-end;
flex-wrap: wrap;
gap: 0.55rem 1.45rem;
transform: translateY(-0.28rem);
}
#view-tasks .tasks-kpi-strip .tasks-kpi-cat-body .tasks-kpi-cat-value.value {
flex: 0 0 auto;
flex-shrink: 0;
margin: 0;
line-height: 1;
font-size: 1.85rem !important;
min-height: 1.85rem !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
background-color: transparent !important;
background-image: linear-gradient(
120deg,
#d3d8e3 0%,
#cfd5e0 30%,
#a9b5cf 49%,
#95a2c4 51%,
#cfd5e0 70%,
#d3d8e3 100%
) !important;
background-repeat: no-repeat !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-share {
flex: 1 1 0;
flex-shrink: 1;
min-width: 0;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.28rem;
justify-content: flex-end;
padding-bottom: 0.08rem;
}
@media (max-width: 520px) {
#view-tasks .tasks-kpi-strip .tasks-kpi-open-row {
flex-wrap: wrap;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-open-sep {
display: none;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-open-total {
padding-right: 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
margin-bottom: 0.5rem;
width: 100%;
}
}
#view-tasks .tasks-kpi-strip .tasks-kpi-share-bar {
height: 7px;
border-radius: 999px;
background: color-mix(in srgb, var(--border) 72%, transparent);
overflow: hidden;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-share-fill {
position: relative;
height: 100%;
width: 0%;
min-width: 0;
border-radius: inherit;
background-color: #2a3340;
background-image: linear-gradient(
102deg,
hsla(0, 0%, 100%, 0) 48%,
hsla(330, 48%, 96%, 0.14) 72%,
hsla(168, 38%, 95%, 0.12) 84%,
hsla(265, 42%, 97%, 0.11) 100%
),
linear-gradient(
90deg,
#2a3340 0%,
#323e4d 16%,
#3d4a5a 30%,
#4f5d6e 44%,
#6c7a89 56%,
#909ca8 66%,
#b4bcc6 76%,
#d2d8df 84%,
#e6e9ed 91%,
#f0f2f5 97%,
#f4f5f7 100%
);
background-blend-mode: soft-light, normal;
transition: width 0.28s ease;
}
@keyframes tasks-kpi-fill-shine-pulse {
0%,
100% {
opacity: 0.94;
filter: brightness(1);
}
50% {
opacity: 1;
filter: brightness(1.04);
}
}
#view-tasks .tasks-kpi-strip .tasks-kpi-share-fill::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: clamp(10px, 34%, 26px);
height: 100%;
border-radius: 0 999px 999px 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.06) 28%,
rgba(255, 255, 255, 0.28) 58%,
rgba(244, 246, 249, 0.52) 85%,
rgba(242, 244, 247, 0.58) 100%
);
box-shadow: 2px 0 10px rgba(255, 255, 255, 0.12);
pointer-events: none;
animation: tasks-kpi-fill-shine-pulse 3.4s ease-in-out infinite;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-share-pct {
font-size: 0.8125rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
align-self: flex-end;
line-height: 1.2;
}
html[data-theme="dark"] #view-tasks .tasks-kpi-strip .tasks-kpi-share-bar {
background: color-mix(in srgb, var(--border) 55%, transparent);
}
html[data-theme="dark"] #view-tasks .tasks-kpi-strip .tasks-kpi-share-fill {
background-color: #1a222c;
background-image: linear-gradient(
102deg,
hsla(0, 0%, 100%, 0) 50%,
hsla(320, 35%, 90%, 0.07) 74%,
hsla(175, 30%, 90%, 0.06) 86%,
hsla(255, 32%, 93%, 0.06) 100%
),
linear-gradient(
90deg,
rgba(26, 34, 44, 0.98) 0%,
rgba(34, 44, 58, 0.95) 18%,
rgba(44, 58, 76, 0.92) 34%,
rgba(62, 80, 102, 0.88) 48%,
rgba(88, 108, 132, 0.82) 58%,
rgba(118, 136, 158, 0.76) 68%,
rgba(154, 170, 188, 0.72) 78%,
rgba(188, 200, 214, 0.76) 86%,
rgba(210, 218, 228, 0.82) 92%,
rgba(226, 232, 238, 0.88) 100%
);
background-blend-mode: soft-light, normal;
}
html[data-theme="dark"] #view-tasks .tasks-kpi-strip .tasks-kpi-share-fill::after {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(230, 236, 242, 0.08) 30%,
rgba(236, 240, 246, 0.26) 62%,
rgba(228, 234, 242, 0.4) 88%,
rgba(226, 232, 240, 0.44) 100%
);
box-shadow: 2px 0 12px rgba(200, 210, 224, 0.14);
}
@media (prefers-reduced-motion: reduce) {
#view-tasks .tasks-kpi-strip .tasks-kpi-share-fill::after {
animation: none;
opacity: 0.9;
}
}
#view-tasks .tasks-kpi-strip .tasks-kpi-metric-row {
display: flex;
flex-direction: row;
align-items: flex-end;
flex-wrap: wrap;
gap: 0.45rem;
min-height: 2.5rem;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-metric-row .value {
margin: 0;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-split-col {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(2.75rem, max-content) auto;
align-items: last baseline;
column-gap: 0.6rem;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-split-col > .value {
justify-self: center;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-split-col > .tasks-kpi-split-title {
justify-self: start;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-nextdue {
padding-right: 0;
}
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-nextdue {
width: 100%;
padding-bottom: 0;
}
/* Chiffres seuls dans la grille 3 col. ; libellés = .label (alignés avec « Par priorité »). */
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-nextdue > .value {
grid-column: 2;
}
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-nextdue > .tasks-kpi-nextdue-unit {
grid-column: 3;
}
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-overdue-inline > .tasks-kpi-overdue-value.value {
grid-column: 2;
}
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-overdue-inline > .tasks-kpi-nextdue-unit--placeholder {
grid-column: 3;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-overdue-inline {
padding-left: 0;
padding-top: 0;
border-top: none;
}
#view-tasks .tasks-kpi-strip #tasks-kpi-overdue-card .tasks-kpi-overdue-inline {
width: 100%;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-split-title {
/* Même couleur que h3.card-title (ex. Prochains rendez-vous) */
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-bright);
line-height: 1.2;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-nextdue-unit--placeholder {
visibility: hidden;
pointer-events: none;
user-select: none;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-nextdue .value,
#view-tasks .tasks-kpi-strip .tasks-kpi-overdue-inline .tasks-kpi-overdue-value.value {
font-size: 1.75rem !important;
min-height: 1.75rem !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-nextdue-unit {
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.2;
margin-left: 0.18rem;
}
#view-tasks #tasks-kpi-overdue-card.is-alert .tasks-kpi-overdue-value {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: #fca5a5 !important;
color: #fca5a5 !important;
text-shadow: 0 0 10px rgba(252, 165, 165, 0.3) !important;
}
html[data-theme="dark"] #view-tasks #tasks-kpi-overdue-card.is-alert .tasks-kpi-overdue-value {
-webkit-text-fill-color: #fda4af !important;
color: #fda4af !important;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-prio-counts {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
gap: 0.65rem;
min-height: 2.5rem;
width: 100%;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-prio-item {
flex: 1;
min-width: 0;
display: inline-flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
gap: 0.2rem;
}
/* Libellés P1–P3 : dégradés par priorité (anciennement sur les chiffres). */
#view-tasks .tasks-kpi-strip .tasks-kpi-prio-key {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.2;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent;
background-repeat: no-repeat;
}
#view-tasks .tasks-kpi-strip .tasks-kpi-prio-item:nth-child(1) .tasks-kpi-prio-key {
background-image: linear-gradient(
120deg,
color-mix(in srgb, var(--danger-soft) 88%, #fce8e8) 0%,
color-mix(in srgb, var(--danger) 52%, #f0d0d0) 42%,
color-mix(in srgb, var(--danger) 62%, #e0b0b0) 100%
);
}
#view-tasks .tasks-kpi-strip .tasks-kpi-prio-item:nth-child(2) .tasks-kpi-prio-key {
background-image: linear-gradient(
120deg,
#f7ecd4 0%,
#e8c078 32%,
#d4923a 50%,
#e8c078 68%,
#f7ecd4 100%
);
}
#view-tasks .tasks-kpi-strip .tasks-kpi-prio-item:nth-child(3) .tasks-kpi-prio-key {
background-image: linear-gradient(
120deg,
color-mix(in srgb, var(--text-muted) 58%, #8b9cb8) 0%,
color-mix(in srgb, var(--text-muted) 68%, #647896) 45%,
color-mix(in srgb, var(--text-muted) 76%, #4a5a72) 100%
);
}
html[data-theme="dark"] #view-tasks .tasks-kpi-strip .tasks-kpi-prio-item:nth-child(1) .tasks-kpi-prio-key {
background-image: linear-gradient(
120deg,
color-mix(in srgb, var(--danger) 58%, #ffe8e8) 0%,
color-mix(in srgb, var(--danger) 72%, #ffb4b4) 48%,
color-mix(in srgb, var(--danger) 78%, #f87171) 100%
);
}
html[data-theme="dark"] #view-tasks .tasks-kpi-strip .tasks-kpi-prio-item:nth-child(2) .tasks-kpi-prio-key {
background-image: linear-gradient(
120deg,
#f5e0b8 0%,
#eab862 36%,
#d97706 50%,
#eab862 64%,
#f5e0b8 100%
);
}
html[data-theme="dark"] #view-tasks .tasks-kpi-strip .tasks-kpi-prio-item:nth-child(3) .tasks-kpi-prio-key {
background-image: linear-gradient(
120deg,
color-mix(in srgb, var(--text-muted) 52%, #b8c8e0) 0%,
color-mix(in srgb, var(--text-muted) 62%, #8fa3c4) 45%,
color-mix(in srgb, var(--text-muted) 70%, #6b7fa0) 100%
);
}
/* Chiffres : même dégradé métal que .bento-grid .stat-card.b-kpi .value (« Tâches en cours »). */
#view-tasks .tasks-kpi-strip .tasks-kpi-prio-num {
font-size: 1.75rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent;
background-repeat: no-repeat;
background-image: linear-gradient(
120deg,
#d3d8e3 0%,
#cfd5e0 30%,
#a9b5cf 49%,
#95a2c4 51%,
#cfd5e0 70%,
#d3d8e3 100%
);
}
@media (max-width: 900px) {
#view-tasks .tasks-kpi-strip.bento-grid {
grid-template-columns: 1fr;
}
}
#view-tasks .tasks-primary-seg {
border-bottom: 1px solid var(--border);
margin-bottom: 0;
padding-bottom: 1rem;
}
#view-tasks .tasks-card > .tab-panel {
padding-top: 1.1rem;
}
#view-tasks .tasks-inline-new-row {
border-radius: var(--radius-sm);
/* Pas de padding/marge horizontale : même largeur utile que les lignes de tâches (alignement P / date). */
}
/* En-tête colonne date : aligné avec la ligne « Afficher : » · P1 P2 P3 */
#view-tasks .sub-panel .task-list-header-row {
margin-top: -1.05rem;
align-items: center;
}
#view-tasks .task-list-header-due {
text-align: left;
transform: translateY(-0.95rem);
}
/* Lignes & en-tête : 5 colonnes (pro / perso). Relationnel : + colonne catégorie. */
#view-tasks .sub-panel .task-list-header-row,
#view-tasks .sub-panel .task-row--layout {
grid-template-columns: 18px minmax(0, 1fr) 3.75rem 9rem 2rem;
}
#view-tasks .tab-panel[data-panel="relationnel"] .sub-panel .task-list-header-row,
#view-tasks .tab-panel[data-panel="relationnel"] .sub-panel .task-row--layout {
grid-template-columns:
18px var(--task-rel-pill-col) minmax(0, 1fr) 3.75rem 9rem 2rem;
/* Moins d’air entre la pastille Feedback/Rappel et l’intitulé qu’entre les autres colonnes */
column-gap: 0.42rem;
}
/*
* Ligne « Nouveau rappel… » : départ sous la case (pas de colonne catégorie vide),
* mêmes largeurs P / date / × que le reste du panneau relationnel.
*/
#view-tasks .tab-panel[data-panel="relationnel"] .sub-panel .tasks-inline-new-row[data-task-inline-sub="rel-rappel"].task-row--layout {
grid-template-columns:
18px minmax(0, 1fr) minmax(0, 3.75rem) minmax(0, 9rem) minmax(0, 2rem);
column-gap: 0.42rem;
}
#view-tasks .tab-panel[data-panel="relationnel"] .tasks-inline-new-row[data-task-inline-sub="rel-rappel"] .task-category-slot {
display: none;
}
/* Priorité « Nouvelle tâche / rappel » : « P » (même échelle que .task-priority-row-badge) + chevron ; pas de cadre arrondi */
#view-tasks .tasks-inline-new-row .task-inline-new-prio-shell {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.28rem;
padding: 0.28rem 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
box-sizing: border-box;
width: auto;
max-width: 100%;
min-width: 0;
}
#view-tasks .tasks-inline-new-row .task-inline-new-prio-shell:hover .task-inline-new-p-letter {
color: var(--text);
}
#view-tasks .tasks-inline-new-row .task-inline-new-p-letter {
color: var(--text-muted);
font-weight: var(--task-prio-row-fw);
font-size: var(--task-prio-row-fs);
line-height: var(--task-prio-row-lh);
letter-spacing: var(--task-prio-row-ls);
text-transform: uppercase;
}
/*
* Colore le "P" de la ligne « nouvelle tâche » selon la priorité sélectionnée
* sur le