/* ═══════════════════════════════════════════════════════════
   LETRECO SAAS — Design system (inspiré Securit Expert v6.1)
   Pennylane / Alan / Ledger inspired — app-oriented
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #040253;
  --ink-soft: #1A1A4F;
  --blue: #0a0bf5;
  --blue-light: #6E6FFF;
  --bg: #FFFFFF;
  --bg-app: #FAFAF7;
  --bg-cream: #FBF8F3;
  --bg-mint: #E8F5EE;
  --bg-blue-soft: #EEF0FF;
  --bg-yellow: #FFF6D9;
  --bg-pink: #FDF1F2;
  --bg-lavender: #F2EBFD;
  --bg-warm: #FCF6EE;
  --card: #FFFFFF;
  --line: #ECEAE3;
  --line-soft: #F3F2EC;
  --text: #1A1A2E;
  --text-soft: #4A4A5E;
  --muted: #8A8A95;
  --green: #2D9F5A;
  --orange: #FF8B3D;
  --gold: #FFB400;
  --red: #E5484D;
  --container-max: 1240px;
  --font-display: 'Mitr', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --sidebar-w: 248px;
  --shadow-sm: 0 1px 2px rgba(4, 2, 83, .04);
  --shadow-md: 0 4px 16px -6px rgba(4, 2, 83, .08);
  --shadow-lg: 0 16px 40px -16px rgba(4, 2, 83, .15);
}

* { box-sizing: border-box; margin: 0; padding: 0 }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; display: block }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit }
a { color: inherit; text-decoration: none }

/* ─── App shell ─── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ─── Sidebar ─── */
.sidebar {
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-logo {
  padding: 8px 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.sidebar-logo-mark {
  width: 32px; height: 32px;
  background: var(--ink);
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.sidebar-logo-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.sidebar-logo-text span {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.sidebar-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 16px 10px 6px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-soft);
  transition: all .15s ease;
}
.sidebar-link:hover { background: var(--bg-cream); color: var(--ink) }
.sidebar-link.active {
  background: var(--bg-blue-soft);
  color: var(--blue);
  font-weight: 600;
}
.sidebar-link svg {
  width: 17px; height: 17px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}
.sidebar-link .badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  padding: 2px 7px;
  border-radius: 100px;
}
/* ── Groupe de nav déroulant (Paramètres) ── */
.sidebar-group-toggle { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit }
.sidebar-chevron { width: 14px; height: 14px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; opacity: .6 }
.sidebar-group.open .sidebar-chevron { transform: rotate(180deg) }
.sidebar-subnav { display: none; flex-direction: column; gap: 1px; margin: 2px 0 6px; padding-left: 38px }
.sidebar-group.open .sidebar-subnav { display: flex }
.sidebar-sublink { position: relative; display: block; padding: 7px 11px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; transition: all .15s ease }
.sidebar-sublink::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--line); transition: background .15s }
.sidebar-sublink:hover { background: var(--bg-cream); color: var(--ink) }
.sidebar-sublink.active { background: var(--bg-blue-soft); color: var(--blue); font-weight: 600 }
.sidebar-sublink.active::before { background: var(--blue) }
.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  transition: background .15s ease;
}
.sidebar-user:hover { background: var(--bg-cream) }
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--ink));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.avatar-md { width: 40px; height: 40px; font-size: 14px }
.avatar-lg { width: 56px; height: 56px; font-size: 18px }
.sidebar-user-info {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.sidebar-user-info span {
  display: block;
  font-weight: 500;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Main content ─── */
.main {
  padding: 28px 36px 56px;
  max-width: 1280px;
  width: 100%;
}
/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — sidebar drawer + topbar stack + tables scroll
   Surcharge le comportement desktop sous 1024px.
   ═══════════════════════════════════════════════════════════ */

/* ── Loading skeleton : pulse pour signaler "en chargement" ───
   Utilisé via class .loading-skel ou .loading-skeleton sur les éléments
   qui affichent "—" pendant que la donnée arrive du backend. */
.loading-skel, .loading-skeleton {
  animation: skeletonPulse 1.5s ease-in-out infinite;
  color: var(--muted);
}
@keyframes skeletonPulse {
  0%, 100% { opacity: 1 }
  50% { opacity: 0.45 }
}

/* Burger button (injecté par sidebar.js dans <body>) — caché par défaut */
.mobile-burger {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 110;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 14px -4px rgba(13,32,60,.18);
  cursor: pointer;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.mobile-burger svg { width: 22px; height: 22px; color: var(--ink); fill: none; stroke: currentColor; stroke-width: 2; }
.mobile-burger:active { transform: scale(.96) }

.mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(13,32,60,.45);
  z-index: 99;
  -webkit-tap-highlight-color: transparent;
}
.mobile-overlay.open { display: block }

/* Tablette / mobile : sidebar devient un drawer */
@media (max-width: 1024px) {
  .mobile-burger { display: flex }
  .app { grid-template-columns: 1fr }
  .sidebar {
    display: flex !important;        /* surcharge l'ancien display:none */
    position: fixed;
    top: 0; bottom: 0; left: 0;
    height: 100vh;
    width: min(280px, 86vw);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 100;
    box-shadow: 0 12px 40px rgba(13,32,60,.22);
  }
  .sidebar.open { transform: translateX(0) }
  .main { padding: 64px 18px 24px }
  .main > * { max-width: 100% }
}

/* Topbar : passe en colonne sur tablette + mobile */
@media (max-width: 1024px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
  }
  .topbar-actions, .topbar-actions-pro {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-title h1 { font-size: 22px }
  .topbar-title p { font-size: 13px }
  /* Sélecteur de période : scroll horizontal si trop d'options */
  .seg {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .seg::-webkit-scrollbar { display: none }
}

/* Tables : scroll horizontal sur mobile sans casser les coins arrondis */
@media (max-width: 1024px) {
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .table-card::-webkit-scrollbar { height: 6px }
  .table-card::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px }
  .table-card table { min-width: 600px }
}

/* iPhone (< 600px) : ajustements typo + grilles 1 col */
@media (max-width: 600px) {
  .main { padding: 60px 14px 20px }
  .topbar-title h1 { font-size: 20px }
  .topbar-title p { font-size: 12.5px; margin-top: 2px }
  /* Grilles KPI / hub / panels : tout en 1 col sur mobile */
  .kpi-grid, .kpi-strip, .kpi-row, .stat-grid,
  .hub-grid, .hub-secondary-grid,
  .site-grid, .panel-row,
  .row-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Hub : cartes plus tassées */
  .hub-card, .hub-mini-card { padding: 18px 18px !important }
  /* Sections internes : padding réduit */
  .card, .funnel-card, .funnel-detail, .chart-card, .donut-card,
  .table-card .empty-row { padding: 18px 18px !important }
  /* Modals : prennent (presque) tout l'écran */
  .modal, .login-card { width: 96vw; max-width: 96vw; padding: 24px 18px }
  /* Pagination : empile */
  .pagination { flex-direction: column; gap: 10px; align-items: stretch }
  .pagination > div { justify-content: center }
  /* Logs : la "table" est en réalité un grid 5 colonnes — scroll horizontal */
  #audit-list { overflow-x: auto; -webkit-overflow-scrolling: touch }
  #audit-list::-webkit-scrollbar { height: 6px }
  #audit-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px }
  .log-row { min-width: 600px }
  /* web-clients : KPIs par site card en 2 col */
  .site-kpis { grid-template-columns: repeat(2, 1fr) !important }
  /* Topbar : H1 wrap si nécessaire */
  .topbar-title h1 { word-break: break-word }
}

/* Tablette portrait (600-1024px) : grilles KPI deviennent 2 col au lieu de 4 */
@media (min-width: 601px) and (max-width: 1024px) {
  .kpi-grid, .kpi-strip, .kpi-row,
  .stat-grid, .hub-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .panel-row, .row-2 { grid-template-columns: 1fr !important }
}

/* Drawer email history : pleine largeur sur mobile */
@media (max-width: 600px) {
  .drawer { width: 100vw !important }
  /* Heatmap analytics : scroll horizontal si compressée */
  .donut-card { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .heatmap { min-width: 460px }
  /* Boutons d'actions ligne (⋯ menu) : ouvrent vers le bas-gauche pour éviter le hors-écran */
  .act-menu { right: auto; left: -10px }
}

/* Auth page (login) : passe en 1 col sous 900px */
@media (max-width: 900px) {
  .auth-side { display: none }
  .auth { grid-template-columns: 1fr }
  .auth-main { padding: 30px 18px }
}

/* ─── Topbar ─── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.topbar-title h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.topbar-title p {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}
.topbar-actions { display: flex; gap: 10px; align-items: center }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: none;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(10, 11, 245, .4);
}
.btn-primary:hover {
  background: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(10, 11, 245, .5);
}
.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.btn-outline:hover { background: var(--blue); color: #fff }
.btn-ghost {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--bg-cream); border-color: var(--ink); color: var(--ink) }
.btn-light {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-light:hover { background: var(--bg-cream); border-color: var(--ink) }
.btn-danger {
  background: var(--red);
  color: #fff;
}
.btn-danger:hover { background: #c93d42 }
.btn-sm { padding: 7px 12px; font-size: 12px }
.btn-lg { padding: 13px 22px; font-size: 14px }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px; height: 36px;
  padding: 0;
  gap: 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.btn-icon:hover {
  background: var(--bg-cream);
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(4, 2, 83, .15);
}
.btn-icon:active { transform: translateY(0); box-shadow: none }
.btn-icon svg {
  display: block;
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-icon-sm { width: 30px; height: 30px; border-radius: 8px }
.btn-icon-sm svg { width: 14px; height: 14px }
.btn .arrow { transition: transform .25s ease }
.btn:hover .arrow { transform: translateX(2px) }

/* ─── Tags ─── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-blue-soft);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.01em;
}
.tag-mint { background: var(--bg-mint); color: var(--green) }
.tag-yellow { background: var(--bg-yellow); color: #B8860B }
.tag-lavender { background: var(--bg-lavender); color: #6739D5 }
.tag-pink { background: var(--bg-pink); color: #C73E58 }
.tag-warm { background: var(--bg-warm); color: var(--orange) }
.tag-gray { background: var(--bg-cream); color: var(--text-soft) }
.tag-red { background: #FDECEC; color: var(--red) }
.tag-ink { background: var(--ink); color: #fff }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor }

/* ─── Cards ─── */
/* ── Badge de visibilité (privé / partagé) ── */
.vis-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap; border:1px solid transparent }
.vis-badge svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.vis-private { background:var(--bg-cream); color:var(--muted); border-color:var(--line) }
.vis-shared  { background:var(--bg-mint); color:var(--green); border-color:rgba(45,159,90,.25) }
button.vis-badge { cursor:pointer; font-family:inherit; transition:filter .15s }
button.vis-badge:hover { filter:brightness(.97) }

/* ── Toggle segmenté privé / partagé (explicite) ── */
.vis-switch { display:inline-flex; align-items:center; gap:2px; padding:3px; background:var(--bg-cream); border:1px solid var(--line); border-radius:999px; vertical-align:middle }
.vis-switch button { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:none; background:transparent; color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; border-radius:999px; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s }
.vis-switch button svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.vis-switch button:hover:not(.active) { color:var(--ink) }
.vis-switch button.active { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(4,2,83,.12) }
.vis-switch[data-mode="shared"] button.active { color:var(--green) }
.vis-switch.locked { opacity:1 }
.vis-switch-label { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-right:8px }

/* ── Lignes de réglage (icône + texte + contrôle) ── */
.setting-item { display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid var(--line-soft) }
.card-header + .setting-item { border-top:none; padding-top:6px }
.setting-ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; background:var(--ico-bg, var(--bg-cream)); color:var(--ico-c, var(--muted)) }
.setting-ico svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.setting-main { flex:1; min-width:0 }
.setting-name { font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px }
.setting-note { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.55 }

/* ── Toggle segmenté générique ── */
.seg { display:inline-flex; gap:2px; padding:3px; background:var(--bg-cream); border:1px solid var(--line); border-radius:999px; flex-shrink:0 }
.seg button { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:none; background:transparent; color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; border-radius:999px; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s; white-space:nowrap }
.seg button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.seg button:hover:not(.active) { color:var(--ink) }
.seg button.active { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(4,2,83,.12) }
.seg button.active.tone-green { color:var(--green) }
.seg button.active.tone-red { color:var(--red) }
@media (max-width:600px){ .setting-item { flex-wrap:wrap } .seg { width:100% } .seg button { flex:1; justify-content:center } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.card-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.card-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* ─── Stats cards (KPI) ─── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr } }

