/* ── Geist (Phase 0 refonte) — self-hosted variable font ─────────────── */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
 * app-shell.css — cross-page polish + mobile responsive layer (Sprint 31).
 *
 * Loaded AFTER each page's inline <style> block so its rules win via cascade
 * order. Nothing here is !important unless we're deliberately overriding a
 * page-specific desktop rule on mobile.
 *
 * Contents:
 *   1. Extra design tokens (transitions, shadows, elevation, easing)
 *   2. Universal polish: focus rings, hover elevation, skeleton, transitions
 *   3. Mobile responsive rules (≤640px + ≤380px) touching common class names
 *   4. Bottom nav bar (fixed, visible on mobile only)
 *   5. Hamburger menu affordance
 */

/* ── 1. Design tokens — Linear-tier easing + layered shadows + rhythm ──── */
:root {
  /* Easing system — the 3 curves used by Linear, Vercel, Framer.
   * --ease-out: spring-out for enters, hovers, common transitions.
   * --ease-in-out: symmetric long transitions (page changes).
   * --ease-drawer: gentle acceleration for slide-in drawers/sheets.  */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);

  /* Transition durations — asymmetric enter fast / exit slower */
  --transition-fast: 120ms var(--ease-out);
  --transition:      180ms var(--ease-out);
  --transition-slow: 240ms var(--ease-out);
  --transition-exit: 300ms var(--ease-in-out);

  /* Layered shadows — 3-4 HSL-tinted stacks (Josh Comeau palette method).
   * Way more premium than a single flat shadow. Works on dark + light themes.
   * The subtle purple tint (240° hue) makes shadows read as ambient, not
   * "computer black". */
  --shadow-sm:
     0 1px 2px  hsl(240 30% 5% / 0.12),
     0 2px 4px  hsl(240 30% 5% / 0.08);
  --shadow-md:
     0 1px 2px  hsl(240 30% 5% / 0.12),
     0 4px 8px  hsl(240 30% 5% / 0.10),
     0 12px 24px hsl(240 30% 5% / 0.08);
  --shadow-lg:
     0 1px 2px  hsl(240 30% 5% / 0.14),
     0 8px 16px hsl(240 30% 5% / 0.12),
     0 20px 40px hsl(240 30% 5% / 0.10),
     0 32px 64px hsl(240 30% 5% / 0.08);
  --shadow-glow: 0 4px 20px rgba(99, 102, 241, 0.22);
  --shadow-glow-strong: 0 8px 32px rgba(99, 102, 241, 0.35);

  /* Radii scale — 2-radius rule (Linear uses 6/12 for buttons/cards) */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* ── Fonte canonique (Phase 0) ── */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Palette canonique (Phase 0) — valeurs = les dominantes actuelles.
   *    Les pages gardent temporairement leurs :root locaux (memes valeurs) ;
   *    ils seront retires page par page en Phase 2. ── */
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #22263a;
  --border: #2d3148;
  --text: #e8eaf0;
  --muted: #7b84a3;
  --accent: #6366f1;
  --accent-2: #4f46e5;
  --green: #22c55e;  /* vert profit lumineux — unifie (Joni pref, 06-08) */
  --red: #ef4444;
  --amber: #f59e0b;
  --blue: #3b82f6;

  --bottom-nav-h: 64px;
}

/* Tabular numerals everywhere numbers matter — kills jittering in KPIs,
 * P&L tables, timers, prices. Also enables Inter's stylistic sets that
 * fix the 1/l ambiguity and improve legibility of digits at all sizes. */
.kpi-value, .kpi-sub, .kpi .v, .ltv-card .v,
td.num, td.numeric, th.num,
.price, .num, .metric, .count-up,
[class*="tabular"], .cohort-table td,
.pnl-table td:last-child, .products-table td.num, .num-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv11", "ss01";
}

/* Focus-visible rings — keyboard users get an accent halo, mouse users
 * see nothing (kills the ugly Chrome default). Instant "real product"
 * signal without cost. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
  border-radius: 6px;
  transition: outline-offset 120ms var(--ease-out);
}
/* Buttons + inputs get a soft glow instead of a hard outline */
button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
a.btn:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg, #0f1117),
    0 0 0 4px var(--accent, #6366f1);
}

