/* =====================================================================
   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 */
  --bg: #f4f5f7;
  --bg-canvas: #f4f5f7;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f9fafb;
  --surface-strong: #ffffff;

  /* Borders */
  --border: rgba(15, 23, 42, 0.06);
  --border-glass: rgba(15, 23, 42, 0.06);
  --border-strong: rgba(15, 23, 42, 0.1);

  /* Texte — proche des dashboards type “Financial Overview” */
  --text: #1a1a1a;
  --text-strong: #111827;
  --text-muted: #6b7280;
  --text-soft: #9ca3af;

  /* Accent — blanc nacré sombre (gris perle chaud) */
  --accent: #6b6560;
  --accent-strong: #55504b;
  --accent-deep: #2c2a27;
  --accent-soft: #f0ebe4;
  --accent-bright: #c9c2b7;
  --accent-bright-2: #b0a89c;
  --accent-dim: rgba(107, 101, 96, 0.14);

  /* Statuts */
  --success: #6b6560;
  --success-soft: #ede8e2;
  --warning: #d97706;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --info: #2563eb;

  /* Géométrie */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-pill: 999px;

  /* Ombres */
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 12px 30px -14px rgba(15, 23, 42, 0.18);
  --shadow-sidebar: 1px 0 0 rgba(15, 23, 42, 0.04);

  --sidebar-w: 240px;
  --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: #a8b4c4;
}

/* ---------- Mode sombre (tokens) ---------- */
html[data-theme="dark"] {
  /* Fond : gris très sombre (quasi noir), surfaces légèrement relevées pour hiérarchie */
  --bg: #0a0b0c;
  --bg-canvas: #0a0b0c;
  --bg-elevated: #101214;
  --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: #64748b;

  /* 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 : dégradé linéaire uniquement sous la sidebar (x=0 → bord droit barre),
   puis fond plat (--bg-canvas) sur toute la zone contenu (plus de fondu dans la page). */
@media (min-width: 961px) {
  html[data-theme="dark"] body:has(.app-layout .sidebar:not(.sidebar--collapsed)) {
    background: linear-gradient(
      90deg,
      var(--shell-gradient-edge) 0,
      var(--bg-canvas) var(--sidebar-w)
    );
    background-attachment: fixed;
  }

  html[data-theme="dark"] body:has(.app-layout .sidebar.sidebar--collapsed) {
    background: linear-gradient(
      90deg,
      var(--shell-gradient-edge) 0,
      var(--bg-canvas) var(--sidebar-w-collapsed)
    );
    background-attachment: fixed;
  }

  html[data-theme="dark"] .app-layout .sidebar {
    background: transparent;
    border-right: none;
  }
}

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: #06080d;
}

/* 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='13.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='3.5' y='13.5' width='7' height='7' rx='1.5'/><rect x='13.5' y='13.5' width='7' height='7' rx='1.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='13.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='3.5' y='13.5' width='7' height='7' rx='1.5'/><rect x='13.5' y='13.5' width='7' height='7' rx='1.5'/></svg>");
}
/* Tâches : carré + coche */
.nav-link[data-route="tasks"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='17' height='17' rx='2'/><path d='M8 12.5l2.8 2.8L16 9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='17' height='17' rx='2'/><path d='M8 12.5l2.8 2.8L16 9'/></svg>");
}
.nav-link[data-route="contacts"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.7'/><path d='M5 20.5c1.3-3.6 4.1-5.5 7-5.5s5.7 1.9 7 5.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.7'/><path d='M5 20.5c1.3-3.6 4.1-5.5 7-5.5s5.7 1.9 7 5.5'/></svg>");
}
.nav-link[data-route="agenda"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 9.5h17'/><path d='M8 3v3.5'/><path d='M16 3v3.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 9.5h17'/><path d='M8 3v3.5'/><path d='M16 3v3.5'/></svg>");
}
/* Monitoring : axe en L + courbe vers le haut */
.nav-link[data-route="monitoring"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19h16'/><path d='M4 19V6'/><path d='M6 16.5l4-6.5 4 4 6-8'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19h16'/><path d='M4 19V6'/><path d='M6 16.5l4-6.5 4 4 6-8'/></svg>");
}
/* Équipe : silhouette + petit plus à droite */
.nav-link[data-route="team"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='3.2'/><path d='M3.5 20.5c1.1-3.2 3.2-4.8 5.5-4.8s4.4 1.6 5.5 4.8'/><path d='M18.5 8.5V13'/><path d='M16 10.75h5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='3.2'/><path d='M3.5 20.5c1.1-3.2 3.2-4.8 5.5-4.8s4.4 1.6 5.5 4.8'/><path d='M18.5 8.5V13'/><path d='M16 10.75h5'/></svg>");
}
/* 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 7.5 12 12l8.5-4.5'/><path d='M3.5 12 12 16.5l8.5-4.5'/><path d='M3.5 16.5 12 20.5l8.5-4.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 7.5 12 12l8.5-4.5'/><path d='M3.5 12 12 16.5l8.5-4.5'/><path d='M3.5 16.5 12 20.5l8.5-4.5'/></svg>");
}
/* É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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 9.5h17'/><path d='M8 3v3.5'/><path d='M16 3v3.5'/><circle cx='12' cy='15' r='1.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 9.5h17'/><path d='M8 3v3.5'/><path d='M16 3v3.5'/><circle cx='12' cy='15' r='1.5'/></svg>");
}
.nav-link[data-route="settings"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/></svg>");
}

.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 pill */
.topbar-profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: var(--radius-pill);
  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: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.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;
}