.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.stat-card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  margin-bottom: 14px;
}
.stat-card-icon.blue { background: var(--bg-blue-soft); color: var(--blue) }
.stat-card-icon.mint { background: var(--bg-mint); color: var(--green) }
.stat-card-icon.yellow { background: var(--bg-yellow); color: #B8860B }
.stat-card-icon.lavender { background: var(--bg-lavender); color: #6739D5 }
.stat-card-icon.pink { background: var(--bg-pink); color: #C73E58 }
.stat-card-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none }

.stat-card-label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.stat-card-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-card-value small {
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
  font-family: var(--font-body);
  margin-left: 4px;
}
.stat-card-trend {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stat-card-trend.up { color: var(--green) }
.stat-card-trend.down { color: var(--red) }
.stat-card-trend.neutral { color: var(--muted) }

/* ─── Hero card (crédits) ─── */
.hero-credits {
  background: linear-gradient(135deg, var(--ink) 0%, #0a1080 50%, var(--blue) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.hero-credits::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-credits-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
.hero-credits-value {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-credits-value small {
  font-size: 18px;
  opacity: 0.6;
  font-weight: 400;
  margin-left: 6px;
  font-family: var(--font-body);
}
.hero-credits-meta {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hero-credits-meta b { font-weight: 600; opacity: 1 }
.hero-credits .btn-light { z-index: 1 }

/* ─── Tables ─── */
.table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table thead th {
  text-align: left;
  padding: 14px 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-cream);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none }
.table tbody tr { transition: background .15s ease }
.table tbody tr:hover { background: var(--bg-cream) }
.table tbody tr.clickable { cursor: pointer }
.table-cell-main {
  font-weight: 600;
  color: var(--ink);
}
.table-cell-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.table-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ─── Form ─── */
.field {
  margin-bottom: 18px;
}
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.field-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(10, 11, 245, .08);
}
.textarea { resize: vertical; min-height: 100px; font-family: inherit }
.input-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) { .input-group { grid-template-columns: 1fr } }

/* ─── Checkbox / radio ─── */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
}
.check input { display: none }
.check-box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: #fff;
  transition: all .15s ease;
}
.check input:checked + .check-box {
  background: var(--blue);
  border-color: var(--blue);
}
.check input:checked + .check-box::after {
  content: '';
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) translateY(-1px);
}

/* ─── Status pills (envois) ─── */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-sent { background: var(--bg-blue-soft); color: var(--blue) }
.status-delivered { background: var(--bg-mint); color: var(--green) }
.status-accepted { background: var(--bg-mint); color: var(--green) }
.status-refused { background: #FDECEC; color: var(--red) }
.status-ignored { background: var(--bg-warm); color: var(--orange) }
.status-pending { background: var(--bg-yellow); color: #B8860B }
.status-draft { background: var(--bg-cream); color: var(--text-soft) }

/* ─── Search field ─── */
.search {
  position: relative;
  flex: 1;
  max-width: 360px;
}
.search .input {
  padding-left: 38px;
  background: #fff;
  border-radius: 10px;
}
.search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  stroke: var(--muted);
  stroke-width: 1.8;
  fill: none;
  pointer-events: none;
}

/* ─── Empty state ─── */
.empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--muted);
}
.empty h3 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin: 14px 0 6px;
  font-weight: 500;
}
.empty p { font-size: 13.5px; max-width: 380px; margin: 0 auto 18px }