/* Press-scale on any button — 100ms, no wobble. Signals tactility. */
.btn, button.btn, a.btn, .cta-primary, [role="button"] {
  transition: transform 100ms var(--ease-out),
              background-color 160ms var(--ease-out),
              border-color 160ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.btn:active:not(:disabled), button.btn:active:not(:disabled),
a.btn:active, [role="button"]:active {
  transform: scale(0.97);
}

/* ── 1b. Sliding magic underline for top nav (Sprint 32d) ────────────────── */
/* Auto-wired: any <header nav> with 2+ <a> gets an indicator injected by
 * app-shell.js. Rest position: on the currently active link (matched via
 * pathname). Hover: glides smoothly to the hovered link with spring easing.
 * On mouse-leave: snaps back to active. Uses accent gradient + soft shadow.
 */
/* 2026-08-13 — le menu déroulant des stores passait DERRIÈRE le contenu :
   `main/.page` garde un transform résiduel (animation-fill-mode: both) qui crée
   un contexte d'empilement au-dessus du header. On donne au header son propre
   contexte, au-dessus du contenu mais SOUS les modales (100+) et le chat. */
header { position: relative; z-index: 60; }
header nav { position: relative; }
header nav .magic-underline {
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent, #6366f1) 60%, #FFFFFF),
    var(--accent, #6366f1));
  border-radius: 2px;
  transform: translateX(var(--underline-x, 0px));
  width: var(--underline-w, 0px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    width     420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity   220ms ease;
  box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--accent, #6366f1) 50%, transparent);
}
header nav:hover .magic-underline,
header nav.has-active .magic-underline { opacity: 1; }
header nav a {
  position: relative;
  transition: color 200ms ease;
}

/* ── 2. Universal polish ─────────────────────────────────────────────────── */

/* Smoother font rendering on Mac/iOS */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Buttons + links + inputs have consistent motion */
a, button, select, input, textarea,
.btn, .kpi, .kpi-card, .ltv-card, .card, .chip, .pill,
[class*="range-pill"], [class*="menu-item"] {
  transition:
    background-color var(--transition),
    border-color     var(--transition),
    color            var(--transition),
    box-shadow       var(--transition),
    transform        var(--transition-fast),
    opacity          var(--transition);
}

/* Focus rings — visible for keyboard users, invisible for mouse */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg, #0f1117), 0 0 0 4px var(--accent, #6366f1);
  border-radius: 6px;
}
/* Exception : le champ de la barre Ask AI — le CONTENEUR porte le focus
 * (#lp-askbar:focus-within, bordure accent + glow). Halo unique, WCAG ok. */
#lp-askbar input:focus-visible { box-shadow: none; }

/* Card hover: subtle lift + border glow */
/* Lift hover : UNIQUEMENT les petites plaques KPI (retour Amer 08-08) —
   les grands conteneurs (.card : tables, graphes, panneaux) restent immobiles :
   on les LIT, ce ne sont pas des boutons. */
.kpi:hover, .kpi-card:hover, .ltv-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent, #6366f1) 30%, var(--border, #2d3148));
}

/* Buttons: elevation on hover, tactile press */
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Ghost buttons + toolbar selects: border glow instead */
.btn-ghost:hover, .toolbar button:hover, .toolbar select:hover,
select:hover, .range-pill:hover:not(.active) {
  border-color: var(--accent, #6366f1);
  color: var(--text, #e8eaf0);
}

/* Table rows: subtle hover tint */
table tbody tr { transition: background-color var(--transition-fast); }
table tbody tr:hover td { background: color-mix(in srgb, var(--accent, #6366f1) 4%, transparent); }

/* Skeleton shimmer for loading states */
@keyframes skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton, [data-skeleton] {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--surface, #1a1d27) 100%, transparent) 0%,
    color-mix(in srgb, var(--surface2, #22263a) 100%, transparent) 50%,
    color-mix(in srgb, var(--surface, #1a1d27) 100%, transparent) 100%
  );
  background-size: 800px 100%;
  animation: skel-shimmer 1.4s infinite linear;
  color: transparent !important;
  border-radius: 6px;
  user-select: none;
}

/* Empty states: consistent visual weight */
.empty {
  padding: 40px 20px;
  color: var(--muted, #7b84a3);
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}

/* Fade-in for page main content — feels snappier */
@keyframes shell-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
main, .page, .app {
  animation: shell-fade-in 260ms var(--easing-out) both;
}

/* Scrollbar polish (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--border, #2d3148) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: var(--border, #2d3148);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted, #7b84a3); }
*::-webkit-scrollbar-track { background: transparent; }

/* Tap targets ≥ 44px (iOS HIG) — auto-applied on mobile via media query */

/* ── 3. Mobile responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 14px; }

  /* Header: nav becomes hamburger — hide horizontal nav.
     The mobile bottom nav (see section 4) takes over primary navigation. */
  header nav { display: none !important; }
  header {
    padding: env(safe-area-inset-top) 14px 0 !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    height: calc(52px + env(safe-area-inset-top));
    gap: 10px !important;
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  header .logo { font-size: 15px !important; }

  /* Store selector: don't overflow header */
  #store-select {
    max-width: 46vw !important;
    min-width: 0 !important;
    margin-left: auto !important;
    font-size: 12px !important;
  }

  /* Page container: reduced padding + room for bottom nav */
  .page, main.page {
    padding: 16px 12px calc(var(--bottom-nav-h) + 24px) !important;
  }
  main.app {
    padding-bottom: calc(var(--bottom-nav-h) + 24px) !important;
  }
  h1 { font-size: 20px !important; margin-bottom: 4px !important; }
  .subtitle, .sub { font-size: 12px !important; margin-bottom: 16px !important; }

  /* KPI grids: 2 columns (down to ≤380 = 1 column, see below) */
  .ltv-grid, .grid, .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ltv-card, .kpi, .kpi-card {
    padding: 12px !important;
  }
  .ltv-card .v, .kpi .v, .kpi-value {
    font-size: 16px !important;
    letter-spacing: -0.3px;
  }
  .ltv-card .l, .kpi .l, .kpi-label {
    font-size: 10px !important;
  }
  .ltv-card .s, .kpi .s, .kpi-sub {
    font-size: 10px !important;
  }

  /* Toolbar (view selector, filter chips): stack vertically */
  .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .toolbar > div[style*="flex:1"] { display: none; }
  .toolbar select { width: 100%; padding: 8px 10px !important; font-size: 13px !important; min-height: 36px; }
  .toolbar label { width: 100%; display: flex; flex-direction: column; gap: 4px; }

  /* Charts: shorter on phone */
  .chart-wrap, .chart-container {
    height: 240px !important;
  }

  /* Cash Flow slider row: readable on phone */
  .slider-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    font-size: 11px !important;
  }
  .slider-row > span { text-align: center; }
  input[type=range] { width: 100% !important; min-width: 0 !important; }

  /* Tables: enable horizontal scroll on their wrappers */
  .cohort-table-wrap, .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .cohort-table, table {
    font-size: 11px;
  }
  .cohort-table th, .cohort-table td {
    padding: 5px 7px !important;
  }
  table th, table td { padding: 8px 6px !important; }

  /* Section titles: tighter */
  .section-title {
    font-size: 11px !important;
    margin: 18px 0 8px !important;
  }

  /* Modals: full-width, bottom-sheet-ish */
  .modal, .overlay .modal {
    width: 94vw !important;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 14px 14px 8px 8px !important;
  }
  .field input, .field select {
    min-height: 40px;
    font-size: 14px !important;
  }
  .modal-actions { flex-direction: column-reverse; gap: 8px !important; }
  .modal-actions .btn { width: 100%; }

  /* All buttons: min tap target 40px on phone */
  .btn, button.btn, a.btn { min-height: 40px; }
  .btn-sm { min-height: 32px; }

  /* Bottom nav appears */
  .mobile-bottom-nav { display: flex !important; }

  /* Safe-area bottom padding for iOS notches */
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Even narrower — collapse to single-column KPIs */
@media (max-width: 380px) {
  .ltv-grid, .grid, .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .kpi-grid > .kpi-card:last-child:nth-child(odd) { grid-column: auto !important; }
  h1 { font-size: 18px !important; }
}

/* ── 4. Bottom nav (mobile only) ─────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none; /* toggled via @media above */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface, #1a1d27) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border, #2d3148);
  z-index: 40;
  align-items: stretch;
}
.mobile-bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted, #7b84a3);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  min-height: 44px;
  padding: 6px 4px;
}
.mobile-bottom-nav a svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-bottom-nav a[data-active="true"] {
  color: var(--accent, #6366f1);
}
.mobile-bottom-nav a:active {
  background: var(--surface2, #22263a);
}

/* ── 5. Reduced motion respect ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── 6. Native form controls, dark-themed (2026-07-10 polish pass) ────────
 * Selects, time/date pickers, checkboxes and number spinners rendered as
 * WHITE OS defaults on the dark theme (Email reports frequency/timezone,
 * fee inputs' spin buttons, Disabled checkboxes…). color-scheme tells the
 * browser to draw native widgets dark; the rest is explicit theming via
 * the page CSS vars so the light theme keeps working. */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

select,
input[type="time"],
input[type="date"],
input[type="datetime-local"] {
  background: var(--surface, #1a1d27);
  color: var(--text, #e2e8f0);
  border: 1px solid var(--border, #2d3148);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent, #6366f1);
}

/* Number inputs: kill the white spin buttons (fee/cost fields) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── 7. Left sidebar navigation (2026-07-11) ──────────────────────────────
 * TrueProfit/Lifetimely-style fixed left rail, injected by app-shell.js on
 * every merchant page. Desktop only — mobile keeps the bottom nav. The old
 * horizontal header nav is hidden once the sidebar mounts (body gets
 * data-sidebar="1"). Collapsible to icon-only rail; state in localStorage.
 */
:root { --sidebar-w: 216px; --sidebar-w-collapsed: 60px; }

@media (min-width: 641px) {
  body[data-sidebar="1"] { padding-left: var(--sidebar-w); }
  body[data-sidebar="1"].lp-sidebar-collapsed { padding-left: var(--sidebar-w-collapsed); }
  /* Old top nav + duplicated header logo give way to the rail */
  body[data-sidebar="1"] header nav { display: none !important; }
  body[data-sidebar="1"] header .logo { display: none !important; }
}

.lp-sidebar {
  display: none; /* mobile default; shown on desktop below */
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 35;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface, #1a1d27) 88%, var(--bg, #0f1117));
  border-right: 1px solid var(--border, #2d3148);
  padding: 14px 10px 12px;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 200ms var(--ease-drawer);
}
@media (min-width: 641px) { body[data-sidebar="1"] .lp-sidebar { display: flex; } }
body.lp-sidebar-collapsed .lp-sidebar { width: var(--sidebar-w-collapsed); padding: 14px 8px 12px; }

.lp-sidebar .lp-side-brand {
  display: flex; align-items: center;
  min-height: 54px;
  padding: 0 8px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border, #2d3148);
  overflow: hidden; white-space: nowrap;
}
.lp-sidebar .lp-side-brand img { max-height: 54px; width: auto; mix-blend-mode: lighten; }
/* The wordmark is white-on-transparent (designed for dark). In light mode,
 * invert it so it stays visible; hue-rotate keeps the accent purple-ish. */
html[data-theme="light"] .lp-sidebar .lp-side-brand img {
  mix-blend-mode: multiply;
  filter: invert(1) hue-rotate(180deg);
}

.lp-sidebar .lp-side-section {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted, #7b84a3);
  padding: 12px 10px 5px;
  white-space: nowrap; overflow: hidden;
}
body.lp-sidebar-collapsed .lp-side-section { visibility: hidden; height: 8px; padding: 6px 0 0; }

.lp-sidebar .lp-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted, #7b84a3);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden;
  position: relative;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.lp-sidebar .lp-side-item svg {
  width: 17px; height: 17px; flex: 0 0 17px;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Sidebar B validée (08-08) : voyageur de verre au survol (JS) + rail violet
   lumineux sur l'actif — l'identité logo. Le hover statique disparaît au
   profit du voyageur (même physique que curseur segmenté / fantôme calendrier). */
.lp-sidebar .lp-side-item:hover { color: #c6cce4; }
.lp-sidebar .lp-side-item[data-active="true"] {
  color: var(--text, #e8eaf0);
  background: rgba(99, 102, 241, 0.07);
}
.lp-sidebar .lp-side-item[data-active="true"]:hover { color: var(--text, #e8eaf0); }
.lp-sidebar .lp-side-item[data-active="true"]::before {
  content: '';
  position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 2.5px; border-radius: 2px;
  background: var(--accent, #6366f1);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
}
.lp-side-ghost {
  position: absolute; left: 8px; right: 8px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 60%), rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease-out, ease-out);
  z-index: 0;
}
.lp-sidebar .lp-side-item { z-index: 1; }
body.lp-sidebar-collapsed .lp-sidebar .lp-side-item { justify-content: center; padding: 9px 0; gap: 0; }
body.lp-sidebar-collapsed .lp-sidebar .lp-side-item span { display: none; }
body.lp-sidebar-collapsed .lp-sidebar .lp-side-item[data-active="true"]::before { left: -8px; }

.lp-sidebar .lp-side-spacer { flex: 1 1 auto; }

button.lp-side-collapse {
  position: fixed; z-index: 41;
  left: calc(var(--sidebar-w) - 12px); top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--surface, #1a1d27);
  border: 1px solid var(--border, #2d3148);
  /* Chevron violet — en muted il était invisible (Joni 13.08) */
  color: var(--accent, #6366f1); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: left 200ms var(--ease-drawer), border-color 140ms var(--ease-out), color 140ms var(--ease-out), transform 140ms var(--ease-out);
  view-transition-name: lp-collapse;
}
@media (min-width: 641px) { button.lp-side-collapse { display: flex; } }
button.lp-side-collapse:hover { color: var(--text, #e8eaf0); border-color: var(--accent, #6366f1); transform: translateY(-50%) scale(1.12); }
button.lp-side-collapse svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
body.lp-sidebar-collapsed .lp-side-collapse { left: calc(var(--sidebar-w-collapsed) - 12px); }
body.lp-sidebar-collapsed .lp-side-collapse svg { transform: rotate(180deg); }

/* Collapsed rail: tooltip with the label on hover */
body.lp-sidebar-collapsed .lp-sidebar .lp-side-item:hover::after {
  content: attr(data-label);
  position: fixed;
  left: calc(var(--sidebar-w-collapsed) + 6px);
  background: var(--surface2, #22263a);
  border: 1px solid var(--border, #2d3148);
  color: var(--text, #e8eaf0);
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  z-index: 60;
}

/* "New" badge on sidebar items (AI Analyst) */
.lp-side-badge {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--accent, #6366f1), #ec4899);
  border-radius: 999px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: 1px;
}
body.lp-sidebar-collapsed .lp-side-badge { display: none; }

/* ── 8. Floating "Ask AI" bar (2026-07-11) ───────────────────────────────── */
#lp-askbar {
  position: fixed;
  bottom: 18px;
  left: calc(50% + var(--sidebar-w) / 2);
  transform: translateX(-50%);
  z-index: 39;
  display: none;              /* desktop only */
  align-items: center;
  gap: 8px;
  width: min(520px, 44vw);
  background: color-mix(in srgb, var(--surface, #1a1d27) 94%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--border, #2d3148);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  box-shadow: var(--shadow-lg, 0 18px 50px rgba(0,0,0,.45));
  transition: border-color 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (min-width: 641px) { #lp-askbar { display: flex; } }
body.lp-sidebar-collapsed #lp-askbar { left: calc(50% + var(--sidebar-w-collapsed) / 2); }
#lp-askbar:focus-within {
  border-color: var(--accent, #6366f1);
  box-shadow: var(--shadow-glow, 0 4px 20px rgba(99,102,241,.22));
}
#lp-askbar .lp-askbar-spark { color: var(--accent, #6366f1); font-size: 14px; }
#lp-askbar input {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--text, #e8eaf0);
  font-size: 13px; font-family: inherit;
  min-width: 0;
}
#lp-askbar input::placeholder { color: var(--muted, #7b84a3); }
#lp-askbar button {
  background: var(--accent, #6366f1);
  color: #fff; border: none; border-radius: 999px;
  width: 30px; height: 30px; font-size: 14px; cursor: pointer;
  flex: 0 0 30px;
}
#lp-askbar button:hover { filter: brightness(1.12); }

/* ── 9. Notification bell (2026-07-13, feedback Amer #1) ─────────────────── */
#lp-bell-wrap { position: relative; display: inline-flex; align-items: center; }
#lp-bell {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); cursor: pointer;
  color: var(--muted, #7b84a3);
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
  transition: border-color .18s var(--ease-out), color .18s var(--ease-out), transform .1s var(--ease-out);
}
#lp-bell:hover { color: var(--text, #e8eaf0); border-color: rgba(255,255,255,0.22); }
#lp-bell:active { transform: scale(0.95); }
#lp-bell svg {
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
#lp-bell-badge {
  position: absolute; top: 2px; right: 2px;
  background: #ef4444; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
  border-radius: 999px; padding: 3px 5px;
  pointer-events: none;
}
#lp-bell-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 360px; max-height: 440px; overflow-y: auto;
  background: rgba(26, 29, 39, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 50px rgba(0, 0, 0, 0.55);
  /* 2026-08-12 : le widget de chat est en position:fixed z-index 2147483000
     et recouvrait ce panneau (constat de l'audit du 12.08). On passe
     au-dessus plutôt que de bricoler la pile du chat. */
  z-index: 2147483100;
}
.lp-bell-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text, #e8eaf0);
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lp-bell-head button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--accent, #6366f1); font-size: 11.5px; text-transform: none; letter-spacing: 0;
  padding: 2px 4px; border-radius: 6px;
}
.lp-bell-head button:hover:not([disabled]) { background: rgba(99, 102, 241, 0.1); }
.lp-bell-head button[disabled] { opacity: .45; cursor: default; }
.lp-bell-head button.done { color: #4ade80; }
.lp-bell-empty { padding: 22px 16px; color: var(--muted, #7b84a3); font-size: 12.5px; text-align: center; }
.lp-bell-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lp-bell-item:last-child { border-bottom: none; }
.lp-bell-item.unread { background: rgba(99, 102, 241, 0.07); box-shadow: inset 2px 0 0 var(--accent, #6366f1); }
.lp-bell-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #6366f1); flex: none; margin-top: 5px; }
.lp-bell-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.lp-bell-ic svg { display: block; }
.lp-bell-ic.k-ok       { background: rgba(34, 197, 94, 0.12);  border: 1px solid rgba(34, 197, 94, 0.25);  color: #22c55e; }
.lp-bell-ic.k-progress { background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.28); color: #8b8fff; }
.lp-bell-ic.k-warn     { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.25); color: #f59e0b; }
.lp-bell-ic.k-info     { background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.25); color: #60a5fa; }
.lp-bell-title { font-size: 12.5px; font-weight: 600; color: var(--text, #e8eaf0); line-height: 1.4; }
.lp-bell-text { font-size: 11.5px; color: var(--muted, #7b84a3); line-height: 1.45; margin-top: 2px; }
.lp-bell-time { font-size: 10.5px; color: var(--muted, #7b84a3); opacity: .7; margin-top: 3px; }
@media (max-width: 640px) {
  #lp-bell-dropdown { position: fixed; left: 10px; right: 10px; width: auto; top: 60px; }
}

/* Sync badge refresh pulse (feedback Amer #5) — subtle flash on silent refresh */
@keyframes lp-refresh-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  100% { box-shadow: 0 0 0 9px rgba(16,185,129,0); }
}
.sync-dot.lp-pulse { animation: lp-refresh-pulse 900ms var(--ease-out) 1; }

/* Range pills polish (feedback Amer #4) — consistent height, calmer borders */
.range-pill, [class*="range-pill"] {
  font-weight: 500 !important;
  letter-spacing: .1px;
  border-radius: 999px !important;
}


/* ══ PHASE 0 — Fondations refonte (fonte, micro-motion, transitions) ══════ */

/* Fonte partout + chiffres tabulaires (colonnes de montants alignees) */
html, body, button, input, select, textarea {
  font-family: var(--font-sans);
}
body { font-variant-numeric: tabular-nums; }

/* Pressables vivants — feedback 140ms, doctrine <300ms */
button:not(:disabled), .btn, .range-pill, .lp-nav-item {
  transition: transform 140ms var(--ease-out),
              background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              opacity var(--transition-fast);
}
button:not(:disabled):active, .btn:active, .range-pill:active { transform: scale(0.97); }
/* Les <tr role=button> (rangées expandables Campaigns/Orders) ne sont PAS des
   boutons pressables : le scale au :active faisait « vibrer » toute la table
   au mousedown sur les selects de mapping (retour Amer 08-08). */
tr[role="button"]:active { transform: none; }

/* Focus clavier visible (jamais outline:none sans remplacement) */
:focus-visible:not(a, button, input, select, textarea) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* NB focus des champs : c'est a11y.css qui possede l'outline des inputs
 * (regle !important, couleur --focus = accent marque). Pas de double ring ici. */

/* Calendriers natifs sombres + sliders a l'accent de la marque */
input[type="date"] { color-scheme: dark; }
[data-theme="light"] input[type="date"] { color-scheme: light; }
input[type="range"] { accent-color: var(--accent); }

/* View Transitions : bloc phase-0 (fade root complet + translateY = le
   « flash » ressenti par Amer) REMPLACÉ par le bloc shell persistant en fin
   de fichier (sidebar/header nommés, root fade léger 0.55). */
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active, .btn:active, .range-pill:active { transform: none; }
}


/* ══ PHASE 1 — Composants partagés ════════════════════════════════════════ */

/* Select canonique (store selector & co) — chrome custom, comportement natif.
 * Position standard : à gauche, après la nav (margin-left 8px), sur TOUTES les pages. */
.lp-select {
  appearance: none; -webkit-appearance: none;
  margin-left: 8px;
  padding: 6px 30px 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b84a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  color: var(--text);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  max-width: 240px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.lp-select:hover { border-color: var(--accent); }

/* Boutons canoniques — 3 variantes, etats complets. Les defs locales des pages
 * les surchargent encore (retirees page par page en Phase 2). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
/* Danger discret : neutre au repos, le rouge se revele au survol (pattern Linear) */
.btn-danger { background: transparent; border-color: transparent; color: var(--muted); }
.btn-danger:hover { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .4); color: #f87171; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Date-bar canonique — UN composant pour dashboard/P&L (et pills d'Orders).
 * Rangee unique : pills a gauche, plage custom poussee a droite. */
.range-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.range-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.range-pill {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--muted);
  font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.range-pill:hover { border-color: var(--accent); color: var(--text); }
.range-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.custom-range { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.date-input {
  padding: 6px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: 12.5px;
  transition: border-color var(--transition-fast);
}
.date-input:hover { border-color: var(--accent); }
.range-arrow { color: var(--muted); }

/* ── lp-datepicker — sélecteur de plage canonique façon Meta (B1, 2026-08-08) ──
   Un seul contrôle : clic 1 = jour, clic 2 = plage (dans les deux sens),
   clic suivant = nouvelle sélection. Update applique, Cancel ferme. */
.lp-dp-anchor { position: relative; display: inline-flex; }
.lp-dp-trigger { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 13px; padding: 8px 14px; cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color .15s var(--ease-out, ease-out); }
.lp-dp-trigger:hover { border-color: var(--accent); }
.lp-dp-trigger svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.lp-dp-pop { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.45); padding: 16px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none; transition: opacity .16s var(--ease-out, ease-out), transform .16s var(--ease-out, ease-out); }
.lp-dp-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.lp-dp-months { display: flex; gap: 20px; }
.lp-dp-month { width: 238px; }
.lp-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lp-dp-title { font-size: 13px; font-weight: 600; color: var(--text); }
.lp-dp-nav { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 9px; border-radius: 6px; line-height: 1.4; }
.lp-dp-nav:hover { background: var(--surface2); color: var(--text); }
.lp-dp-nav.ghost { visibility: hidden; }
.lp-dp-grid { display: grid; grid-template-columns: repeat(7, 34px); }
.lp-dp-dow { color: var(--muted); font-size: 10.5px; text-align: center; padding: 4px 0; }
.lp-dp-day { position: relative; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--text); cursor: pointer; border: none; background: none; padding: 0; font-variant-numeric: tabular-nums; font-family: inherit; }
.lp-dp-day:disabled { color: color-mix(in srgb, var(--muted) 40%, transparent); cursor: default; }
.lp-dp-day.other { visibility: hidden; }
.lp-dp-day.in-range { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lp-dp-day.r-start { border-radius: 8px 0 0 8px; }
.lp-dp-day.r-end { border-radius: 0 8px 8px 0; }
.lp-dp-day.r-start.r-end { border-radius: 8px; }
.lp-dp-day.edge { background: var(--accent); color: #fff; font-weight: 600; }
.lp-dp-day.today::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
.lp-dp-day.edge.today::after { background: #fff; }
.lp-dp-day:not(:disabled):not(.edge):not(.in-range):hover { background: var(--surface2); border-radius: 8px; }
.lp-dp-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.lp-dp-sel { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; margin-right: auto; }
@media (max-width: 700px) {
  .lp-dp-months { flex-direction: column; }
  /* Téléphone : le popover ancré débordait de l'écran (croppé, impossible de
     choisir un jour — retour Amer 08-09). En fixed pleine largeur, scrollable. */
  .lp-dp-pop { position: fixed !important; left: 8px !important; right: 8px !important;
    top: max(70px, env(safe-area-inset-top)) !important; width: auto !important;
    max-height: calc(100vh - 140px); overflow-y: auto; z-index: 250; }
}
@media (prefers-reduced-motion: reduce) { .lp-dp-pop { transition: none; } }

/* ── B2 — VERRE « entre B et C » (décision Amer 08-08 sur maquettes) ─────────
   Reflet + liseré lumineux + profondeur sur toutes les surfaces, SANS toucher
   aux background-color ni aux border des pages (composable : background-image
   pour le reflet, box-shadow inset pour le liseré → la bordure verte du
   Net Profit et tous les états colorés restent intacts). Pas de blur
   généralisé : la lisibilité des chiffres prime ; le blur reste réservé à la
   barre Ask AI (déjà en place) et aux popovers flottants. */
[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat,
[data-theme="dark"] .ltv-card,
[data-theme="dark"] .plan,
[data-theme="dark"] .store-card,
[data-theme="dark"] .gwf-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .contact-card {
  /* B « verre profond » (choix Amer 08-08 sur alternatives) : reflet SERRÉ
     sur les premiers pixels, puis le bas de la carte PLONGE dans l'ombre —
     la profondeur vient du contraste, la luminance moyenne descend
     (fix du « trop clair/gris » de la v1 du verre). */
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0) 18%,
    rgba(0, 0, 0, 0.02) 55%,
    rgba(0, 0, 0, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 12px 30px rgba(0, 0, 0, 0.42);
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s var(--ease-out, ease-out), transform .18s var(--ease-out, ease-out);
}
/* .plan porte un badge ::before qui dépasse en haut (« Most popular ») :
   l'overflow hidden du verre le coupait — exception ciblée. */
[data-theme="dark"] .plan { overflow: visible; }
/* Seules les plaques KPI se soulèvent À PEINE au survol (comme la landing) —
   les grands widgets (tables, graphes) restent parfaitement immobiles :
   on les LIT. (Rotation 3D retirée partout — retour Amer 08-08.) */
[data-theme="dark"] .kpi-card:hover { transform: translateY(-2px); }
/* Brillance spéculaire qui SUIT la souris (demande Amer) : halo radial dont
   le centre est piloté par --lp-mx/--lp-my (app-shell.js, pointermove
   délégué). Discret (8%), fade 220ms, coupé en reduced-motion. */
[data-theme="dark"] .kpi-card::after,
[data-theme="dark"] .stat::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* v4 (option A, preview 18.08) : CERCLES fixes — plus d'ellipse aplatie ni
     d'étirement à la vitesse. Deux couches concentriques (spot 260px + nappe
     430px), +50%% d'opacité vs v3. L'inertie de position (lerp 0.10) et
     l'orbite au repos restent (app-shell.js). */
  background:
    radial-gradient(260px circle at var(--lp-mx, 50%) var(--lp-my, -20%),
      rgba(255, 255, 255, 0.055), transparent 62%),
    radial-gradient(430px circle at var(--lp-mx, 50%) var(--lp-my, -20%),
      rgba(255, 255, 255, 0.028), transparent 70%);
  opacity: 0;
  transition: opacity .3s var(--ease-out, ease-out);
}
[data-theme="dark"] .kpi-card:hover::after,
[data-theme="dark"] .stat:hover::after { opacity: 1; }
/* Halo « présence » des GRANDS conteneurs + sidebar (retour Amer 08-08) :
   même mécanique --lp-mx/my (app-shell.js), mais TRès subtil — ~55% de
   l'intensité des plaques. Pas de lift, pas de changement de bordure :
   juste une lueur qui suit la souris et orbite doucement au repos. */
[data-theme="dark"] .card,
[data-theme="dark"] .ltv-card,
[data-theme="dark"] .plan { position: relative; }
/* (.lp-sidebar est fixed — déjà un containing block, ne PAS le toucher) */
[data-theme="dark"] .card::after,
[data-theme="dark"] .ltv-card::after,
[data-theme="dark"] .plan::after,
[data-theme="dark"] .lp-sidebar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(320px circle at var(--lp-mx, 50%) var(--lp-my, -20%),
      rgba(160, 163, 255, 0.039), transparent 62%),
    radial-gradient(520px circle at var(--lp-mx, 50%) var(--lp-my, -20%),
      rgba(160, 163, 255, 0.024), transparent 70%);
  opacity: 0;
  transition: opacity .35s var(--ease-out, ease-out);
}
[data-theme="dark"] .card:hover::after,
[data-theme="dark"] .ltv-card:hover::after,
[data-theme="dark"] .plan:hover::after,
[data-theme="dark"] .lp-sidebar:hover::after { opacity: 1; }
/* .ltv-card = petite plaque : halo au niveau plaque (comme kpi-card) */
[data-theme="dark"] .ltv-card::after {
  background:
    radial-gradient(260px circle at var(--lp-mx, 50%) var(--lp-my, -20%),
      rgba(160, 163, 255, 0.065), transparent 62%),
    radial-gradient(430px circle at var(--lp-mx, 50%) var(--lp-my, -20%),
      rgba(160, 163, 255, 0.042), transparent 70%);
}
[data-theme="dark"] .kpi-card:hover,
[data-theme="dark"] .stat:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 18px 44px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .card::after,
  [data-theme="dark"] .kpi-card::after,
  [data-theme="dark"] .stat::after { transition: none; }
}
/* Relief léger sur les contrôles — un cran en dessous des cartes. */
[data-theme="dark"] .btn,
[data-theme="dark"] .lp-select,
[data-theme="dark"] .range-pill,
[data-theme="dark"] .lp-dp-trigger {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .range-pill.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(99, 102, 241, 0.28);
}
/* Popovers flottants : verre assumé (blur autorisé — ils survolent le contenu). */
[data-theme="dark"] .lp-dp-pop,
[data-theme="dark"] .cols-pop {
  background: color-mix(in srgb, var(--surface, #1a1d27) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 46%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 20px 56px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] #lp-askbar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-lg, 0 18px 50px rgba(0, 0, 0, .45));
}
/* Light mode : profondeur par l'ombre uniquement — PAS de reflet blanc.
   (Plusieurs pages n'ont pas encore leurs tokens light et restent sombres
   en mode light : un voile blanc par-dessus les lavait complètement —
   constaté en vérif prod. Le reflet light reviendra quand les tokens light
   seront unifiés, phase 4.) */
[data-theme="light"] .card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .stat {
  box-shadow: 0 8px 20px rgba(25, 30, 60, 0.10);
}

/* ── Dark = LE mode de l'app (décision Amer 08-08) ───────────────────────────
   Le toggle light passe en dormant : caché partout, code conservé (beta,
   réactivable en un delete). Si un user avait basculé light avant, on le
   ramène en dark via app-shell.js. */
#theme-btn, #theme-menu-btn { display: none !important; }

/* ── SYSTÈME DE CONTRÔLES VALIDÉ (Amer, 08-08) ───────────────────────────────
   Taxonomie actée : .lp-ctl = bouton de contrôle standard (Refresh/Export/…),
   .lp-menu = LE menu verre canonique (tous les déroulés), .lp-seg = choix
   exclusifs (périodes), .lp-store = contrôle de contexte éditorial (unique),
   violet plein = action primaire uniquement. */

.lp-ctl { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; color: #c6cce4; font-size: 12.5px; padding: 8px 14px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09); transition: border-color .18s var(--ease-out), color .18s var(--ease-out), transform .1s var(--ease-out); font-family: inherit; white-space: nowrap; }
.lp-ctl:hover { border-color: rgba(255,255,255,0.22); color: var(--text); }
.lp-ctl:active { transform: scale(0.95); }
.lp-ctl svg { display: block; flex: none; transition: transform .8s var(--ease-out); }
.lp-ctl.spin svg { transform: rotate(360deg); }
.lp-ctl.dip svg { transition: transform .18s var(--ease-out); transform: translateY(3px); }

.lp-menu { position: absolute; top: calc(100% + 10px); min-width: 180px; background: rgba(26,29,39,0.88); border: 1px solid rgba(255,255,255,0.11); border-radius: 12px; padding: 6px; z-index: 70; backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 20px 50px rgba(0,0,0,0.55); opacity: 0; transform: translateY(-6px) scale(0.97); pointer-events: none; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.lp-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lp-menu.anchor-left { left: 0; transform-origin: top left; }
.lp-menu.anchor-right { right: 0; transform-origin: top right; }
.lp-menu-item { display: flex; align-items: center; width: 100%; background: none; border: none; color: #c6cce4; font-size: 12.5px; padding: 8px 10px; cursor: pointer; border-radius: 8px; text-align: left; gap: 10px; font-family: inherit; }
.lp-menu-item:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.lp-menu-item .lp-ck { color: var(--accent); font-size: 12px; visibility: hidden; margin-left: auto; }
.lp-menu-sect { color: var(--muted); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; padding: 7px 10px 3px; }
.lp-menu-sect:not(:first-child) { border-top: 1px solid rgba(139, 143, 255, 0.07); margin-top: 4px; }
.lp-menu-item.on .lp-ck { visibility: visible; }
/* U-2026-08-13-5 : les checkboxes/radios/time natifs restants prennent au moins
   l'accent violet de la DA au lieu du bleu Chrome (restyle verre complet = refonte Amer). */
input[type="checkbox"], input[type="radio"], input[type="time"], input[type="range"] { accent-color: var(--accent, #6366f1); }
input[type="time"] { color-scheme: dark; }
.lp-badge { width: 24px; height: 24px; border-radius: 8px; background: #262b40; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #a5acc9; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }

.lp-seg { position: relative; display: inline-flex; background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 40%); background-color: #161927; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 2px 8px rgba(0,0,0,0.30); }
.lp-seg-clip { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; pointer-events: none; }
.lp-seg-halo { position: absolute; inset: 0; opacity: 0; transition: opacity .25s var(--ease-out); }
.lp-seg-thumb { position: absolute; top: 3px; left: 3px; height: calc(100% - 6px); width: 60px; background-image: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0) 55%); background-color: #272c42; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 12px rgba(0,0,0,0.45); transition: left .28s var(--ease-out), width .28s var(--ease-out), opacity .2s var(--ease-out); }
.lp-seg-btn { position: relative; z-index: 1; background: none; border: none; color: var(--muted); font-size: 12.5px; padding: 7px 14px; cursor: pointer; border-radius: 8px; font-family: inherit; white-space: nowrap; transition: color .18s var(--ease-out); }
.lp-seg-btn:hover { color: #b6bdd8; }
.lp-seg-btn.on { color: var(--text); font-weight: 600; }

.lp-store-wrap { position: relative; display: inline-block; }
/* 16.08 (Amer, variante C) : GHOST + pastille avatar — le nom du store est un
   titre, zero boite au repos (rien qui jure), la couleur du store porte
   l'identite. Verre discret au survol seulement. */
.lp-store { display: inline-flex; align-items: center; gap: 9px; background: none; border: 1px solid transparent; border-radius: 11px; color: var(--text); font-size: 17px; padding: 6px 11px 6px 6px; cursor: pointer; font-family: inherit; transition: background .18s var(--ease-out), border-color .18s var(--ease-out); }
.lp-store:hover, .lp-store.open { background: rgba(139,143,255,0.08); border-color: rgba(139,143,255,0.25); }
.lp-store .pav { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.lp-store .lbl { font-weight: 700; letter-spacing: -0.01em; }
.lp-store:hover .chev, .lp-store.open .chev { color: var(--text, #e8eaf0); }
.lp-store .chev { color: var(--muted); font-size: 13px; transition: transform .2s var(--ease-out); }
.lp-store.open .chev { transform: rotate(180deg); }

/* Calendrier V2 « verre vivant » : capsule de sélection en verre, curseur
   fantôme qui glisse, halo orbital discret, mois qui glissent. Sans pulse. */
.lp-dp-pop { overflow: hidden; }
.lp-dp-halo { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-out); z-index: 0; }
.lp-dp-ghost { position: absolute; box-sizing: border-box; width: 34px; height: 32px; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 60%), rgba(255,255,255,0.085); border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 2px 8px rgba(0,0,0,0.30); pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-out); z-index: 0; }
.lp-dp-months, .lp-dp-foot { position: relative; z-index: 1; }
.lp-dp-slidewrap { overflow: hidden; }
.lp-dp-slide { display: flex; gap: 20px; transition: transform .28s var(--ease-out), opacity .28s var(--ease-out); }
.lp-dp-day { transition: color .15s var(--ease-out); }
.lp-dp-day:not(:disabled):hover { color: #fff; }
.lp-dp-day.in-range { background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 55%), rgba(99,102,241,0.32); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); }
.lp-dp-day.r-start { border-radius: 10px 0 0 10px; }
.lp-dp-day.r-end { border-radius: 0 10px 10px 0; }
.lp-dp-day.r-start.r-end { border-radius: 10px; }
.lp-dp-day.edge { background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 55%), var(--accent); color: #fff; font-weight: 700; }
.lp-dp-day.today::after { animation: lp-tpulse 2.4s ease-in-out infinite; }
@keyframes lp-tpulse { 0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.5); } }
/* Le trigger calendrier rejoint la famille .lp-ctl */
.lp-dp-trigger { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color: #c6cce4; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09); border-radius: 10px; }
.lp-dp-trigger:hover { border-color: rgba(255,255,255,0.22); color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .lp-dp-day.today::after { animation: none; }
  .lp-dp-slide, .lp-seg-thumb { transition: none; }
}

/* ════ PALETTE N2 « NOIR-VIOLET » (décision Amer 08-08) ═══════════════════════
   La peau de la landing appliquée à l'app : noir teinté violet, liserés et
   reflets lavande, ombres nuit violette. Vert/rouge sémantiques INTACTS.
   Un seul bloc en fin de cascade → ajustable/révocable d'un endroit. */
html[data-theme="dark"] {
  --bg: #0b0a12;
  --surface: #141220;
  --surface2: #1c1930;
  --border: rgba(139, 143, 255, 0.14);
  --muted: #8d89a8;
  --text: #ececf6;
}
[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat,
[data-theme="dark"] .ltv-card,
[data-theme="dark"] .plan,
[data-theme="dark"] .store-card,
[data-theme="dark"] .gwf-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .contact-card {
  background-image: linear-gradient(180deg,
    rgba(139, 143, 255, 0.06),
    rgba(139, 143, 255, 0) 20%,
    rgba(0, 0, 0, 0.02) 55%,
    rgba(0, 0, 0, 0.20));
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.14), 0 12px 30px rgba(8, 4, 30, 0.6);
}
[data-theme="dark"] .kpi-card:hover,
[data-theme="dark"] .stat:hover {
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.18), 0 18px 44px rgba(8, 4, 30, 0.68);
}
[data-theme="dark"] .kpi-card::after,
[data-theme="dark"] .stat::after {
  background:
    radial-gradient(var(--lp-gw, 300px) var(--lp-gh, 240px) ellipse at var(--lp-mx, 50%) var(--lp-my, -20%),
      rgba(160, 163, 255, 0.045), transparent 62%),
    radial-gradient(520px 340px ellipse at calc(var(--lp-mx, 50%) + 90px) calc(var(--lp-my, -20%) + 55px),
      rgba(160, 163, 255, 0.028), transparent 68%);
}
[data-theme="dark"] .lp-ctl,
[data-theme="dark"] .lp-dp-trigger,
[data-theme="dark"] #lp-bell,
[data-theme="dark"] .sync-badge {
  background: rgba(139, 143, 255, 0.04);
  border-color: rgba(139, 143, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.10);
}
[data-theme="dark"] .lp-ctl:hover,
[data-theme="dark"] .lp-dp-trigger:hover,
[data-theme="dark"] #lp-bell:hover { border-color: rgba(160, 163, 255, 0.30); }
[data-theme="dark"] .lp-menu,
[data-theme="dark"] .lp-dp-pop,
[data-theme="dark"] #lp-bell-dropdown,
[data-theme="dark"] .cols-pop {
  background: rgba(20, 18, 32, 0.90);
  border-color: rgba(139, 143, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.16), 0 20px 50px rgba(4, 2, 16, 0.6);
}
[data-theme="dark"] .lp-seg {
  background-image: none;
  background-color: #110f1c;
  border-color: rgba(139, 143, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .lp-seg-thumb {
  background-image: linear-gradient(180deg, rgba(160, 163, 255, 0.12), rgba(160, 163, 255, 0) 55%);
  background-color: #221e36;
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.20), 0 0 12px rgba(99, 102, 241, 0.28), 0 3px 12px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .lp-badge { background: #232038; box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.14); }
[data-theme="dark"] .lp-dp-ghost {
  background: linear-gradient(180deg, rgba(160, 163, 255, 0.16), rgba(160, 163, 255, 0.02) 60%), rgba(139, 143, 255, 0.09);
  border-color: rgba(160, 163, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.22), 0 2px 8px rgba(0, 0, 0, 0.30);
}
[data-theme="dark"] .lp-side-ghost {
  background: linear-gradient(180deg, rgba(160, 163, 255, 0.08), rgba(160, 163, 255, 0) 60%), rgba(139, 143, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.12);
}
[data-theme="dark"] .lp-sidebar { background: #0d0c15; border-right-color: rgba(139, 143, 255, 0.08); }


/* ── Chat widget au système N2 (retour Amer 08-08 : ancienne DA) ────────────
   Le widget injecte son propre <style> après le nôtre → préfixe html pour
   gagner la spécificité sans !important. */
html .zt-chat-fab {
  background: linear-gradient(180deg, #6f72f5, #5a5de0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 24px rgba(99, 102, 241, 0.35), 0 12px 30px rgba(8, 4, 30, 0.5);
  transition: transform .15s var(--ease-out, ease-out), box-shadow .2s var(--ease-out, ease-out);
}
html .zt-chat-fab:hover {
  background: linear-gradient(180deg, #7a7df8, #6366f1);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 30px rgba(99, 102, 241, 0.45), 0 16px 36px rgba(8, 4, 30, 0.55);
}
html .zt-chat-panel {
  background: rgba(17, 15, 26, 0.92);
  border: 1px solid rgba(139, 143, 255, 0.14);
  border-radius: 16px;
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.16), 0 24px 60px rgba(4, 2, 16, 0.65);
  font-family: var(--font-sans, inherit);
  color: var(--text, #ececf6);
}
html .zt-chat-header { background: transparent; border-bottom: 1px solid rgba(139, 143, 255, 0.09); }
html .zt-msg.assistant { background: rgba(139, 143, 255, 0.07); border: 1px solid rgba(139, 143, 255, 0.10); border-radius: 12px; }
html .zt-msg.user { background: linear-gradient(180deg, #6f72f5, #5a5de0); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
html .zt-chat-input { border-top: 1px solid rgba(139, 143, 255, 0.09); background: transparent; }
html .zt-chat-input textarea {
  background: rgba(139, 143, 255, 0.05);
  border: 1px solid rgba(139, 143, 255, 0.14);
  border-radius: 10px;
  color: var(--text, #ececf6);
}
html .zt-chat-input textarea:focus { border-color: var(--accent, #6366f1); }
html .zt-chat-input button {
  background: linear-gradient(180deg, #6f72f5, #5a5de0);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(99, 102, 241, 0.3);
}
html .zt-chat-footer { border-top: 1px solid rgba(139, 143, 255, 0.07); color: var(--muted, #8d89a8); }

/* ── FOCUS « LUEUR DOUCE » (option 1 validée Amer 08-08) ─────────────────────
   Les CHAMPS TEXTE disent l'attention par la lumière : fin voile violet
   (1px, 35%) + halo ambiant 26px — plus jamais de double-anneau dur ni de
   contour accent. Les boutons/liens gardent leur anneau net (clavier).
   Règle système : s'applique à TOUS les inputs de l'app. */
html input:focus-visible,
html textarea:focus-visible,
html select:focus-visible {
  outline: none;
  border-color: rgba(139, 143, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 0 26px rgba(99, 102, 241, 0.22);
}
html .toolbar input[type="search"]:focus {
  border-color: rgba(139, 143, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 0 26px rgba(99, 102, 241, 0.22);
}
html #lp-askbar:focus-within {
  border-color: rgba(139, 143, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.16), 0 0 0 1px rgba(99, 102, 241, 0.35), 0 0 26px rgba(99, 102, 241, 0.22);
}
html #lp-askbar input:focus-visible { box-shadow: none; }
html .zt-chat-input textarea:focus,
html .zt-chat-input textarea:focus-visible {
  border-color: rgba(139, 143, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 0 26px rgba(99, 102, 241, 0.22);
}
html input, html textarea { caret-color: #8b8fff; }

/* ── .lp-select global au système (uniformité toutes pages, 08-08) ──────────
   En attendant les conversions page par page vers lp-store/lp-menu, tout
   select natif restant prend au moins la peau système. */
[data-theme="dark"] .lp-select {
  background: rgba(139, 143, 255, 0.04);
  border: 1px solid rgba(139, 143, 255, 0.13);
  border-radius: 10px;
  color: var(--text, #ececf6);
  box-shadow: inset 0 1px 0 rgba(160, 163, 255, 0.10);
  transition: border-color .18s var(--ease-out, ease-out);
}
[data-theme="dark"] .lp-select:hover { border-color: rgba(160, 163, 255, 0.30); }


/* ── Barre de navigation violette (validée sur démo 08-08) ──────────────────
   Fine barre fixe en haut : rush à ~28% au clic, trickle asymptotique vers
   90%, complétée quand la data de la nouvelle page a rendu (quiet-window
   fetch), puis fade. + voile léger au départ / fade-in à l'arrivée.
   Les éléments vivent sur <html> (hors body) : le voile ne les dime pas. */
#lp-navbar {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0;
  z-index: 240; pointer-events: none;
  background: linear-gradient(90deg, #6366f1, #8b8fff);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.55), 0 0 3px rgba(139, 143, 255, 0.8);
  border-radius: 0 2px 2px 0;
  opacity: 0; transition: opacity .25s ease-out;
}
#lp-navveil {
  position: fixed; inset: 0; z-index: 230; pointer-events: none;
  background: #0b0a12; opacity: 0; transition: opacity .28s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #lp-navbar, #lp-navveil { display: none; }
}


/* ── Mobile web pass (Amer 08-08 : screenshots iPhone — chevauchements,
   FAB sur l'onglet, Campaigns cassé). Web app view-only : les actions
   complexes restent sur desktop. ─────────────────────────────────────── */
@media (max-width: 640px) {
  /* Header : UNE ligne propre — le height fixe + wrap faisait déborder
     bell/Refresh/⋯ par-dessus la barre de périodes. */
  header {
    height: auto !important;
    min-height: calc(52px + env(safe-area-inset-top));
    flex-wrap: nowrap !important;
    /* 13.08 : overflow hidden clippait les dropdowns (store, cloche, ⋯) —
       clip horizontal seulement, les menus s'ouvrent vers le bas. */
    overflow-x: clip;
    overflow-y: visible;
  }
  .lp-store-wrap { min-width: 0; }
  .lp-store { max-width: 38vw; }
  .lp-store > span, .lp-store-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Contrôles : icône seule (le label reprend sa place au tap long via title) */
  .header-right { flex-wrap: nowrap !important; gap: 6px !important; }
  .header-right .lp-ctl span, .header-right .lp-ctl .btn-label { display: none; }
  .header-right .lp-ctl { padding: 7px 9px; }
  .sync-badge { display: none !important; }
  /* Barre de périodes : scroll horizontal fluide, rien par-dessus */
  .range-bar { flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
  .lp-seg { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lp-seg::-webkit-scrollbar { display: none; }
  #lp-diff-link { display: none !important; }
  .lp-dp-trigger { font-size: 11px; padding: 6px 9px; }
  /* Chat : au-dessus de la bottom nav, plus jamais sur un onglet */
  html .zt-chat-fab {
    bottom: calc(var(--bottom-nav-h, 64px) + 12px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
    width: 46px !important; height: 46px !important;
  }
  html .zt-chat-panel {
    bottom: calc(var(--bottom-nav-h, 64px) + 66px + env(safe-area-inset-bottom)) !important;
    right: 8px !important; left: 8px !important; width: auto !important;
    max-height: 60vh !important;
  }
  /* Grands tableaux : scroll DANS la carte, jamais la page qui casse */
  .card .table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card { border-radius: 10px; }
  /* Campaigns : stats 2 colonnes, toolbar empilée, recherche pleine largeur */
  .stats { grid-template-columns: repeat(2, 1fr) !important; }
  .toolbar input[type=search] { min-width: 0 !important; width: 100%; }
  /* Heatmap : cases plus denses, montants masqués (trop étroit) */
  #hm-grid { gap: 3px !important; }
  #hm-grid .hm-day { min-height: 40px !important; padding: 4px 5px !important; }
  #hm-grid .hm-val { display: none; }
  /* Modals : plein écran confortable */
  .modal { max-width: calc(100vw - 24px) !important; }
}
@media (max-width: 380px) {
  .lp-store { max-width: 32vw; }
  .header-right .lp-ctl { padding: 6px 7px; }
}


/* ── Shell persistant (Zendrop-feel, Amer 08-08) : View Transitions
   cross-document. La sidebar et le header sont des GROUPES NOMMÉS : leurs
   snapshots old/new sont identiques pixel-pour-pixel -> crossfade invisible
   -> ressenti « ils ne rechargent pas ». Seule la zone de travail (root)
   fade légèrement. Chromium 126+ / Safari 18.2+ ; fallback = voile nav bar. */
@view-transition { navigation: auto; }
::view-transition {
  /* Fond du plan de transition : SANS ça, le mi-fondu old/new laisse
     transparaître le blanc du navigateur → voile laiteux + cartes verre
     « blanchies » (bug du screen recording d'Amer 13.08). */
  background-color: var(--bg, #0b0a12);
}
::view-transition-old(root) { animation: lp-vt-out 90ms var(--ease-out, ease-out) both; }
::view-transition-new(root) { animation: lp-vt-in 160ms var(--ease-out, ease-out) both; }
@keyframes lp-vt-out { to { opacity: 0.55; } }
@keyframes lp-vt-in { from { opacity: 0.55; } }
.lp-sidebar { view-transition-name: lp-sidebar; }
body > header { view-transition-name: lp-header; }
::view-transition-group(lp-sidebar),
::view-transition-group(lp-collapse),
::view-transition-group(lp-header) { animation-duration: 0s; }
::view-transition-old(lp-sidebar), ::view-transition-new(lp-sidebar),
::view-transition-old(lp-header), ::view-transition-new(lp-header) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* Badge plateforme (tables) : tuile verre teintée + vrai glyphe de marque */
.lp-pf-badge { display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; flex: none; border: 1px solid rgba(139,143,255,0.10); }

/* ── Sidebar v2 (2026-08-13) : sections dépliables, accordéon single-open ──
   Les headers de groupe sont des <button class="lp-side-item"> : ils héritent
   du verre/voyageur/hover des items. Sous-items indentés, barre active alignée. */
.lp-sidebar button.lp-side-item {
  background: none; border: 0; width: 100%; text-align: left;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.lp-side-chev {
  width: 13px; height: 13px; flex: 0 0 13px; margin-left: auto;
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .55; transition: transform .22s var(--ease-out, ease-out);
}
.lp-side-group[data-open="1"] > .lp-side-group-h .lp-side-chev { transform: rotate(180deg); }
.lp-side-subs { overflow: hidden; max-height: 0; transition: max-height .28s cubic-bezier(.22, .61, .36, 1); }
.lp-sidebar .lp-side-sub { padding: 6.5px 10px 6.5px 37px; font-size: 12.5px; }
.lp-sidebar .lp-side-sub[data-active="true"]::before { top: 6px; bottom: 6px; left: 22px; }
body.lp-sidebar-collapsed .lp-side-subs { display: none; }
body.lp-sidebar-collapsed .lp-side-chev { display: none; }
body[data-sidebar="1"] #products-tablist { display: none !important; }
body[data-sidebar="1"] .settings-subnav { display: none !important; }

/* ── Mobile Lot 1 (13.08) : header dashboard compact + barres de périodes fixes ── */
.lp-menu-item.lp-mobile-only, .menu-item.lp-mobile-only { display: none; }
@media (max-width: 640px) {
  .lp-menu-item.lp-mobile-only { display: flex; }
  .menu-item.lp-mobile-only { display: block; }
  header .logo img { max-height: 22px; }
  .sync-badge { display: none !important; }
  #btn-full-sync, #btn-customize { display: none !important; }
  header .sync-caps .lp-ctl span { display: none; }
  header .lp-ctl .btn-label { display: none; }
  header .lp-ctl { padding: 7px 9px; }
  #seg-range, #camp-seg { overflow-x: visible; }
  #seg-range .lp-seg-btn, #camp-seg .lp-seg-btn, #ord-seg .lp-seg-btn { padding: 6px 8px; font-size: 12px; }
  #seg-range [data-range="90d"], #seg-range [data-range="this_month"],
  #camp-seg [data-range="90d"], #camp-seg [data-range="this_month"] { display: none; }
  #menu-btn { position: relative; }
  body[data-sync] #menu-btn::after {
    content: ''; position: absolute; top: 4px; right: 4px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green, #10b981);
  }
  body[data-sync="syncing"] #menu-btn::after { background: var(--yellow, #f59e0b); animation: pulse 1s infinite; }
  body[data-sync="error"] #menu-btn::after { background: var(--red, #ef4444); }
}

/* ── Mobile : Settings = compte simplifié (13.08, demande Amer) ── */
@media (max-width: 640px) {
  .spage { display: none !important; }
  #mobile-account { display: block !important; }
}

/* ── Desktop-only screen (mobile) + menu épuré ── */
@media (max-width: 640px) {
  .menu-item.lp-desktop-only { display: none !important; }
}
#lp-deskonly {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 140px); padding: 24px;
}
.lp-deskonly-card {
  max-width: 340px; text-align: center; color: var(--muted, #7b84a3);
  background-color: rgba(20, 18, 32, 0.6);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 55%);
  border: 1px solid rgba(139, 143, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  border-radius: 16px; padding: 34px 26px;
}
.lp-deskonly-card svg { color: var(--accent, #6366f1); margin-bottom: 14px; }
.lp-deskonly-card h2 { color: var(--text, #e8eaf0); font-size: 17px; margin: 0 0 8px; }
.lp-deskonly-card p { font-size: 13px; line-height: 1.6; margin: 0 0 18px; }
.lp-deskonly-card a {
  display: inline-block; padding: 10px 18px; border-radius: 10px;
  border: 1px solid rgba(139, 143, 255, 0.25); color: var(--text, #e8eaf0);
  text-decoration: none; font-size: 13px; font-weight: 600;
}

/* ── Mobile : toast de sync en bas (la zone status bar iPhone est une safe
   zone — rien d'important au niveau de l'heure/caméra). ── */
@media (max-width: 640px) {
  #sync-indicator {
    top: auto !important; right: auto !important;
    bottom: calc(var(--bottom-nav-h, 64px) + 12px + env(safe-area-inset-bottom, 0px));
    left: 12px; max-width: 70vw;
  }
}

/* ── Askbar : padding reserve (plus rien ne passe dessous) + hide-on-scroll ── */
@media (min-width: 641px) { body.lp-has-askbar { padding-bottom: 84px; } }
#lp-askbar {
  transition: border-color 160ms var(--ease-out), box-shadow 200ms var(--ease-out),
              transform 280ms var(--ease-out), opacity 200ms var(--ease-out);
}
#lp-askbar.lp-askbar-hide { transform: translateX(-50%) translateY(180%); opacity: 0; pointer-events: none; }

/* ── Ad platform cards + campaign filter (deplace de settings.html → partage, 16.08) ── */
    /* ── Ad platform cards (polished for Google review video) ──────────── */
.ad-store-block { background-color: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.ad-store-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ad-store-header .name { font-weight: 600; font-size: 15px; color: #fff; }
.ad-store-header .domain { color: var(--muted); font-size: 12px; font-weight: 400; }
.ad-store-header .cf-spacer { flex: 1; }
.cf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #a5aac2; background: rgba(255,255,255,0.04); border: 1px solid #262a3a; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-family: inherit; transition: border-color .15s; }
.cf-chip:hover { border-color: var(--accent, #6366f1); }
.cf-chip b { color: var(--text, #e6e8f0); font-weight: 600; }
.cf-chip .cf-pen { color: var(--muted); font-size: 11px; }
.cf-chip.cf-add { border-style: dashed; color: #6b7089; background: none; }
.cf-editrow[hidden] { display: none; }
.cf-editrow { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; flex-wrap: wrap; }
.cf-editrow input { width: 180px; font-size: 13px; background: var(--surface, #12141d); border: 1px solid var(--border, #2a2d3a); border-radius: 8px; padding: 7px 10px; color: var(--text, #e6e8f0); }
.cf-editrow .hint2 { font-size: 11px; color: var(--muted); }
.cf-warn { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #fbbf24; background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.25); border-radius: 8px; padding: 8px 12px; margin: -6px 0 14px; }
.ad-platform-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border);
  transition: border-color .15s cubic-bezier(0.4,0,0.2,1), background-color .15s;
  margin-bottom: 10px;
    }
.ad-platform-row:last-child { margin-bottom: 0; }
.ad-platform-row.connected { background: linear-gradient(180deg, rgba(16,185,129,0.06), rgba(16,185,129,0.02)); border-color: rgba(16,185,129,0.28); }
.ad-platform-row:not(.connected):hover { border-color: #7C5CFF; }
.ad-platform-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff;
  letter-spacing: -0.5px;
    }
.ad-platform-icon.meta   { background: linear-gradient(135deg, #1877F2, #0866FF); }
.ad-platform-icon.tiktok { background: #010101; border: 1px solid rgba(255,255,255,0.18); }
.ad-platform-icon.google { background: #fff; }
.ad-platform-icon.snap   { background: #FFFC00; color: #000; }
.ad-platform-icon.pinterest { background: #E60023; }
.ad-platform-body { flex: 1; min-width: 0; }
.ad-platform-name { font-weight: 600; font-size: 14px; color: #fff; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
.ad-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); animation: livepulse 2s infinite; }
@keyframes livepulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
  50%     { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    }
.ad-platform-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-platform-meta strong { color: var(--muted); font-weight: 500; }
.ad-platform-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-connect { background: #7C5CFF; border-color: #7C5CFF; color: #fff; font-weight: 600; padding: 8px 16px; border-radius: 8px; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: background-color .12s, transform .1s; }
.btn-connect:hover { background: #6A4CE0; border-color: #6A4CE0; transform: translateY(-1px); }
.btn-disconnect {
  padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 500;
  background: transparent; border: 1px solid rgba(239,68,68,0.35);
  color: #f87171; cursor: pointer; transition: all .12s;
    }
.btn-disconnect:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.5); }


/* ── Public demo banner (2026-08-17) ─────────────────────────────────────── */
#lp-demo-banner {
  position: fixed; top: 0; left: 0; right: 0; height: 42px; z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: color-mix(in srgb, var(--surface, #1a1d27) 82%, #4ade80);
  background: linear-gradient(90deg, rgba(74,222,128,.16), rgba(74,222,128,.06) 40%, rgba(74,222,128,.16));
  border-bottom: 1px solid rgba(74,222,128,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13px; color: var(--text, #e8eaf0);
}
#lp-demo-banner .lp-demo-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(74,222,128,.55); animation: lpDemoPulse 2.2s ease-out infinite;
}
@keyframes lpDemoPulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
#lp-demo-banner .lp-demo-actions { display: flex; gap: 10px; align-items: center; }
#lp-demo-banner .lp-demo-cta {
  background: #4ade80; color: #0b1210; font-weight: 700; font-size: 12.5px;
  padding: 5px 12px; border-radius: 999px; text-decoration: none;
  transition: filter 150ms ease;
}
#lp-demo-banner .lp-demo-cta:hover { filter: brightness(1.08); }
#lp-demo-banner .lp-demo-exit { color: var(--muted, #7b84a3); font-size: 12.5px; text-decoration: none; }
#lp-demo-banner .lp-demo-exit:hover { color: var(--text, #e8eaf0); }
body.lp-demo { padding-top: 42px; }
body.lp-demo .lp-sidebar { top: 42px; }
@media (max-width: 640px) {
  #lp-demo-banner { font-size: 12px; gap: 8px; padding: 0 8px; }
  #lp-demo-banner .lp-demo-txt strong { font-weight: 600; }
}

/* ── Staff support view banner (2026-08-17) — impersonation lecture seule ── */
#lp-staff-banner {
  position: fixed; top: 0; left: 0; right: 0; height: 42px; z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(90deg, rgba(251,191,36,.18), rgba(251,191,36,.07) 40%, rgba(251,191,36,.18));
  border-bottom: 1px solid rgba(251,191,36,.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13px; color: var(--text, #e8eaf0);
}
#lp-staff-banner .lp-staff-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(251,191,36,.55); animation: lpStaffPulse 2.2s ease-out infinite;
}
@keyframes lpStaffPulse {
  0% { box-shadow: 0 0 0 0 rgba(251,191,36,.55); }
  70% { box-shadow: 0 0 0 7px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
#lp-staff-banner .lp-staff-exit {
  background: #fbbf24; color: #171204; font-weight: 700; font-size: 12.5px;
  padding: 5px 14px; border-radius: 999px; text-decoration: none;
  transition: filter 150ms ease;
}
#lp-staff-banner .lp-staff-exit:hover { filter: brightness(1.08); }
body.lp-staff-view { padding-top: 42px; }
body.lp-staff-view .lp-sidebar { top: 42px; }
@media (max-width: 640px) {
  #lp-staff-banner { font-size: 12px; gap: 8px; padding: 0 8px; }
}

/* Menu store : separateur + item ACTION (Add store) — les entites ont un badge
   rond, les actions n'en ont pas (confusion ∗ vs + relevee par Amer 21.08). */
.lp-menu-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 8px; }
.lp-menu-item.lp-menu-action { color: #9B85FF; font-weight: 600; }
.lp-menu-item.lp-menu-action::before {
  content: '+'; font-weight: 700; font-size: 15px; line-height: 1;
  margin-right: 2px; color: #9B85FF;
}
.lp-menu-item.lp-menu-action:hover { background: rgba(124, 92, 255, 0.10); }
.lp-menu-item.lp-menu-action .lp-ck { display: none; }