/* ---------- 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;
}

.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;
}

.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.1);
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.07) 0%,
    rgba(15, 23, 42, 0.03) 30%,
    rgba(15, 23, 42, 0) 100%
  );
  color: #95a2c4;
  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.1) 0%,
    rgba(15, 23, 42, 0.04) 35%,
    rgba(15, 23, 42, 0) 100%
  );
  color: #64748b;
}

/* 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) 18%, rgba(15, 23, 42, 0.1));
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent-bright) 22%, transparent) 0%,
      color-mix(in srgb, var(--accent) 14%, transparent) 48%,
      transparent 78%
    ),
    linear-gradient(
      90deg,
      rgba(15, 23, 42, 0.04) 0%,
      rgba(15, 23, 42, 0.015) 40%,
      rgba(15, 23, 42, 0) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 12%, transparent) inset,
    0 1px 0 rgba(255, 255, 255, 0.28) inset;
  color: #7c8aad;
  filter: none;
}

html[data-theme="light"] .btn-rdv-icon.btn-rdv-file:hover {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent-bright) 30%, transparent) 0%,
      color-mix(in srgb, var(--accent-strong) 20%, transparent) 50%,
      transparent 78%
    ),
    linear-gradient(
      90deg,
      rgba(15, 23, 42, 0.06) 0%,
      rgba(15, 23, 42, 0.025) 42%,
      rgba(15, 23, 42, 0) 100%
    );
  color: #64748b;
}

.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;
}

.reminders-list li::before {
  content: none;
}

.reminders-list li::marker {
  content: "";
}

.reminders-task-tag {
  display: inline-block;
  width: 110px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0;
  margin-right: 12px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  vertical-align: 1px;
}

.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 color-mix(in srgb, var(--border) 70%, 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: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* 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;
}

/* 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 <select> frère, en réutilisant les mêmes dégradés que la vignette
 * KPI « Par priorité » (.tasks-kpi-prio-key).
 */
#view-tasks .tasks-inline-new-row .task-inline-new-prio-shell:has(.task-inline-new-priority[data-priority]) .task-inline-new-p-letter {
  color: transparent;
  background-color: transparent;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#view-tasks .tasks-inline-new-row .task-inline-new-prio-shell:has(.task-inline-new-priority[data-priority="P1"]) .task-inline-new-p-letter {
  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-inline-new-row .task-inline-new-prio-shell:has(.task-inline-new-priority[data-priority="P2"]) .task-inline-new-p-letter {
  background-image: linear-gradient(
    120deg,
    #f7ecd4 0%,
    #e8c078 32%,
    #d4923a 50%,
    #e8c078 68%,
    #f7ecd4 100%
  );
}

#view-tasks .tasks-inline-new-row .task-inline-new-prio-shell:has(.task-inline-new-priority[data-priority="P3"]) .task-inline-new-p-letter {
  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-inline-new-row .task-inline-new-prio-shell:has(.task-inline-new-priority[data-priority="P1"]) .task-inline-new-p-letter {
  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-inline-new-row .task-inline-new-prio-shell:has(.task-inline-new-priority[data-priority="P2"]) .task-inline-new-p-letter {
  background-image: linear-gradient(
    120deg,
    #f5e0b8 0%,
    #eab862 36%,
    #d97706 50%,
    #eab862 64%,
    #f5e0b8 100%
  );
}

html[data-theme="dark"] #view-tasks .tasks-inline-new-row .task-inline-new-prio-shell:has(.task-inline-new-priority[data-priority="P3"]) .task-inline-new-p-letter {
  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%
  );
}