/* ─── Progress bar ─── */
.progress {
  height: 6px;
  background: var(--bg-blue-soft);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  border-radius: 100px;
  transition: width .4s ease;
}
.progress.warn .progress-fill { background: linear-gradient(90deg, var(--orange), var(--gold)) }
.progress.danger .progress-fill { background: linear-gradient(90deg, var(--red), #ff7a7e) }

/* ─── Upload zone ─── */
.dropzone {
  border: 2px dashed var(--line);
  background: var(--bg-cream);
  border-radius: var(--radius-md);
  padding: 40px 24px;
  text-align: center;
  transition: all .2s ease;
  cursor: pointer;
}
.dropzone:hover,
.dropzone.dragover {
  border-color: var(--blue);
  background: var(--bg-blue-soft);
}
.dropzone-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}
.dropzone-icon svg { width: 24px; height: 24px; stroke: var(--blue); stroke-width: 1.8; fill: none }
.dropzone h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.dropzone p { font-size: 13px; color: var(--muted); margin-bottom: 14px }

.file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px }
.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.file-item-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-blue-soft);
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.file-item-info { flex: 1; min-width: 0 }
.file-item-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-item-size {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.file-item-remove {
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .15s ease;
}
.file-item-remove:hover { background: #FDECEC; color: var(--red) }

/* ─── Sections ─── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}

/* ─── Grid utilities ─── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 24px }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-1-2, .grid-2-1 { grid-template-columns: 1fr }
}

/* ─── Steps (timeline LRE) ─── */
.timeline { padding-left: 8px }
.timeline-item {
  position: relative;
  padding: 0 0 22px 32px;
  border-left: 2px solid var(--line);
}
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0 }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
}
.timeline-item.done::before {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--bg-mint);
}
.timeline-item.current::before {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--bg-blue-soft);
  animation: tlPulse 2s ease-in-out infinite;
}
.timeline-item.danger::before {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 4px #FDECEC;
}
@keyframes tlPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--bg-blue-soft) }
  50% { box-shadow: 0 0 0 8px rgba(10, 11, 245, .06) }
}
.timeline-time {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.timeline-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 3px 0;
}
.timeline-desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.5 }

/* ─── Timeline v2 : phases, icônes, étapes futures, métadonnées ─── */

.timeline-v2 { padding-left: 6px }
.timeline-v2 .timeline-item { padding: 0 0 26px 38px; border-left-width: 2px }

/* Le pastille ::before historique est neutralisée : c'est maintenant
   l'élément `.timeline-ico` qui porte le cercle ET l'icône, pour un
   centrage visuellement parfait. */
.timeline-v2 .timeline-item::before { content: none }

.timeline-v2 .timeline-item .timeline-ico {
  position: absolute;
  left: -13px;
  top: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  display: inline-flex;       /* flex centre mieux que grid pour les SVG sans intrinsic size */
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: var(--muted);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
  box-sizing: border-box;
}
.timeline-v2 .timeline-item .timeline-ico svg {
  width: 12px;
  height: 12px;
  display: block;             /* supprime le gap baseline du inline */
  stroke-width: 2.2;
  flex-shrink: 0;
  overflow: visible;
}

.timeline-v2 .timeline-item.done .timeline-ico {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--bg-mint);
  color: #fff;
}
.timeline-v2 .timeline-item.current .timeline-ico {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--bg-blue-soft);
  color: #fff;
  animation: tlPulse 2s ease-in-out infinite;
}
.timeline-v2 .timeline-item.danger .timeline-ico {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 4px #FDECEC;
  color: #fff;
}
.timeline-v2 .timeline-item.planned .timeline-ico {
  background: #fff;
  border: 2px dashed var(--line);
  box-shadow: none;
  color: var(--text-soft);
  opacity: .7;
}
.timeline-v2 .timeline-item.planned .timeline-title { color: var(--text-soft); font-weight: 500 }
.timeline-v2 .timeline-item.planned .timeline-desc { opacity: .85 }
.timeline-v2 .timeline-item.planned { border-left-style: dashed }

/* Bandeau de phase entre groupes d'étapes (ex. « Acheminement », « Acceptation »). */
.timeline-phase {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 12px;
  padding-left: 38px;
  position: relative;
}
.timeline-phase:not(:first-child) { margin-top: 4px }
.timeline-phase::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 30px; height: 1px;
  background: var(--line);
}

/* Métadonnée discrète (« + 1 min », « + 3 h ») affichée à droite du temps. */
.timeline-delta {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: var(--bg-cream);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

/* Petit chip cliquable pour montrer une preuve générée par l'étape. */
.timeline-proof {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 8px 3px 6px;
  background: var(--bg-mint);
  border: 1px solid rgba(45, 134, 71, .18);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: #16662f;
  text-decoration: none;
  transition: background .15s ease;
}
.timeline-proof:hover { background: #d7eede }
.timeline-proof svg { width: 11px; height: 11px }

/* ─── Animation spin pour le bouton Rafraîchir ─── */
.is-spinning svg { animation: btnSpin .8s linear infinite }
.is-flash {
  animation: btnFlash .9s ease;
}
@keyframes btnSpin {
  from { transform: rotate(0) }
  to   { transform: rotate(360deg) }
}
@keyframes btnFlash {
  0%   { box-shadow: 0 0 0 0 rgba(45, 134, 71, .35) }
  60%  { box-shadow: 0 0 0 6px rgba(45, 134, 71, 0) }
  100% { box-shadow: 0 0 0 0 rgba(45, 134, 71, 0) }
}
.timeline-fade-out { transition: opacity .18s ease; opacity: .25 }
.timeline-fade-in  { animation: tlFadeIn .35s ease }
@keyframes tlFadeIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: translateY(0) } }