/* Le "P" hover ne réécrase plus la couleur (sinon il redevient gris uni) */
#view-tasks .tasks-inline-new-row .task-inline-new-prio-shell:has(.task-inline-new-priority[data-priority]):hover .task-inline-new-p-letter {
  color: transparent;
  filter: brightness(1.1);
}

#view-tasks .tasks-inline-new-row .task-inline-new-priority {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 0;
  border: none;
  border-radius: inherit;
  cursor: pointer;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  filter: none;
  font: inherit;
}

#view-tasks .tasks-inline-new-row .task-inline-new-priority:hover {
  filter: none;
}

#view-tasks .tasks-inline-new-row .task-inline-new-prio-shell:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent-strong) 65%, var(--border));
  outline-offset: 2px;
}

html[data-theme="dark"] #view-tasks .tasks-inline-new-row .task-inline-new-priority[data-priority="P1"],
html[data-theme="dark"] #view-tasks .tasks-inline-new-row .task-inline-new-priority[data-priority="P2"],
html[data-theme="dark"] #view-tasks .tasks-inline-new-row .task-inline-new-priority[data-priority="P3"] {
  background-image: none !important;
  color: var(--text);
}

/* Intitulés : même haut de première ligne (pas centré verticalement dans le bloc) */
#view-tasks .sub-panel .task-row--layout {
  align-items: start;
}

/* Lignes « nouvelle tâche » : P + date (et le reste) centrés sur la hauteur de ligne */
#view-tasks .sub-panel .tasks-inline-new-row.task-row--layout {
  align-items: center;
}

#view-tasks .sub-panel .task-row--layout > .task-check-input {
  margin-top: 0.18rem;
}

#view-tasks .sub-panel .task-row--layout > .tasks-inline-new-cb-slot {
  margin-top: 0;
}

/* Cases à cocher : fond comme la barre d’onglets catégorie (Relationnel / Pro / Perso), pas le blanc natif */
#view-tasks .sub-panel .task-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: var(--surface-hover);
  cursor: pointer;
  accent-color: transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

#view-tasks .sub-panel .task-check-input:hover {
  border-color: color-mix(in srgb, var(--text-muted) 45%, var(--border-strong));
}

#view-tasks .sub-panel .task-check-input:checked {
  background: var(--text-muted);
  border-color: var(--text-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8L7 11.5L12.5 4'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}

#view-tasks .sub-panel .task-check-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-strong) 65%, var(--border));
  outline-offset: 2px;
}

#view-tasks .tab-panel[data-panel="relationnel"] .sub-panel .task-list-header-row .task-list-header-cat {
  justify-self: stretch;
}

#view-tasks .sub-panel .task-list-header-row .task-list-header-pr {
  justify-self: center;
}

#view-tasks .sub-panel .task-row--layout > .task-col--priority {
  justify-self: center;
  padding-top: 0.14rem;
}

#view-tasks .sub-panel .tasks-inline-new-row.task-row--layout > .task-col--priority {
  padding-top: 0;
}

#view-tasks .sub-panel .task-row--layout > .task-col--due {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  padding-top: 0.1rem;
}

#view-tasks .sub-panel .tasks-inline-new-row.task-row--layout > .task-col--due {
  padding-top: 0;
}

/* Ligne « nouvelle tâche » : le host enveloppe .task-due-combo — largeur 100 % comme les lignes où le combo est enfant direct */
#view-tasks .sub-panel .task-row--layout .task-col--due .task-inline-new-due-host {
  width: 100%;
  min-width: 0;
}

/* Colonne catégorie : uniquement onglet Relationnel */
#view-tasks .tab-panel[data-panel="relationnel"] .sub-panel .task-row--layout > .task-category-slot,
#view-tasks .tab-panel[data-panel="relationnel"] .sub-panel .task-row--layout > .task-rel-type-pill {
  justify-self: start;
  align-self: start;
  margin-top: 0.18rem;
  min-width: 0;
}

#view-tasks .tab-panel[data-panel="relationnel"] .sub-panel .task-row--layout > .task-rel-type-pill {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-tasks .tab-panel[data-panel="relationnel"] .sub-panel .task-category-slot {
  pointer-events: none;
}

#view-tasks .sub-panel .task-row--layout > .task-main.task-col--title {
  justify-self: stretch;
  min-width: 0;
  margin-top: 0.18rem;
}

/* Ligne nouvelle tâche : titre sans décalage haut (centrage vertical géré par la ligne) */
#view-tasks .sub-panel .tasks-inline-new-row .task-col--title {
  justify-self: stretch;
  min-width: 0;
  margin-top: 0;
}