/* ─── Plan / pricing cards ─── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr } }
.plan {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  transition: all .25s ease;
}
.plan:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg) }
.plan-popular { border-color: var(--blue); box-shadow: 0 16px 40px -16px rgba(10, 11, 245, .25) }
.plan-popular::before {
  content: 'Le plus choisi';
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
}
.plan-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.plan-desc { font-size: 13px; color: var(--muted); margin-bottom: 18px }
.plan-price {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan-price small {
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
  font-family: var(--font-body);
  margin-left: 4px;
}
.plan-unit { font-size: 12.5px; color: var(--muted); margin-top: 6px; margin-bottom: 22px }
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-features li {
  font-size: 13.5px;
  color: var(--text-soft);
  padding-left: 26px;
  position: relative;
}
.plan-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 5px;
  width: 16px; height: 16px;
  background: var(--bg-mint);
  border-radius: 50%;
}
.plan-features li::after {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 4px; height: 7px;
  border: 1.5px solid var(--green);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}
.plan .btn { width: 100% }

/* ─── Activity / list items ─── */
.activity-list { display: flex; flex-direction: column; gap: 4px }
.activity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.activity-item:hover { background: var(--bg-cream) }
.activity-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--bg-blue-soft);
  display: grid;
  place-items: center;
  color: var(--blue);
  flex-shrink: 0;
}
.activity-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none }
.activity-info { flex: 1; min-width: 0 }
.activity-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.activity-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.activity-time {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* ─── Toolbar (filtres) ─── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.toolbar .select {
  width: auto;
  min-width: 160px;
  padding: 9px 32px 9px 14px;
  font-size: 13px;
  background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8A95' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  border-radius: 100px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.toolbar .select:hover { border-color: var(--ink) }

/* ─── Auth pages ─── */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .auth { grid-template-columns: 1fr } }
.auth-side {
  background: linear-gradient(135deg, var(--ink) 0%, #0a1080 100%);
  color: #fff;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-side::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(110, 111, 255, .25), transparent 60%);
  border-radius: 50%;
}
.auth-side::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(10, 11, 245, .35), transparent 60%);
  border-radius: 50%;
}
.auth-side > * { position: relative; z-index: 1 }
.auth-side h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.auth-side p {
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.55;
  max-width: 440px;
}
.auth-side-points { display: flex; flex-direction: column; gap: 12px; margin-top: 36px }
.auth-side-point { display: flex; gap: 12px; align-items: center; font-size: 14px; opacity: 0.95 }
.auth-side-check {
  width: 20px; height: 20px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11px;
}
.auth-main {
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-form {
  width: 100%;
  max-width: 380px;
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.auth-form h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.auth-form > p {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 28px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-foot {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.auth-foot a { color: var(--blue); font-weight: 600 }

/* ─── Banner / alert ─── */
.banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-yellow);
  border: 1px solid #f1d97a;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: #6e5610;
  margin-bottom: 22px;
}
.banner-info {
  background: var(--bg-blue-soft);
  border-color: #c4c6ff;
  color: var(--ink);
}
.banner-success {
  background: var(--bg-mint);
  border-color: #b9dbc6;
  color: #16662f;
}
.banner-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 700;
}
.banner b { font-weight: 600 }

/* ─── Pagination ─── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
}
.pagination-nav { display: flex; gap: 4px }
.pagination-btn {
  min-width: 30px; height: 30px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text-soft);
  cursor: pointer;
}
.pagination-btn:hover { border-color: var(--ink); color: var(--ink) }
.pagination-btn.active { background: var(--ink); color: #fff; border-color: var(--ink) }

/* ─── Misc helpers ─── */
.text-muted { color: var(--muted) }
.text-soft { color: var(--text-soft) }
.text-ink { color: var(--ink) }
.text-green { color: var(--green) }
.text-red { color: var(--red) }
.text-blue { color: var(--blue) }
.fw-600 { font-weight: 600 }
.fw-500 { font-weight: 500 }
.mt-0 { margin-top: 0 }
.mt-1 { margin-top: 8px }
.mt-2 { margin-top: 16px }
.mt-3 { margin-top: 24px }
.mb-0 { margin-bottom: 0 }
.mb-1 { margin-bottom: 8px }
.mb-2 { margin-bottom: 16px }
.mb-3 { margin-bottom: 24px }
.mb-4 { margin-bottom: 32px }
.flex { display: flex }
.flex-col { display: flex; flex-direction: column }
.items-center { align-items: center }
.justify-between { justify-content: space-between }
.gap-2 { gap: 8px }
.gap-3 { gap: 12px }
.gap-4 { gap: 16px }
.w-full { width: 100% }

/* Mobile top header */
.mobile-top {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1024px) {
  .mobile-top { display: flex }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM v3 — composants enrichis
   ═══════════════════════════════════════════════════════════ */

/* App background subtil — texture grain + gradient */
body.app-body {
  background:
    radial-gradient(at 12% 0%, rgba(110, 111, 255, .06), transparent 40%),
    radial-gradient(at 88% 100%, rgba(45, 159, 90, .04), transparent 40%),
    var(--bg-app);
  background-attachment: fixed;
}

/* ─── TOPBAR PREMIUM ─── */
.topbar-pro {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  margin-bottom: 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 247, .85);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}
.crumbs a { color: var(--muted); transition: color .15s ease }
.crumbs a:hover { color: var(--ink) }
.crumbs .sep { opacity: .5 }
.crumbs [aria-current] { color: var(--ink); font-weight: 600 }

.cmdk-trigger {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  color: var(--muted);
  cursor: text;
  transition: all .2s ease;
  box-shadow: 0 1px 3px rgba(4, 2, 83, .04);
}
.cmdk-trigger:hover {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 4px 14px -6px rgba(4, 2, 83, .12);
}
.cmdk-trigger svg { width: 15px; height: 15px; stroke: var(--muted); stroke-width: 1.8; fill: none; flex-shrink: 0 }
.cmdk-trigger .kbd {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  background: var(--bg-cream);
  border-radius: 6px;
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  border: 1px solid var(--line);
}

.topbar-actions-pro {
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.icon-btn:hover {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: none }
.icon-btn .dot-notif {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  background: var(--red);
  border: 2px solid #fff;
  border-radius: 50%;
  animation: notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 72, 77, .6) }
  50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(229, 72, 77, 0) }
}

.topbar-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
  transition: all .2s ease;
}
.topbar-user-pill:hover { border-color: var(--ink); box-shadow: var(--shadow-sm) }
.topbar-user-pill .avatar { width: 28px; height: 28px; font-size: 11px }
.topbar-user-pill-name { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1 }
.topbar-user-pill-name span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; margin-top: 2px }

/* ─── PAGE HEADER (sous le topbar) ─── */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  padding-top: 8px;
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.page-header h1 .gradient {
  background: linear-gradient(135deg, var(--blue) 0%, var(--ink) 60%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.page-header p {
  font-size: 15px;
  color: var(--text-soft);
  margin-top: 8px;
  max-width: 600px;
  line-height: 1.5;
}
.page-header-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.live-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(45, 159, 90, .25);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(45, 159, 90, .25) }
  50% { box-shadow: 0 0 0 6px rgba(45, 159, 90, .08) }
}

/* ─── HERO COCKPIT ─── */
.cockpit-hero {
  position: relative;
  background:
    radial-gradient(at 0% 0%, rgba(110, 111, 255, .4), transparent 50%),
    radial-gradient(at 100% 100%, rgba(10, 11, 245, .35), transparent 55%),
    linear-gradient(135deg, var(--ink) 0%, #0a1080 65%, #1a1a8f 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  margin-bottom: 28px;
  overflow: hidden;
}
.cockpit-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
.cockpit-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 900px) { .cockpit-hero-grid { grid-template-columns: 1fr } }

.cockpit-hero h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.cockpit-hero h2 .accent {
  background: linear-gradient(135deg, #fff, #c4c6ff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cockpit-hero-lead {
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.5;
  max-width: 480px;
  margin-bottom: 22px;
}
.cockpit-quick-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.cockpit-quick-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cockpit-quick-stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cockpit-quick-stat-value small { font-size: 13px; opacity: .55; margin-left: 4px; font-family: var(--font-body); font-weight: 400 }
.cockpit-quick-stat-label {
  font-size: 11.5px;
  opacity: 0.65;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Donut chart side */
.cockpit-donut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.donut-svg { width: 220px; height: 220px; transform: rotate(-90deg); filter: drop-shadow(0 8px 20px rgba(0,0,0,.2)) }
.donut-svg circle.bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 24 }
.donut-svg circle.seg { fill: none; stroke-width: 24; stroke-linecap: butt; transition: stroke-dashoffset 1s ease }
.donut-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}
.donut-center-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.donut-center-label {
  font-size: 11px;
  opacity: 0.65;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.donut-legend-item { display: flex; align-items: center; gap: 8px; opacity: 0.9 }
.donut-legend-item .ld {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.donut-legend-item b { font-weight: 600; margin-left: auto }

/* ─── SERVICE CARD PREMIUM (avec sparkline) ─── */
.svc-pro {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  overflow: hidden;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.svc-pro::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1.5px;
  background: linear-gradient(135deg, transparent 40%, var(--accent, var(--blue)) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.svc-pro:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -20px rgba(4, 2, 83, .25) }
.svc-pro:hover::before { opacity: 1 }

.svc-pro-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.svc-pro-iconbox {
  width: 44px; height: 44px; border-radius: 12px; padding: 7px;
  background: var(--accent-bg, var(--bg-blue-soft));
  flex-shrink: 0;
}
.svc-pro-iconbox img { width: 100%; height: 100%; object-fit: contain }
.svc-pro-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-mint); color: var(--green);
  border-radius: 100px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.svc-pro-live::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: livePulse 2s ease-in-out infinite;
}
.svc-pro-live.warn { background: var(--bg-yellow); color: #B8860B }
.svc-pro-live.warn::before { background: #B8860B }

.svc-pro-name { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em }
.svc-pro-tag { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-top: 2px }

.svc-pro-balance {
  display: flex; align-items: baseline; gap: 6px;
}
.svc-pro-balance-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.svc-pro-balance-unit { font-size: 13px; color: var(--muted); font-weight: 500 }

.svc-pro-sparkline {
  height: 38px; width: 100%;
  margin-top: 4px;
}

.svc-pro-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted);
}
.svc-pro-foot b { color: var(--ink); font-weight: 600 }

.svc-pro-actions { display: flex; gap: 8px; margin-top: 14px }
.svc-pro-actions .btn { flex: 1; justify-content: center; padding: 10px; font-size: 13px }

/* ─── KPI CARD GRADIENT ─── */
.kpi-pro {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  overflow: hidden;
  transition: all .25s ease;
}
.kpi-pro:hover { border-color: var(--ink); box-shadow: var(--shadow-md) }
.kpi-pro-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(10, 11, 245, .12)), transparent 70%);
  pointer-events: none;
}
.kpi-pro-iconwrap {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--icon-bg, var(--bg-blue-soft));
  color: var(--icon-color, var(--blue));
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.kpi-pro-iconwrap svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; fill: none }
.kpi-pro-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
  position: relative; z-index: 1;
}
.kpi-pro-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 8px;
  position: relative; z-index: 1;
}
.kpi-pro-value small { font-size: 15px; color: var(--muted); font-weight: 400; font-family: var(--font-body); margin-left: 4px }
.kpi-pro-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  position: relative; z-index: 1;
}
.kpi-pro-trend {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
}
.kpi-pro-trend.up { background: var(--bg-mint); color: var(--green) }
.kpi-pro-trend.down { background: #FDECEC; color: var(--red) }
.kpi-pro-trend.neutral { background: var(--bg-cream); color: var(--text-soft) }
.kpi-pro-trend-sub { color: var(--muted); font-weight: 500 }

/* ─── ACTIVITY STREAM PREMIUM ─── */
.stream {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stream-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.stream-head-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500; color: var(--ink);
}
.stream-tabs { display: flex; gap: 4px }
.stream-tab {
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
}
.stream-tab.active { background: var(--bg-cream); color: var(--ink) }

.stream-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s ease;
}
.stream-item:hover { background: var(--bg-cream) }
.stream-item:last-child { border-bottom: none }
.stream-item-ico {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ic-bg, var(--bg-blue-soft));
  color: var(--ic-color, var(--blue));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.stream-item-ico svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none }