/* Intitulés : proche des onglets actifs, légèrement moins lumineux que --text-strong ; pas de 600 (évite « gras » vs onglets) */
#view-tasks .sub-panel .task-title,
#view-tasks .sub-panel .task-title-input-inline {
  color: color-mix(in srgb, var(--text-strong) 72%, var(--text) 28%);
  font-weight: 500;
}

#view-tasks .sub-panel .task-inline-new-grid {
  color: color-mix(in srgb, var(--text-strong) 72%, var(--text) 28%);
}

#view-tasks .sub-panel .task-inline-new-title::placeholder {
  color: var(--text-muted);
}

#view-tasks .sub-panel .task-row--layout > .task-row-actions,
#view-tasks .sub-panel .task-row--layout > .tasks-inline-new-actions-slot {
  padding-top: 0.12rem;
}

#view-tasks .sub-panel .tasks-inline-new-row.task-row--layout > .tasks-inline-new-actions-slot {
  padding-top: 0;
}

#view-tasks .tasks-previous-card {
  border-radius: var(--radius) !important;
}

/* ---------- Tâches : couleurs alignées Aujourd’hui + sidebar (tokens) ---------- */
#view-tasks .task-priority-filter-hint {
  color: var(--text-muted);
}

#view-tasks .task-priority-filter-pills,
#view-tasks .task-col--priority .task-priority-pills {
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

#view-tasks .task-priority-filter-pill,
#view-tasks .task-col--priority .task-priority-pill {
  color: var(--text);
}

#view-tasks .task-priority-filter-pill.is-active[data-priority="P1"],
#view-tasks .task-col--priority .task-priority-pill[data-priority="P1"].is-active {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  color: var(--text-strong);
}

#view-tasks .task-priority-filter-pill.is-active[data-priority="P2"],
#view-tasks .task-col--priority .task-priority-pill[data-priority="P2"].is-active {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
  color: var(--text-strong);
}

#view-tasks .task-priority-filter-pill.is-active[data-priority="P3"],
#view-tasks .task-col--priority .task-priority-pill[data-priority="P3"].is-active {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  border-color: color-mix(in srgb, var(--text-muted) 28%, var(--border));
  color: var(--text-strong);
}

#view-tasks .task-priority-filter-pill:focus-visible,
#view-tasks .task-col--priority .task-priority-pill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-strong) 65%, var(--border));
  outline-offset: 2px;
}

/*
 * Priorité (ligne + select « nouvelle tâche ») : mêmes dégradés que .tasks-kpi-prio-key
 * (carte KPI « Par priorité »).
 */
#view-tasks .task-priority-row-badge,
#view-tasks .task-inline-new-priority {
  margin: 0;
  font: inherit;
  font-weight: var(--task-prio-row-fw);
  font-size: var(--task-prio-row-fs);
  letter-spacing: var(--task-prio-row-ls);
  text-transform: uppercase;
  line-height: var(--task-prio-row-lh);
  padding: 0.28rem 0.45rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#view-tasks .task-priority-row-badge {
  min-width: 2.4rem;
}

#view-tasks .task-inline-new-priority {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#view-tasks .task-priority-row-badge[data-priority="P1"],
#view-tasks .task-inline-new-priority[data-priority="P1"] {
  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 .task-priority-row-badge[data-priority="P2"],
#view-tasks .task-inline-new-priority[data-priority="P2"] {
  background-image: linear-gradient(
    120deg,
    #f7ecd4 0%,
    #e8c078 32%,
    #d4923a 50%,
    #e8c078 68%,
    #f7ecd4 100%
  );
}

#view-tasks .task-priority-row-badge[data-priority="P3"],
#view-tasks .task-inline-new-priority[data-priority="P3"] {
  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 .task-priority-row-badge[data-priority="P1"],
html[data-theme="dark"] #view-tasks .task-inline-new-priority[data-priority="P1"] {
  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 .task-priority-row-badge[data-priority="P2"],
html[data-theme="dark"] #view-tasks .task-inline-new-priority[data-priority="P2"] {
  background-image: linear-gradient(
    120deg,
    #f5e0b8 0%,
    #eab862 36%,
    #d97706 50%,
    #eab862 64%,
    #f5e0b8 100%
  );
}

html[data-theme="dark"] #view-tasks .task-priority-row-badge[data-priority="P3"],
html[data-theme="dark"] #view-tasks .task-inline-new-priority[data-priority="P3"] {
  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%
  );
}

#view-tasks .task-priority-row-badge:hover,
#view-tasks .task-inline-new-priority:hover {
  filter: brightness(1.1);
}

#view-tasks .task-priority-row-badge:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-strong) 65%, var(--border));
  outline-offset: 2px;
}

#view-tasks .task-inline-new-priority:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-strong) 65%, var(--border));
  outline-offset: 2px;
}

#view-tasks .task-pri-row-pop {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-hover);
}

#view-tasks .task-pri-row-opt.is-current {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--accent-soft);
  color: var(--accent-deep);
}

#view-tasks .task-pri-row-opt:hover {
  background: color-mix(in srgb, var(--accent-soft) 85%, var(--surface-hover));
}

/* Échéance : contrôle discret (fond plat, bordure neutre) */
#view-tasks .task-due-trigger,
.task-add-due-host .task-due-trigger {
  color: var(--text);
  gap: 0.28rem;
  padding: 0.28rem 0.42rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
  filter: none;
}

#view-tasks .task-due-trigger:hover,
.task-add-due-host .task-due-trigger:hover {
  filter: none;
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--surface-hover) 55%, transparent);
}

html[data-theme="light"] #view-tasks .task-due-trigger,
html[data-theme="light"] .task-add-due-host .task-due-trigger {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-hover) 35%, transparent);
  box-shadow: none;
}

html[data-theme="light"] #view-tasks .task-due-trigger:hover,
html[data-theme="light"] .task-add-due-host .task-due-trigger:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

#view-tasks .task-due-icon,
.task-add-due-host .task-due-icon {
  color: var(--text-muted);
}

#view-tasks .task-due-value,
.task-add-due-host .task-due-value {
  color: var(--text);
  font-weight: 500;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

#view-tasks .task-due-chevron,
.task-add-due-host .task-due-chevron {
  color: var(--text-muted);
  opacity: 0.65;
}

/* ---------- Calendrier d’échéance (pop) : sobre ---------- */
.task-cal-backdrop {
  background: color-mix(in srgb, var(--text-strong) 8%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html[data-theme="dark"] .task-cal-backdrop {
  background: color-mix(in srgb, #0a0b0c 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.task-cal-pop {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 0.85rem 0.95rem 0.75rem;
}

html[data-theme="dark"] .task-cal-pop {
  background: var(--surface);
  border-color: var(--border);
}

.task-cal-title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

.task-cal-nav {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.task-cal-nav:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.task-cal-dow {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.task-cal-day {
  min-height: 34px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.task-cal-day:hover {
  background: color-mix(in srgb, var(--surface-hover) 85%, transparent);
  border-color: transparent;
}

.task-cal-day--muted {
  color: var(--text-soft);
  opacity: 0.45;
  background: transparent;
}

.task-cal-day--muted:hover {
  background: color-mix(in srgb, var(--surface-hover) 50%, transparent);
  opacity: 0.65;
}

.task-cal-day.is-today {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.task-cal-day.is-selected {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-strong);
  font-weight: 600;
}

.task-cal-daynum {
  font-weight: 500;
  font-size: 0.8rem;
}

.task-cal-dot {
  background: var(--text-muted);
  box-shadow: none;
}

.task-cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: 0.15rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}

.task-cal-foot-r {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

/* Effacer / Annuler / Appliquer : hauteur totale identique (box + bordure) */
.task-cal-foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 2.25rem;
  min-height: 2.25rem;
  max-height: 2.25rem;
  padding: 0 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  border-radius: var(--radius-sm);
  border-width: 1px;
  border-style: solid;
}

.task-cal-foot .btn:not(.btn-primary) {
  background: var(--surface);
  color: var(--text-muted);
  border-color: var(--border-strong);
}

.task-cal-foot .btn:not(.btn-primary):hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Appliquer : hérite du .btn-primary global ; typo compacte + capsule comme .rdv-time--date-only */
.task-cal-foot .btn.btn-primary {
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  line-height: 1.3;
  letter-spacing: 0;
}

#view-tasks .tasks-inline-new-row:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

#view-tasks .task-inline-new-icon {
  border-color: color-mix(in srgb, var(--text-muted) 45%, var(--border));
}

#view-tasks .task-delete-btn:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

#view-tasks .task-inline-rel-pill {
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text);
}

#view-tasks .task-inline-rel-pill.is-active {
  border-color: rgba(110, 102, 92, 0.35);
  background: var(--accent-soft);
  color: var(--accent-deep);
}

#view-tasks .task-rel-type-pill {
  border: 1px solid var(--border);
}

#view-tasks .task-rel-type-pill--feedback {
  color: var(--accent-deep);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

#view-tasks .task-rel-type-pill--rappel {
  color: #243447;
  background: linear-gradient(120deg, #e6eef8 0%, #b8cbe3 45%, #5f7a96 100%);
  border-color: color-mix(in srgb, #5f7a96 40%, #b8cbe3);
}

html[data-theme="dark"] #view-tasks .task-rel-type-pill--rappel {
  color: #e4eef8;
  background: linear-gradient(
    120deg,
    rgba(198, 214, 236, 0.28) 0%,
    rgba(130, 158, 196, 0.22) 48%,
    rgba(36, 58, 88, 0.62) 100%
  );
  border-color: rgba(140, 170, 210, 0.4);
}

#view-tasks .task-rel-type-pill--appel {
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--info) 12%, transparent);
  border-color: color-mix(in srgb, var(--info) 30%, var(--border));
}