.stream-item-info { min-width: 0 }
.stream-item-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35 }
.stream-item-title .tag { margin-left: 8px; vertical-align: middle }
.stream-item-meta { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.stream-item-meta .author { display: inline-flex; align-items: center; gap: 5px }
.stream-item-meta .author .avatar { width: 18px; height: 18px; font-size: 9px }
.stream-item-meta .dotsep { width: 3px; height: 3px; background: var(--muted); border-radius: 50%; opacity: .5 }
.stream-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
.stream-item-time { font-size: 11.5px; color: var(--muted); white-space: nowrap }

/* ─── SPARKLINE GENERIC ─── */
.spark { display: block; width: 100%; height: 36px }
.spark-area { fill: var(--spark-color, var(--blue)); fill-opacity: .12 }
.spark-line { fill: none; stroke: var(--spark-color, var(--blue)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.spark-dot { fill: var(--spark-color, var(--blue)) }

/* ─── COMMAND PALETTE ─── */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 2, 83, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 200;
  padding-top: 14vh;
}
.cmdk-overlay.open { display: flex }
.cmdk-modal {
  width: min(92vw, 620px);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -20px rgba(4, 2, 83, .4), 0 0 0 1px rgba(4, 2, 83, .08);
  overflow: hidden;
  animation: cmdkIn .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes cmdkIn {
  from { transform: translateY(-8px) scale(.985); opacity: 0 }
  to { transform: none; opacity: 1 }
}
.cmdk-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.cmdk-input-row svg { width: 18px; height: 18px; stroke: var(--muted); stroke-width: 1.8; fill: none }
.cmdk-input {
  flex: 1;
  border: none;
  font-size: 16px;
  background: transparent;
  outline: none;
  color: var(--text);
  padding: 4px 0;
}
.cmdk-input::placeholder { color: var(--muted) }
.cmdk-esc {
  padding: 3px 8px;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}
.cmdk-list { max-height: 56vh; overflow-y: auto; padding: 8px 0 }
.cmdk-section-label {
  padding: 12px 22px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background .12s ease;
}
.cmdk-item:hover, .cmdk-item.sel { background: var(--bg-blue-soft) }
.cmdk-item-ico {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--bg-cream);
  display: grid; place-items: center;
  color: var(--ink);
}
.cmdk-item-ico svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none }
.cmdk-item-ico img { width: 16px; height: 16px; object-fit: contain }
.cmdk-item-text { flex: 1; min-width: 0 }
.cmdk-item-title { font-size: 13.5px; font-weight: 600; color: var(--ink) }
.cmdk-item-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px }
.cmdk-item-kbd {
  display: inline-flex; gap: 3px;
}
.cmdk-item-kbd kbd {
  padding: 2px 6px;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-soft);
}
.cmdk-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-cream);
  font-size: 11px;
  color: var(--muted);
}
.cmdk-foot .row { display: inline-flex; align-items: center; gap: 14px }
.cmdk-foot kbd {
  padding: 2px 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: 'SF Mono', ui-monospace, monospace;
  font-size: 10.5px;
  margin-right: 2px;
}

/* ─── NOTIFICATIONS DRAWER ─── */
.notif-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 2, 83, .25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  z-index: 180;
}
.notif-overlay.open { display: block }
.notif-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(96vw, 420px);
  background: #fff;
  box-shadow: -20px 0 60px -10px rgba(4, 2, 83, .25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  z-index: 200;
}
.notif-drawer.open { transform: translateX(0) }
.notif-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px;
  border-bottom: 1px solid var(--line);
}
.notif-drawer-head h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.notif-tabs { display: flex; gap: 4px; padding: 14px 22px 0; border-bottom: 1px solid var(--line-soft) }
.notif-tab {
  padding: 8px 4px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-right: 18px;
}
.notif-tab.active { color: var(--ink); border-bottom-color: var(--blue) }
.notif-tab .count { font-size: 10px; padding: 1px 6px; background: var(--blue); color: #fff; border-radius: 100px; margin-left: 4px }
.notif-list { flex: 1; overflow-y: auto; padding: 8px 0 }
.notif-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.notif-item.unread { background: linear-gradient(90deg, var(--bg-blue-soft), #fff 30%) }
.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 11px; top: 24px;
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
}
.notif-item-ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--bg-blue-soft);
  color: var(--blue);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.notif-item-ico svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none }
.notif-item-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4 }
.notif-item-desc { font-size: 12px; color: var(--text-soft); margin-top: 3px; line-height: 1.45 }
.notif-item-time { font-size: 11px; color: var(--muted); margin-top: 6px }
.notif-item-actions { display: flex; gap: 6px; margin-top: 8px }
.notif-item-actions .btn { padding: 5px 10px; font-size: 11.5px }