#view-tasks .task-rel-type-pill--visu {
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

#view-tasks .task-meta--rel-fb {
  color: var(--text-muted);
}

#view-tasks .task-pill-rel {
  background: var(--success-soft);
  color: var(--accent-deep);
}

#view-tasks .task-pill-pro {
  background: color-mix(in srgb, var(--info) 14%, transparent);
  color: var(--info);
}

#view-tasks .task-pill-global {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-deep);
}

#view-tasks .task-pill-equipe {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}

#view-tasks .sub-tabs--pro .sub-tab.active {
  border-color: rgba(110, 102, 92, 0.32);
  background: var(--accent-soft);
  color: var(--accent-deep);
}

#view-tasks .sub-tab:hover {
  background: color-mix(in srgb, var(--surface-hover) 90%, transparent);
}

#view-tasks .tasks-card .tasks-main-tabs .tab.active {
  box-shadow: var(--shadow-soft) !important;
}

#view-tasks .tasks-previous-header {
  border-bottom-color: var(--border);
}

#view-tasks .tasks-previous-chevron {
  border-right-color: var(--text-muted);
  border-bottom-color: var(--text-muted);
}

html[data-theme="dark"] #view-tasks .tasks-card .tasks-main-tabs .tab.active {
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.4) !important;
}

/* ---------- Topbar refresh button ---------- */
.topbar-refresh-btn {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* ---------- Menu toggle (mobile) ---------- */
.menu-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

/* =====================================================================
   Blocs hors .card : même chrome « verre » + typo que l’onglet Aujourd’hui
   (overflow visible pour les menus filtres / dropdowns dans les barres)
   ===================================================================== */

.content .toolbar,
.content .cockpit-page-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  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;
  overflow: visible;
}

.content .cockpit-page-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

html[data-theme="dark"] .content .toolbar,
html[data-theme="dark"] .content .cockpit-page-head {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  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;
}

.content .toolbar::before,
.content .cockpit-page-head::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"] .content .toolbar::before,
html[data-theme="dark"] .content .cockpit-page-head::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;
}

.content .toolbar > *,
.content .cockpit-page-head > * {
  position: relative;
  z-index: 1;
}

/* Titre page Événements : dégradé comme le hero / la topbar */
.cockpit-title {
  color: #bfc5cf;
  background: linear-gradient(120deg, #cfd5de 0%, #b8c0cb 52%, #505763 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cockpit-page-head .meta {
  color: var(--text-muted);
  font-size: var(--fs-page-sub);
  line-height: 1.5;
}

/* En-tête du parcours invitation : micro-titre comme les cartes */
.cockpit-flow-title {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright);
  -webkit-text-fill-color: var(--accent-bright);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.cockpit-flow-head {
  border-bottom-color: var(--border);
}

/* Carte pipeline événements : même verre que le reste du shell (surcharge app.css) */
.main-wrap .card.cockpit-snake-card.cockpit-flow-card {
  background: color-mix(in srgb, var(--surface) 64%, transparent) !important;
  backdrop-filter: blur(14px) saturate(128%);
  -webkit-backdrop-filter: blur(14px) saturate(128%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
  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;
}

html[data-theme="dark"] .main-wrap .card.cockpit-snake-card.cockpit-flow-card {
  background: color-mix(in srgb, var(--surface) 50%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !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;
}

/* Fiche solution : titre principal + sections */
.sol-detail-title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #bfc5cf;
  background: linear-gradient(120deg, #cfd5de 0%, #b8c0cb 52%, #505763 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sol-detail-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 0.75rem;
}

/* Intros (Tâches, Équipe, Paramètres) */
.tasks-page-intro {
  position: relative;
  padding: 12px 16px;
  margin: 0 0 1.25rem;
  max-width: 52rem;
  line-height: 1.55;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 2px 14px -8px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"] .tasks-page-intro {
  border-color: rgba(255, 255, 255, 0.09);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  box-shadow: 0 4px 20px -12px rgba(0, 0, 0, 0.35);
}

/* Liste contacts : ligne de compteur */
.contacts-filter-hint {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* Agenda : période + légende */
.agenda-period-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  color: #bfc5cf;
  background: linear-gradient(120deg, #cfd5de 0%, #b8c0cb 55%, #5c6570 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.agenda-legend {
  padding: 10px 14px;
  margin-bottom: 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    0 2px 12px -8px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset;
  gap: 0.85rem 1.25rem;
}

html[data-theme="dark"] .agenda-legend {
  border-color: rgba(255, 255, 255, 0.09);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  box-shadow:
    0 4px 18px -12px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Segments Jour / Semaine / Mois : pilulier verre (remplace le style accent cyan V1) */
.agenda-view-switch {
  padding: 4px;
  gap: 0.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  box-shadow:
    0 2px 12px -8px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

html[data-theme="dark"] .agenda-view-switch {
  border-color: rgba(255, 255, 255, 0.1);
  background: color-mix(in srgb, var(--surface) 48%, transparent);
  box-shadow:
    0 4px 16px -10px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.agenda-view-switch .btn.btn-ghost {
  margin: 0;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 7px 16px;
  color: var(--text-muted);
  background: transparent;
}

.agenda-view-switch .btn.btn-ghost:hover {
  background: var(--surface-hover);
  color: var(--text-strong);
}

.agenda-view-switch .btn.btn-ghost.is-active {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  box-shadow:
    0 2px 10px -6px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.42) inset,
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

html[data-theme="dark"] .agenda-view-switch .btn.btn-ghost.is-active {
  background: color-mix(in srgb, var(--surface-hover) 92%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 4px 14px -8px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Fiche contact : nom en couleur unie (lisible bord à bord, pas de dégradé) */
#view-contact-detail h2#cd-name.cd-editable {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-strong);
  scroll-margin-top: 80px;
}

/* Pas de double encadré en édition : on laisse l'input gérer son propre focus */
#view-contact-detail h2#cd-name.cd-editing {
  outline: none;
}
#view-contact-detail h2#cd-name.cd-editable:hover {
  outline: none;
}
/* Halo de focus de l'input désactivé pour le nom : un seul trait fin */
#view-contact-detail h2#cd-name.cd-editing .input:focus {
  box-shadow: none;
}

/* Filtres contacts : déclencheurs alignés sur le shell Lukana (plus de dégradé bleu V1) */
.main-wrap .filter-dd-trigger:not(.filter-dd-trigger--icon) {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--border-strong);
  color: var(--text);
  box-shadow:
    0 2px 10px -6px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.main-wrap .filter-dd-trigger:not(.filter-dd-trigger--icon):hover {
  border-color: color-mix(in srgb, var(--accent-bright-2) 55%, var(--border-strong));
  box-shadow: var(--shadow-soft);
}

.main-wrap .filter-dd.is-open .filter-dd-trigger:not(.filter-dd-trigger--icon) {
  border-color: var(--accent-bright-2);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),
    0 8px 24px -12px rgba(15, 23, 42, 0.2);
}

.main-wrap .filter-dd-panel {
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-hover);
}

html[data-theme="dark"] .main-wrap .filter-dd-panel {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.cockpit-mock-banner {
  border-style: solid;
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- Monitoring ---------- */
/* .monitoring-chart-card : plus de surcharge — le chrome « verre » vient des règles .card (bento, !important). */

.monitoring-chart-canvas-wrap {
  background: transparent;
}

/* ---------- Login ---------- */
.login-page {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(185, 242, 76, 0.25), transparent 60%),
    var(--bg-canvas);
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 60px -28px rgba(15, 23, 42, 0.35);
  color: var(--text);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.2);
}

/*
 * Spécificité renforcée : app.css définit aussi .stat-card / .data-table th
 * avec la même spécificité ; ce bloc garantit le rendu Lukana.
 */
.main-wrap .stat-card .hint {
  color: var(--text-muted);
  font-weight: 400;
}

.main-wrap table.data-table th {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.rdv-body .rdv-note {
  margin: 0.5rem 0 0;
  font-size: var(--fs-page-sub);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---------- Ajustements mode sombre (composants à fond fixes / ombres) ---------- */
html[data-theme="dark"] .nav-link.active::after {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .btn-dark {
  background: #e2e8f0;
  color: #0f1419;
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .btn-dark:hover {
  background: #f1f5f9;
}

html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .select:focus,
html[data-theme="dark"] .textarea:focus,
html[data-theme="dark"] input:focus {
  box-shadow: 0 0 0 3px rgba(196, 188, 176, 0.28);
}

html[data-theme="dark"] .tab.active,
html[data-theme="dark"] .tasks-card .tasks-main-tabs .tab.active {
  box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .rdv-item:hover {
  box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

html[data-theme="dark"] .login-card {
  box-shadow: 0 18px 60px -28px rgba(0, 0, 0, 0.65);
}

/* ---------- Responsive sidebar ---------- */
@media (max-width: 960px) {
  .sidebar-collapse-btn {
    display: none;
  }
  .sidebar.sidebar--collapsed {
    width: var(--sidebar-w);
  }
  .sidebar.sidebar--collapsed + .main-wrap {
    margin-left: 0;
  }
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-wrap {
    margin-left: 0;
    padding: 0 16px 24px;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .topbar-search {
    flex: 1 1 140px;
    min-width: 0;
    max-width: none;
    margin-left: auto;
  }
  .topbar-profile-meta {
    display: none;
  }
}

/* =====================================================================
   Harmonisation transverse — toutes les pages partagent le pattern
   « page-hero » + « bento-grid » de Aujourd’hui / Tâches
   ===================================================================== */

/* Variante « bandeau » : distribue les KPI uniformément quel que soit
   le nombre d'enfants (3 sur Contacts, Monitoring, Équipe, Solutions,
   Événements). Annule les positionnements rigides du bento dashboard. */
.bento-grid.bento-grid--strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 16px;
  margin-bottom: var(--gap);
  width: 100%;
}

.bento-grid.bento-grid--strip > .b-kpi,
.bento-grid.bento-grid--strip > .b-kpi:nth-child(1),
.bento-grid.bento-grid--strip > .b-kpi:nth-child(2),
.bento-grid.bento-grid--strip > .b-kpi:nth-child(3),
.bento-grid.bento-grid--strip > .stat-card {
  grid-column: auto;
  grid-row: auto;
}

@media (max-width: 1180px) {
  .bento-grid.bento-grid--strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .bento-grid.bento-grid--strip {
    grid-template-columns: 1fr;
  }
}

/* Hero — fiche contact : avatar + nom + pills */
.page-hero--contact {
  align-items: center;
}
.page-hero--contact .page-hero-contact-text {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.page-hero--contact .page-hero-avatar {
  width: 56px;
  height: 56px;
  font-size: 1.2rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-hero--contact .page-hero-contact-id {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  min-width: 0;
}

.page-hero--contact .page-hero-contact-id h1 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.page-hero--contact .page-hero-contact-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Hero — détail solution : titre + pills + meta client */
.page-hero--solution .sol-detail-title {
  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--solution .sol-detail-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.page-hero--solution .page-hero-meta {
  margin: 12px 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.page-hero--solution .page-hero-meta-label {
  font-weight: 500;
  margin-right: 4px;
}

.page-hero--solution .page-hero-meta-value {
  color: var(--text-strong);
  font-weight: 600;
}

/* Légende compacte d'agenda intégrée au hero */
.agenda-legend--hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.agenda-legend--hero .agenda-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Page-hero pour Événements : harmonise le select dans les actions */
#view-events .page-hero-actions .cockpit-event-select,
#view-events .page-hero-actions .select {
  min-width: 200px;
  max-width: 280px;
}

/* Le titre h1 du hero ne doit jamais hériter d'un styling de h2 ad-hoc */
.page-hero-text h1 {
  color: var(--text-strong);
}

@media (max-width: 720px) {
  .page-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-hero-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* Tâches — Professionnel : ligne sous-onglets + bouton « ? » à droite */
.sub-tabs-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
  z-index: 60;
}

.sub-tabs-row > .sub-tabs {
  flex: 1 1 auto;
  margin: 0;
}

.sub-tabs-help {
  flex: 0 0 auto;
  position: static;
  display: inline-flex;
  align-items: center;
}

/* Bulle d'aide : étendue sur toute la largeur de la carte parente
   et toujours au premier plan, par-dessus les sous-panneaux suivants. */
.sub-tabs-row .reminders-help-panel--tasks-unified {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  top: calc(100% + 8px);
  z-index: 250;
}

.sub-tabs-row .reminders-help-host.is-expanded .reminders-help-panel--tasks-unified {
  z-index: 250;
}