/* ─── HEATMAP ─── */
.heatmap {
  display: grid;
  grid-template-columns: auto repeat(13, 1fr);
  gap: 3px;
  font-size: 11px;
}
.heatmap-label {
  font-size: 10px;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.heatmap-cell {
  aspect-ratio: 1;
  background: var(--bg-cream);
  border-radius: 3px;
  transition: transform .12s ease;
  cursor: pointer;
}
.heatmap-cell:hover { transform: scale(1.4); z-index: 2 }
.heatmap-cell.l1 { background: var(--bg-blue-soft) }
.heatmap-cell.l2 { background: #c4c6ff }
.heatmap-cell.l3 { background: var(--blue-light) }
.heatmap-cell.l4 { background: var(--blue) }

/* ─── ICONS FOR CARDS / TAGS - subtle ─── */
.tag.tag-live {
  background: linear-gradient(90deg, var(--bg-mint), #d0eed8);
  color: var(--green);
}
.tag.tag-new {
  background: linear-gradient(90deg, var(--bg-yellow), #fdeca8);
  color: #876202;
}

/* ─── ONBOARDING ─── */
.onb-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(at 0% 0%, rgba(110, 111, 255, .08), transparent 40%),
    radial-gradient(at 100% 100%, rgba(45, 159, 90, .05), transparent 40%),
    var(--bg-app);
}
.onb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 36px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(12px);
}
.onb-progress {
  display: flex; gap: 36px; align-items: center;
  font-size: 12.5px;
}
.onb-progress-step {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted);
  font-weight: 500;
}
.onb-progress-step .nb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-cream);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
}
.onb-progress-step.done .nb { background: var(--green); color: #fff; border-color: var(--green) }
.onb-progress-step.done .nb::before { content: '✓' }
.onb-progress-step.done .nb-num { display: none }
.onb-progress-step.current { color: var(--ink); font-weight: 600 }
.onb-progress-step.current .nb { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10, 11, 245, .15) }

.onb-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}
.onb-card {
  width: 100%;
  max-width: 720px;
}
.onb-card h1 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.onb-card h1 .gradient {
  background: linear-gradient(135deg, var(--blue) 0%, var(--ink) 60%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.onb-card-lead {
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1.55;
  margin-bottom: 32px;
  max-width: 560px;
}

.onb-pick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 700px) { .onb-pick-grid { grid-template-columns: 1fr } }
.onb-pick {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  cursor: pointer;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
}
.onb-pick:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-md) }
.onb-pick.on { border-color: var(--blue); background: var(--bg-blue-soft) }
.onb-pick.on::after {
  content: '✓';
  position: absolute;
  top: 14px; right: 16px;
  width: 22px; height: 22px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.onb-pick-ico {
  width: 44px; height: 44px;
  border-radius: 11px;
  padding: 7px;
  flex-shrink: 0;
}
.onb-pick-ico img { width: 100%; height: 100%; object-fit: contain }
.onb-pick-info h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.onb-pick-info p {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.onb-pick-info .price {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 8px;
  display: inline-block;
}

.onb-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ─── INSIGHT CARD (small advisory tooltip-card) ─── */
.insight {
  background: linear-gradient(135deg, #fff, var(--bg-blue-soft));
  border: 1px solid var(--bg-blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.insight-ico {
  width: 24px; height: 24px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
}
.insight strong { color: var(--ink); font-weight: 600 }
.insight a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px }

/* Tooltip plain */
.tt {
  position: relative;
  cursor: help;
  border-bottom: 1px dashed var(--muted);
}
.tt::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  white-space: nowrap;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.tt:hover::after { opacity: 1 }

/* ─── Floating help / chat trigger ─── */
.help-bubble {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--ink));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 28px -6px rgba(10, 11, 245, .5);
  cursor: pointer;
  border: none;
  z-index: 100;
  transition: transform .25s ease;
}
.help-bubble:hover { transform: scale(1.08) translateY(-2px) }
.help-bubble svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 1.8; fill: none }
.help-bubble-badge {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  border: 2px solid #fff;
}

/* Page background variant per page */
.gradient-bg-1 {
  background:
    radial-gradient(at 10% 0%, rgba(110, 111, 255, .12), transparent 35%),
    radial-gradient(at 90% 100%, rgba(45, 159, 90, .08), transparent 35%),
    var(--bg-app);
}

/* Animation pour numbers de KPI */
@keyframes numIn {
  from { opacity: 0; transform: translateY(8px) }
  to { opacity: 1; transform: none }
}
.num-anim { animation: numIn .6s cubic-bezier(.16, 1, .3, 1) backwards }

/* ─── Transitions de page (sidebar nav) ─── */
/* Fade-in doux du contenu principal à l'arrivée + fade-out express
   au clic sur un lien de la sidebar. Respecte prefers-reduced-motion :
   sur les utilisateurs qui désactivent les animations, rien ne joue. */
@media (prefers-reduced-motion: no-preference) {
  main {
    animation: pageFadeIn .28s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform;
  }
  body.is-page-leaving main {
    animation: pageFadeOut .14s ease forwards;
  }
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageFadeOut {
  to   { opacity: 0; transform: translateY(-4px); }
}

/* Bonus : View Transitions API natives sur les navigateurs récents (Chrome
   126+, Safari 17.4+). Si supporté, l'animation est nettement plus fluide
   parce que le navigateur conserve le DOM pendant la transition.
   Fallback transparent sinon (les keyframes ci-dessus prennent le relais). */
@view-transition { navigation: auto; }

/* ─── Card de service "sur devis" : ligne d'actions (bouton + lien) ─── */
.quote-card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.quote-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  padding: 6px 4px;
  border-radius: 4px;
  transition: color .15s ease, transform .15s ease;
}
.quote-card-link:hover {
  color: var(--ink);
}
.quote-card-link:hover svg {
  transform: translate(2px, -2px);
}
.quote-card-link svg {
  width: 12px;
  height: 12px;
  transition: transform .15s ease;
}