/* =========================================================================
   BloomX Hub · admin.css
   Same family as the Sales Hub (macOS-native, calm, system font, blue accent).
   Contract: docs/design/DESIGN.md (v3.3, 2026-10-13: BloomX Hub, sidebar rail, e-mail sent by the Hub,
   replies, QR call, call report, search slider, notifications; v3.2 audit applied).
   Mobile first; >= 760px = left sidebar; >= 1024px = the sidebar can fold into a 72px rail;
   >= 1200px = Leads board.
   CSP-safe: no @import, no web font, no url(), no data: URI.
   ========================================================================= */

/* 1. Tokens ---------------------------------------------------------------
   Liquid Glass (2026-10-19, docs/design/GLASS.md; Kamilia's reference docs/design/reference/kamilia-style-vertix-v14.webp).
   Dark is the primary theme (near-black canvas, subtle opaque cards, glass only on the navigation layer); light keeps
   the same structure. Accent = BloomX brand sapphire #2C5FC7, the « x » of the logo (/Users/mba/BX/website
   src/assets/css/style.css --accent, src/assets/brand/logo.svg); #7C9FE6 (--accent-light there) is the text tint on
   dark and #1F4E9C (--gold-ink there) on light. Orange is reserved for « Chaud » and urgent (late, Prêt à acheter).
   WCAG 2.x, measured (docs/design/GLASS.md §6): dark ink-2 #A1A1A6 on card 7.0:1, accent-ink on card 6.9:1, on
   accent-soft 5.4:1, white on #2C5FC7 5.9:1; light ink-2 #5E5E64 on canvas 5.8:1, accent-ink 7.2:1. */
:root{
  --bg:#F2F2F6; --sidebar:#E9E9EE; --surface:#FFFFFF; --surface-2:#F6F6F9; --fill:rgba(120,120,128,.12); --fill-2:rgba(120,120,128,.08);
  --ink:#1D1D1F; --ink-2:#5E5E64; --ink-3:#8E8E93; --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.14);
  --accent:#2C5FC7; --accent-hover:#244FA8; --accent-fill:#2C5FC7; --accent-soft:rgba(44,95,199,.12); --accent-ink:#1F4E9C;
  --green:#34C759; --green-ink:#1A7431; --green-soft:rgba(52,199,89,.14);
  --orange:#FF7A1A; --orange-ink:#A33A00; --orange-soft:rgba(255,122,26,.16);
  --red:#D70015; --red-ink:#D70015; --red-soft:rgba(255,59,48,.10);
  --dark:#1D1D1F; --on-dark:#F5F5F7;
  /* radii: concentric scale 12 / 16 / 20 / 28, capsules for controls (GLASS.md §3) */
  --r-sm:8px; --r:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-pop:0 18px 40px -12px rgba(20,30,60,.28), 0 0 0 .5px rgba(0,0,0,.08);

  /* engine-only */
  --raised:#FFFFFF; --backdrop:rgba(10,12,20,.32); --on-accent:#FFFFFF;
  --field-line:#8E8E93; /* control boundaries: 3.3:1 on --surface (WCAG 1.4.11) */
  --done-ink:#146228; /* « Copié » on a grey button: 4.5:1 or more (UX-18) */
  --badge-ink:var(--ink-2);
  --test-bg:#FFF0DB; /* « [TEST] » tag: opaque; --orange-ink on it 6.0:1 */
  /* score temperatures: Chaud = orange (reserved), Tiède = brand blue, Froid = neutral. Text 4.5:1 or more on its -soft */
  --hot-ink:var(--orange-ink); --hot-soft:var(--orange-soft);
  --warm-ink:var(--accent-ink); --warm-soft:var(--accent-soft);
  --cold-ink:var(--ink-2); --cold-soft:var(--fill-2);

  /* Liquid Glass: the navigation layer only (top bar, pill, rail, tab bar, sticky bars, sheets) */
  --glass:rgba(250,250,252,.72); --glass-strong:rgba(250,250,252,.86);
  --glass-blur:blur(24px) saturate(180%);
  --glass-line:rgba(0,0,0,.08); --glass-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --glass-shadow:0 10px 30px -12px rgba(20,30,60,.22), 0 1px 2px rgba(20,30,60,.06);
  --pill-on:#1D1D1F; --pill-on-ink:#FFFFFF; /* the current item of a pill: a light capsule on dark, an ink capsule on light (3:1 or more against the track) */
  /* content cards: mostly opaque (legibility), a hairline and a soft inner highlight */
  --card:#FFFFFF; --card-line:rgba(0,0,0,.07); --card-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --card-shadow:0 1px 2px rgba(20,30,60,.04), 0 6px 20px -14px rgba(20,30,60,.18);
  --card-lift:0 2px 4px rgba(20,30,60,.05), 0 16px 32px -18px rgba(20,30,60,.30);
  /* hero: the page's key number on a brand gradient (white text 4.6:1 at the lit corner, 5.6:1 to 8:1 on the stops) */
  --hero:radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 40%), linear-gradient(135deg, #2F63CC 0%, #2C5FC7 42%, #1F4E9C 100%);
  --hero-ink:#FFFFFF; --hero-ink-2:#FFFFFF; /* secondary hero text = regular weight, never transparency: 4.6:1 worst case */
  --soft-circle:var(--fill-2);
  --side-fill:rgba(255,255,255,.72); /* the sidebar: a light translucent panel (nothing scrolls under it: no blur) */

  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:22px; --fs-xl:28px;
  --ctl-h:44px; --ctl-h-sm:44px; --ctl-fs:16px; --tap:44px;
  --bar-h:60px; --tab-h:74px; --main-w:960px; --pad:16px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.3,.64,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0C0E; --sidebar:#121214; --surface:#161618; --surface-2:#1C1C1F; --fill:rgba(255,255,255,.10); --fill-2:rgba(255,255,255,.06);
    --ink:#F5F5F7; --ink-2:#A1A1A6; --ink-3:#8E8E93; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
    --accent:#2C5FC7; --accent-hover:#3567D2; --accent-fill:#4A7AE0; --accent-soft:rgba(74,122,224,.20); --accent-ink:#7C9FE6;
    --green:#30D158; --green-ink:#30D158; --green-soft:rgba(48,209,88,.16);
    --orange:#FF8A1F; --orange-ink:#FFA552; --orange-soft:rgba(255,138,31,.16);
    --red:#D1281C; --red-ink:#FF6961; --red-soft:rgba(255,69,58,.16);
    --dark:#2C2C2E; --on-dark:#F5F5F7;
    --shadow-pop:0 24px 48px -16px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.12);
    --raised:#2A2A2E; --backdrop:rgba(0,0,0,.6); --field-line:#6E6E73;
    --done-ink:#30D158; --badge-ink:#A8A8AD; --test-bg:#3C2A17;
    --glass:rgba(30,30,34,.62); --glass-strong:rgba(22,22,26,.86);
    --glass-line:rgba(255,255,255,.10); --glass-hi:inset 0 1px 0 rgba(255,255,255,.08);
    --glass-shadow:0 12px 36px -12px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.4);
    --pill-on:#F5F5F7; --pill-on-ink:#0C0C0E;
    --card:#151517; --card-line:rgba(255,255,255,.07); --card-hi:inset 0 1px 0 rgba(255,255,255,.05);
    --card-shadow:0 1px 2px rgba(0,0,0,.3); --card-lift:0 18px 36px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);
    --soft-circle:rgba(255,255,255,.07); --side-fill:rgba(255,255,255,.04);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C0C0E; --sidebar:#121214; --surface:#161618; --surface-2:#1C1C1F; --fill:rgba(255,255,255,.10); --fill-2:rgba(255,255,255,.06);
  --ink:#F5F5F7; --ink-2:#A1A1A6; --ink-3:#8E8E93; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --accent:#2C5FC7; --accent-hover:#3567D2; --accent-fill:#4A7AE0; --accent-soft:rgba(74,122,224,.20); --accent-ink:#7C9FE6;
  --green:#30D158; --green-ink:#30D158; --green-soft:rgba(48,209,88,.16);
  --orange:#FF8A1F; --orange-ink:#FFA552; --orange-soft:rgba(255,138,31,.16);
  --red:#D1281C; --red-ink:#FF6961; --red-soft:rgba(255,69,58,.16);
  --dark:#2C2C2E; --on-dark:#F5F5F7;
  --shadow-pop:0 24px 48px -16px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.12);
  --raised:#2A2A2E; --backdrop:rgba(0,0,0,.6); --field-line:#6E6E73;
  --done-ink:#30D158; --badge-ink:#A8A8AD; --test-bg:#3C2A17;
  --glass:rgba(30,30,34,.62); --glass-strong:rgba(22,22,26,.86);
  --glass-line:rgba(255,255,255,.10); --glass-hi:inset 0 1px 0 rgba(255,255,255,.08);
  --glass-shadow:0 12px 36px -12px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.4);
  --pill-on:#F5F5F7; --pill-on-ink:#0C0C0E;
  --card:#151517; --card-line:rgba(255,255,255,.07); --card-hi:inset 0 1px 0 rgba(255,255,255,.05);
  --card-shadow:0 1px 2px rgba(0,0,0,.3); --card-lift:0 18px 36px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);
  --soft-circle:rgba(255,255,255,.07); --side-fill:rgba(255,255,255,.04);
  color-scheme:dark;
}
@media (min-width:760px) and (pointer:fine){
  :root{ --ctl-h:38px; --ctl-h-sm:32px; --ctl-fs:15px; --tap:32px; }
}
@media (min-width:760px){ :root{ --pad:20px; } }

/* 2. Base ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  background:var(--bg);
  scroll-padding-top:calc(var(--bar-h) + 16px);
  scroll-padding-bottom:calc(var(--tab-h) + 24px);
}
body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--ink);
  font:400 var(--fs-base)/1.5 var(--font);
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.25; letter-spacing:-.015em; text-wrap:balance; }
p,ul,ol,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ padding:0; }
a{ color:var(--accent-ink); text-underline-offset:2px; }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ cursor:pointer; }
code,kbd,pre,samp{ font-family:var(--mono); font-size:.92em; }
fieldset{ margin:0; padding:0; border:0; min-width:0; }
legend{ padding:0; }
legend.label{ margin-bottom:6px; }
table{ border-collapse:collapse; }
summary{ cursor:pointer; list-style:none; }
summary::-webkit-details-marker{ display:none; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
::selection{ background:rgba(0,122,255,.24); }

/* 3. Utilities ----------------------------------------------------------- */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
html:not(.js) .js-only{ display:none !important; }
.js .no-js-only{ display:none !important; }
.muted{ color:var(--ink-2); }
.small{ font-size:var(--fs-sm); }
.tnum{ font-variant-numeric:tabular-nums; }
.nowrap{ white-space:nowrap; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.stack-lg{ display:flex; flex-direction:column; gap:24px; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.push{ margin-left:auto; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.skip{ position:absolute; left:8px; top:-80px; z-index:100; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:var(--r); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-pop); text-decoration:none; font-weight:600; }
.skip:focus{ top:8px; }

/* 4. Icons --------------------------------------------------------------- */
.ico{ width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.ico--sm{ width:16px; height:16px; }
.ico--lg{ width:24px; height:24px; }

/* 5. Shell: Liquid Glass (docs/design/GLASS.md §4, Kamilia's reference + her update of 19/10: menu on the LEFT) ----
   S49 (Kamilia 19/10, external audit §3): ONE menu of five items — Aujourd'hui · Trouver · Leads · Résultats · Réglages
   (a commercial: the first three) — the same on the phone tab bar and the computer sidebar. No « Plus », no tools list.
   Top bar, right: « + » Nouveau lead, « À voir », the user chip (a menu: Mon compte, Se déconnecter).
   Phone first (< 760 px): a sticky top bar (logo · status · tools) and the floating glass TAB BAR at the bottom. It
   compacts while scrolling down: CSS first (scroll-driven animation, no JS) and, when /assets/glass.js runs,
   html.tab-compact (down = compact, up = full, Apple's « minimize on scroll »).
   From 760 px: a floating glass SIDEBAR on the left (brand + « Réduire le menu », the five items) and a quiet top bar in
   the content column. The sidebar is a size container: below 140 px wide it shows icons only and its labels become
   tooltips (760–1099 px always; from 1100 px when the person folded it, html.side-rail). Nothing scrolls under the
   sidebar, so it carries no blur. Blur layers on screen: phone top-bar edge + tab bar (+ one sticky action bar, + one
   open sheet) = 4 at most; computer: sticky action bar + sheet = 2 at most. Older shells: _archive/glass-2026-10-19. */
@property --side-w{ syntax:'<length>'; inherits:true; initial-value:248px; }
.app{ min-height:100vh; }

.top{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  height:calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
}
/* The scroll-edge effect (phone): the glass fades out at the bottom edge */
.top::before{
  content:""; position:absolute; inset:0 0 -12px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 70%, transparent 100%);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent); mask-image:linear-gradient(to bottom, #000 72%, transparent);
}
.top-lead{ display:flex; align-items:center; gap:8px; min-width:0; }
.brand{ display:inline-flex; align-items:center; gap:10px; min-width:0; min-height:44px; color:var(--ink); font-size:var(--fs-base); font-weight:600; letter-spacing:-.01em; text-decoration:none; }
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%, #4A7AE0 0, #2C5FC7 55%, #1F4E9C 100%); color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px -4px rgba(44,95,199,.6);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.03em; line-height:1;
}
.brand-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.top-tools{ display:flex; align-items:center; gap:6px; margin-left:auto; min-width:0; }
.tool{
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:50%;
  background:var(--fill-2); box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-hi); color:var(--ink);
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease;
}
.tool:hover{ background:var(--fill); }
.tool .ico{ width:20px; height:20px; }
/* Tooltips: opacity only, so every label stays in the accessibility tree */
.tool-tip, .tip{
  position:absolute; z-index:45; width:max-content; max-width:240px;
  padding:6px 10px; border-radius:var(--r-sm);
  background:var(--dark); color:var(--on-dark); box-shadow:var(--shadow-pop);
  font-size:var(--fs-sm); font-weight:500; line-height:1.3; white-space:nowrap; text-align:left;
  opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease;
}
.tool-tip{ top:calc(100% + 8px); right:0; transform:translateY(-3px); }
.tool:hover .tool-tip, .tool:focus-visible .tool-tip{ opacity:1; transform:none; transition-delay:.05s; }

.status{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  min-height:32px; padding:0 12px; border-radius:var(--r-pill);
  background:var(--green-soft); color:var(--ink);
  font-size:var(--fs-sm); font-weight:600; text-decoration:none; white-space:nowrap;
}
a.status::after{ content:""; position:absolute; inset:-6px -4px; }
a.status:hover{ box-shadow:inset 0 0 0 1px var(--line-strong); }
.status .dot{ background:var(--green); }
.status--warn{ background:var(--orange-soft); }
.status--warn .dot{ background:var(--orange); }
.status--down{ background:var(--red-soft); }
.status--down .dot{ background:var(--red); }

.side-user{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0; border-radius:var(--r-pill);
  color:var(--ink); text-decoration:none;
}
.side-user .avatar{ width:36px; height:36px; font-size:var(--fs-xs); box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--glass-line); }
.side-user[aria-current] .avatar{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent-fill); }
.side-user-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.side-user-name{ overflow:hidden; font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.side-user-role{ color:var(--ink-2); font-size:var(--fs-xs); }
.side-user:focus-visible{ outline-offset:2px; }

/* Phone: the sidebar dissolves (display:contents); its main menu becomes the tab bar, its head and tools hide
   (the brand is in the top bar, the tools in « Plus ») */
.side{ display:contents; }
.side-head{ display:none; }

/* Tab bar (phone): a floating glass capsule */
.nav{
  position:fixed; z-index:30;
  left:max(10px, env(safe-area-inset-left, 0px)); right:max(10px, env(safe-area-inset-right, 0px));
  bottom:max(10px, env(safe-area-inset-bottom, 0px));
  border-radius:var(--r-xl);
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-hi), var(--glass-shadow);
}
.nav-list{ list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; height:64px; padding:5px; transition:height .28s var(--ease); }
.nav-item{ position:relative; min-width:0; }
.nav-link{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:100%; height:100%; padding:2px 0; border:0; border-radius:calc(var(--r-xl) - 5px); background:none;
  color:var(--ink-2); font-size:10.5px; font-weight:600; letter-spacing:-.01em; line-height:1.1; text-align:center; text-decoration:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background-color .18s ease, color .18s ease;
}
.nav-link .ico{ width:24px; height:24px; }
.nav-link[aria-current], .nav-link.is-current{ background:var(--fill); color:var(--accent-ink); }
.nav-link:focus-visible{ outline-offset:-3px; }
.nav-label{ display:block; max-width:100%; max-height:1.2em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:opacity .2s ease, max-height .28s var(--ease); }
.nav-count{
  position:absolute; top:3px; left:calc(50% + 4px);
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 2px var(--glass-strong);
  font-size:11px; font-weight:700; line-height:18px; text-align:center; font-variant-numeric:tabular-nums;
}
/* S49 → S58 (Kamilia 20/10): the « à valider » count on Trouver is brand blue again (GLASS.md §4: no red in the chrome;
   white on #2C5FC7 5.9:1) */
.nav-count--alert{ background:var(--accent); color:#FFFFFF; }
/* Compact tab bar while scrolling down (JS: html.tab-compact; no JS: scroll-driven, below) */
html.tab-compact .nav-list{ height:50px; }
html.tab-compact .nav-label{ opacity:0; max-height:0; }
html.tab-compact .nav:focus-within .nav-list{ height:64px; }
html.tab-compact .nav:focus-within .nav-label{ opacity:1; max-height:1.2em; }
@supports (animation-timeline: scroll()){
  @keyframes tab-shrink{ to{ height:50px; } }
  @keyframes tab-label{ to{ opacity:0; max-height:0; } }
  html:not(.js) .nav-list{ animation:tab-shrink linear both; animation-timeline:scroll(root); animation-range:0 160px; }
  html:not(.js) .nav-label{ animation:tab-label linear both; animation-timeline:scroll(root); animation-range:0 120px; }
}

/* « + » Nouveau lead (S49: its only entrance): an icon with a tooltip; from 1100 px a labelled capsule */
.tool-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tool--new{ background:var(--accent); color:var(--on-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px -6px rgba(44,95,199,.7); }
.tool--new:hover{ background:var(--accent-hover); }
.tool--new[aria-current]{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent-fill); }

/* The user chip is a menu (S49): Mon compte, Se déconnecter — works without JS (details); admin.js closes it on Échap
   and on a click outside (details[data-menu]) */
.user-menu{ position:relative; flex:none; }
.user-menu > summary{ list-style:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.user-menu > summary::-webkit-details-marker{ display:none; }
.user-menu-caret{ display:none; color:var(--ink-2); }
.side-user.is-current .avatar{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent-fill); }
.user-menu-panel{
  position:absolute; z-index:45; top:calc(100% + 8px); right:0;
  width:min(240px, calc(100vw - 32px)); padding:6px;
  border-radius:var(--r-lg); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-pop);
  animation:pop-in .18s var(--ease); transform-origin:top right;
}
.user-menu-panel form{ margin:4px 0 0; padding-top:4px; border-top:1px solid var(--line); }
.user-menu-link{
  display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:0 12px;
  border:0; border-radius:calc(var(--r-lg) - 6px); background:none; color:var(--ink);
  font:inherit; font-size:var(--fs-base); text-align:left; text-decoration:none; cursor:pointer;
}
.user-menu-link:hover{ background:var(--fill-2); }
.user-menu-link .ico{ color:var(--ink-2); }
.user-menu-link[aria-current]{ background:var(--fill); color:var(--accent-ink); font-weight:600; }

/* Outside production: ONE banner says where calls and WhatsApp go (S49: no « [TEST] » inside the buttons).
   S58 (Kamilia 20/10): neutral and ONE line — orange is for Chaud and late only (ink-2 on fill-2: 5.4:1 light, 6.6:1 dark) */
.test-banner{
  display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:6px 12px; min-width:0;
  border-radius:var(--r-pill); background:var(--fill-2); box-shadow:inset 0 0 0 1px var(--card-line);
  color:var(--ink-2); font-size:var(--fs-sm); font-weight:500; line-height:1.4;
}
.test-banner > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.test-banner .ico{ flex:none; }

/* « Trouver » = Recherches + À valider (S49): the switch above both pages */
.find-switch{ margin:0 0 16px; }
.find-switch .seg-opt{ gap:6px; }
.seg-count{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--accent); color:#FFFFFF; /* S60: blue like the menu count (no red, S58) */ font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }

.main{
  display:block; max-width:var(--main-w);
  padding:12px max(16px, env(safe-area-inset-right, 0px)) calc(var(--tab-h) + 48px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.main:focus{ outline:none; }
html{ scroll-padding-bottom:calc(var(--tab-h) + 32px); }
@media (max-width:419.98px){
  .top .brand-name{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
@media (max-width:519.98px){
  /* phone: the status pill keeps its dot; its words stay for screen readers */
  .top .status-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .top .status{ width:32px; padding:0 !important; justify-content:center; }
}

/* ---------- Computer (>= 760 px): the left glass sidebar ---------- */
@media (min-width:760px){
  :root{ --bar-h:76px; --tab-h:0px; --side-w:76px; }
  html{ scroll-padding-top:24px; scroll-padding-bottom:24px; }
  .app{
    --mw:calc(var(--main-w) + 80px);
    display:grid; grid-template-columns:calc(var(--side-w) + 12px) minmax(0,1fr); grid-template-rows:auto 1fr;
  }
  .app:has(> .main--wide){ --mw:1480px; }
  .app:not(:has(> .side)){ grid-template-columns:minmax(0,1fr); }
  .top, .main{ grid-column:-2 / -1; width:100%; max-width:var(--mw); margin:0 auto; }

  .side{
    grid-column:1; grid-row:1 / span 2; align-self:start;
    position:sticky; top:12px; z-index:25;
    display:flex; flex-direction:column; gap:6px;
    width:var(--side-w); height:calc(100vh - 24px); height:calc(100dvh - 24px); margin:12px 0 12px 12px; padding:12px 10px;
    border-radius:var(--r-xl);
    background:var(--side-fill);
    box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-hi), var(--glass-shadow);
    overflow:visible;
    container:side / inline-size;
  }
  .side-head{ display:flex; align-items:center; gap:4px; min-height:44px; padding:0 0 10px 6px; }
  .side-head .brand{ flex:1; font-size:16px; }
  .top-brand{ display:none; }
  .app:not(:has(> .side)) .top-brand{ display:inline-flex; }
  .side-toggle{
    position:relative; display:none; align-items:center; justify-content:center; flex:none;
    width:36px; height:36px; padding:0; border:0; border-radius:50%;
    background:none; color:var(--ink-2); cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .side-toggle:hover{ background:var(--fill); color:var(--ink); }
  .side-toggle .ico{ width:18px; height:18px; }
  .side-toggle .tip{ top:50%; left:calc(100% + 12px); transform:translate(-3px,-50%); }
  .side-toggle:hover .tip, .side-toggle:focus-visible .tip{ opacity:1; transform:translate(0,-50%); transition-delay:.05s; }
  .tip-rail{ display:none; }

  /* main menu: icon + label rows, current = light pill */
  .nav{ position:static; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
  .nav-list{ display:flex; flex-direction:column; gap:2px; height:auto; padding:0; }
  .nav-link, .side-link{
    position:relative; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px;
    width:100%; height:42px; padding:0 12px; border:0; border-radius:var(--r-pill); background:none;
    color:var(--ink-2); font-family:var(--font); font-size:14px; font-weight:500; letter-spacing:-.005em; line-height:1.2; text-align:left; text-decoration:none; white-space:nowrap;
    cursor:pointer; transition:background-color .15s ease, color .15s ease;
  }
  .nav-link .ico, .side-link .ico{ flex:none; width:20px; height:20px; }
  .nav-link:hover, .side-link:hover{ background:var(--fill-2); color:var(--ink); }
  .nav-link[aria-current]{ background:var(--pill-on); color:var(--pill-on-ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 4px 12px -6px rgba(0,0,0,.35); }
  .nav-link:focus-visible, .side-link:focus-visible{ outline-offset:-2px; }
  .nav-label, .side-label{ max-width:none; max-height:none; overflow:hidden; text-overflow:ellipsis; }
  .nav-count{ position:static; margin-left:auto; min-width:22px; height:22px; line-height:22px; border-radius:11px; background:var(--accent); color:#FFFFFF; box-shadow:none; }
  .nav-count--alert{ background:var(--accent); }
  html.tab-compact .nav-list{ height:auto; }
  html.tab-compact .nav-label{ opacity:1; max-height:none; }
  @supports (animation-timeline: scroll()){ html:not(.js) .nav-list, html:not(.js) .nav-label{ animation:none; } }


  /* icons only: the sidebar is narrow (760–1099 px, or folded) */
  @container side (max-width:140px){
    .side-head{ flex-direction:column; gap:8px; padding:0 0 10px; }
    .side-head .brand{ flex:none; gap:0; }
    .side-head .brand-name{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .tip-open{ display:none; }
    .tip-rail{ display:inline; }
    .nav-list{ align-items:center; }
    .nav-item{ width:44px; }
    .nav-link, .side-link{ justify-content:center; width:44px; height:44px; padding:0; gap:0; }
    .nav-count{ position:absolute; top:0; right:-2px; margin:0; min-width:18px; height:18px; padding:0 5px; border-radius:9px; font-size:11px; line-height:18px; box-shadow:0 0 0 2px var(--bg); }
    /* the labels, folded into tooltips (opacity only: they keep naming their links) */
    .nav-label, .side-label{
      position:absolute; z-index:45; top:50%; left:calc(100% + 14px);
      width:max-content; max-width:260px; overflow:visible;
      padding:6px 10px; border-radius:var(--r-sm); background:var(--dark); color:var(--on-dark); box-shadow:var(--shadow-pop);
      font-size:var(--fs-sm); font-weight:500; line-height:1.3;
      opacity:0; transform:translate(-3px,-50%); pointer-events:none; transition:opacity .12s ease, transform .12s ease;
    }
    .nav-link:hover .nav-label, .nav-link:focus-visible .nav-label,
    .side-link:hover .side-label, .side-link:focus-visible .side-label{ opacity:1; transform:translate(0,-50%); transition-delay:.05s; }
  }

  /* the top bar: page title area on the left, tools on the right; quiet, scrolls away with the page */
  .top{ position:relative; padding:0 40px; gap:16px; }
  .top::before{ content:none; }
  .top-tools{ gap:8px; }
  .tool{ width:40px; height:40px; }
  .side-user{ padding:3px 14px 3px 3px; background:var(--fill-2); box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-hi); }
  .side-user:hover{ background:var(--fill); }
  .side-user .avatar{ width:34px; height:34px; box-shadow:none; }
  .side-user[aria-current]{ box-shadow:inset 0 0 0 1.5px var(--accent-fill); }
  .side-user[aria-current] .avatar{ box-shadow:none; }
  .side-user-text{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; display:flex; flex-direction:column; min-width:0; max-width:180px; line-height:1.2; }
  .side-user-name{ font-size:13px; }
  .side-user-role{ font-size:11px; }
  .user-menu-caret{ display:inline-block; margin-left:2px; }

  .main{ padding:4px 40px 80px; }
}
@media (min-width:1100px){
  /* « + Nouveau lead » as a labelled capsule */
  .tool--new{ flex-direction:row; width:auto; padding:0 16px 0 12px; gap:6px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600; white-space:nowrap; }
  .tool--new .tool-text{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
  .tool--new .tool-tip{ display:none; }
}
@media (min-width:760px) and (max-width:959.98px){
  .top, .main{ padding-left:24px; padding-right:24px; }
  .side-user{ padding-right:3px; }
  .side-user-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}
@media (min-width:1100px){
  :root{ --side-w:248px; }
  html.side-rail{ --side-w:76px; }
  /* unfolded, a short window scrolls the sidebar (folded, it stays visible for the tooltips) */
  html:not(.side-rail) .side{ overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
  html.side-anim{ transition:--side-w .2s var(--ease); }
  .js .side-toggle{ display:inline-flex; }
  /* while the width moves, the labels wait (no text squeezed into a narrow column) */
  html.side-switching .side :is(.brand-name, .nav-label, .side-label, .nav-count, .tip){ opacity:0 !important; transition:none !important; }
}
@media (pointer:coarse) and (min-width:760px){ .nav-link, .side-link{ height:44px; } .side-toggle{ width:44px; height:44px; } }

/* Auth layout (installation, connexion, erreurs) */
.auth-main{
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; padding:max(32px, env(safe-area-inset-top, 0px)) 16px 64px;
}
.auth-brand{ margin:8px 0 24px; font-size:var(--fs-base); font-weight:600; text-align:center; }
.auth-card{ width:100%; max-width:460px; padding:24px 20px; }
.auth-title{ font-size:var(--fs-lg); font-weight:700; letter-spacing:-.02em; }
.auth-lede{ margin-top:6px; color:var(--ink-2); }
.auth-card > .form, .auth-card > .callout + .form{ margin-top:24px; }
.auth-card > .callout{ margin-top:20px; }
.auth-card > .btn, .auth-card > form > .btn--block{ margin-top:24px; }
.auth-card > .form > .btn--block{ margin-top:4px; }
.auth-actions{ margin-top:24px; }
.auth-links{ display:flex; flex-direction:column; align-items:center; margin-top:12px; font-size:var(--fs-sm); }
.auth-ref{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; margin-top:16px; color:var(--ink-2); font-size:var(--fs-sm); }
.auth-help{ margin-top:16px; color:var(--ink-2); font-size:var(--fs-sm); text-align:center; }
.auth-stack{ width:100%; max-width:460px; display:flex; flex-direction:column; align-items:stretch; }
@media (min-width:760px){ .auth-card{ padding:32px; } .auth-main{ padding-top:64px; } }

/* 6. Page head, sections -------------------------------------------------- */
.page-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 24px; margin-bottom:32px; }
.page-head-text{ flex:1 1 320px; min-width:0; }
.page-title{ font-size:24px; font-weight:700; letter-spacing:-.022em; line-height:1.2; }
.lede{ margin-top:8px; color:var(--ink-2); max-width:62ch; }
.page-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.page-head-text > .state{ margin-top:12px; }
.page-head-text > .link-tap{ margin-top:2px; }
.home-actions{ margin-top:16px; }
/* Standalone text links get a full touch target (44px on phones and touch screens). */
.link-tap{ display:inline-flex; align-items:center; min-height:var(--tap); }
.back{ gap:2px; margin:-10px 0 6px -4px; padding:0 4px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:500; text-decoration:none; }
.back:hover{ text-decoration:underline; }
@media (max-width:759.98px){ .page-actions{ width:100%; } .page-actions > .btn{ flex:1 1 auto; } }
@media (min-width:760px){ .page-title{ font-size:var(--fs-xl); } }

.home-head{ margin-bottom:36px; }
.home-title{ display:flex; align-items:center; gap:12px; font-size:26px; font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.home-title .dot{ width:12px; height:12px; }
@media (min-width:760px){ .home-title{ font-size:34px; gap:14px; } .home-title .dot{ width:14px; height:14px; } }

.section{ margin-top:40px; }
.section:first-child{ margin-top:0; }
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 16px; margin-bottom:12px; }
.section-title{ font-size:var(--fs-md); font-weight:600; letter-spacing:-.012em; }
.section-note{ margin-top:4px; color:var(--ink-2); font-size:var(--fs-sm); max-width:62ch; }
.mini-title{ margin-bottom:8px; color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; letter-spacing:0; }
.count{ margin-left:6px; color:var(--ink-2); font-weight:400; font-variant-numeric:tabular-nums; }
.jump{ margin:-12px 0 32px; }

/* 7. Card ----------------------------------------------------------------- */
.card{ background:var(--surface); border-radius:var(--r-lg); box-shadow:0 0 0 .5px var(--line-strong), 0 1px 2px rgba(0,0,0,.03); }
.card-body{ padding:var(--pad); }
.card-clip{ overflow:hidden; }

/* 8. Buttons -------------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--ctl-h); padding:0 18px; border:0; border-radius:var(--r);
  background:var(--fill); color:var(--ink);
  font-size:var(--ctl-fs); font-weight:500; line-height:1.2; text-align:center; text-decoration:none; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn:hover{ background:var(--line-strong); }
.btn .ico{ width:18px; height:18px; }
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:var(--accent-hover); }
.btn--ghost{ background:var(--fill); color:var(--ink); }
.btn--quiet{ padding:0 10px; background:transparent; color:var(--accent-ink); }
.btn--quiet:hover{ background:var(--accent-soft); }
.btn--quiet-danger{ padding:0 10px; background:transparent; color:var(--red-ink); }
.btn--quiet-danger:hover{ background:var(--red-soft); }
.btn--danger{ background:var(--red); color:#FFFFFF; }
.btn--danger:hover{ background:var(--red); box-shadow:inset 0 0 0 100px rgba(0,0,0,.12); }
.btn--sm{ min-height:var(--ctl-h-sm); padding:0 12px; font-size:var(--fs-sm); }
.btn--sm .ico{ width:16px; height:16px; }
.btn--block{ display:flex; width:100%; }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.btn:disabled:hover{ background:var(--fill); }
.btn--primary:disabled:hover{ background:var(--accent); }
.btn.is-busy{ cursor:progress; }
.btn.is-busy:disabled{ opacity:.8; }
.btn.is-busy::before{
  content:""; width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:spin .7s linear infinite;
}
.btn.is-busy > .ico{ display:none; }
.btn.is-done{ color:var(--done-ink); }
@media (max-width:759.98px){ .btn--quiet, .btn--quiet-danger{ min-height:44px; } }

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:var(--ctl-h); height:var(--ctl-h); padding:0; border:0; border-radius:var(--r);
  background:transparent; color:var(--ink-2); -webkit-tap-highlight-color:transparent;
}
.iconbtn:hover{ background:var(--fill-2); color:var(--ink); }
.iconbtn:disabled{ opacity:.35; cursor:not-allowed; background:transparent; }
.iconbtn--sm{ width:var(--ctl-h-sm); height:var(--ctl-h-sm); }

/* 9. Forms ---------------------------------------------------------------- */
.form{ display:flex; flex-direction:column; gap:20px; }
.form-row{ display:grid; gap:20px; }
@media (min-width:640px){ .form-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } .form-row--wide-narrow{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); } }
.form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
@media (max-width:759.98px){ .form-actions > .btn{ flex:1 1 auto; } }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.label{ color:var(--ink); font-size:var(--fs-sm); font-weight:600; }
.label-aside{ color:var(--ink-2); font-size:var(--fs-xs); font-weight:400; }
.label-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.hint{ color:var(--ink-2); font-size:var(--fs-sm); }
.hint[data-level="weak"]{ color:var(--orange-ink); }
.hint[data-level="ok"], .hint[data-level="strong"]{ color:var(--green-ink); }

.input, .select, .textarea{
  width:100%; min-height:var(--ctl-h); padding:0 12px;
  border:1px solid var(--field-line); border-radius:var(--r);
  background-color:var(--surface); color:var(--ink);
  font-size:var(--ctl-fs); line-height:1.3;
  -webkit-appearance:none; appearance:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder, .textarea::placeholder{ color:var(--ink-2); opacity:1; } /* 5.5:1 light, 6.1:1 dark (v3.1: was .75 = 3.4:1) */
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.input[readonly]{ background-color:var(--surface-2); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"]{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.input:disabled, .select:disabled{ opacity:.55; cursor:not-allowed; }
.input--mono{ font-family:var(--mono); }
.input--lg{ min-height:52px; font-size:17px; }
.textarea{ min-height:120px; padding:10px 12px; line-height:1.5; resize:vertical; }
.textarea--short{ min-height:0; resize:none; } /* a one-line value that may wrap (saved search name) */
.select{
  padding-right:40px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.select--auto{ width:auto; }

.field-error{ display:flex; align-items:flex-start; gap:6px; color:var(--red-ink); font-size:var(--fs-sm); font-weight:500; }
.field-error .ico{ width:16px; height:16px; margin-top:2px; }

.input-group{ display:flex; gap:8px; min-width:0; }
.input-group > .input, .input-group > .input-reveal{ flex:1 1 auto; min-width:0; }
.input-reveal{ position:relative; min-width:0; }
.js .input-reveal > .input{ padding-right:52px; }
.reveal-btn{
  position:absolute; top:0; right:0; display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:100%; padding:0; border:0; border-radius:0 var(--r) var(--r) 0;
  background:none; color:var(--ink-2);
}
.reveal-btn:hover{ color:var(--ink); }
.reveal-btn[aria-pressed="true"]{ color:var(--accent-ink); }
.reveal-btn:focus-visible{ outline-offset:-3px; }
.note{ display:flex; align-items:flex-start; gap:8px; color:var(--ink-2); font-size:var(--fs-sm); }
.note .ico{ width:16px; height:16px; margin-top:2px; }

.otp{
  min-height:60px; padding:0 8px; text-align:center;
  font-size:28px; font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:.42em; text-indent:.42em;
}
.otp::placeholder{ color:var(--ink-2); opacity:1; }

.check{ display:flex; align-items:flex-start; gap:12px; min-height:44px; padding:11px 0; cursor:pointer; }
.check + .check{ border-top:1px solid var(--line); }
.check input{
  position:relative; width:20px; height:20px; margin:1px 0 0; flex:none;
  border:1.5px solid var(--field-line); border-radius:5px; background:var(--surface);
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background-color .12s ease, border-color .12s ease;
}
.check input::before{
  content:""; position:absolute; left:5.25px; top:1.5px; width:5px; height:10px;
  border:solid var(--on-accent); border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0;
}
.check input:checked{ border-color:var(--accent-fill); background:var(--accent-fill); }
.check input:checked::before{ opacity:1; }
.check input:disabled{ opacity:.4; cursor:not-allowed; }
.check-group{ display:flex; flex-wrap:wrap; gap:0 28px; }
.check-group > .check + .check{ border-top:0; }
.check-hint{ display:block; color:var(--ink-2); font-size:var(--fs-sm); }

.switch{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:44px; min-height:44px; cursor:pointer; font-size:var(--fs-sm); font-weight:500; }
.switch input{
  position:relative; flex:none; width:42px; height:26px; margin:0; border-radius:999px;
  background:var(--field-line); cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background-color .15s ease;
}
.switch input::before{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,.3), 0 0 0 .5px rgba(0,0,0,.08);
  transition:transform .18s var(--ease);
}
.switch input:checked{ background:var(--accent-fill); }
.switch input:checked::before{ transform:translateX(16px); }
.switch input:disabled{ opacity:.45; cursor:not-allowed; }
.switch-form{ display:inline-flex; align-items:center; gap:8px; margin:0; }

.seg{ display:inline-flex; flex-wrap:wrap; gap:2px; max-width:100%; padding:3px; border-radius:var(--r); background:var(--fill); }
.seg--grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; }
.seg--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (min-width:760px){ .seg--grid{ display:inline-flex; width:auto; } }
.seg-label{ position:relative; display:flex; min-width:0; }
.seg-input{ position:absolute; top:50%; left:50%; width:1px; height:1px; margin:0; opacity:0; }
.seg-opt{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%;
  min-height:calc(var(--ctl-h) - 6px); padding:0 14px; border-radius:calc(var(--r) - 3px);
  color:var(--ink); font-size:14px; font-weight:500; line-height:1.2; text-align:center; text-decoration:none; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.seg > .seg-opt{ width:auto; flex:1 1 auto; } /* tab links (direct children); radios keep width:100% inside .seg-label */
@media (max-width:759.98px){ .seg-opt{ min-height:var(--ctl-h); } }
.seg-opt:hover{ background:var(--fill-2); }
.seg-opt[aria-selected="true"], .seg-opt[aria-current="true"], .seg-input:checked + .seg-opt{
  background:var(--raised); color:var(--ink); font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.12), inset 0 0 0 2px var(--accent-ink); /* v3.3 (audit item 14): the ring is the cue, 4.6:1 or more against the track */
}
.seg-input:focus-visible + .seg-opt{ outline:2px solid var(--accent); outline-offset:1px; }
.seg-opt:focus-visible{ outline-offset:1px; }
.seg-n{ color:var(--ink-2); font-weight:400; font-variant-numeric:tabular-nums; }
.seg-opt[aria-selected="true"] .seg-n, .seg-opt[aria-current="true"] .seg-n, .seg-input:checked + .seg-opt .seg-n{ color:inherit; }

.filedrop{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:28px 16px; border:1.5px dashed var(--line-strong); border-radius:var(--r-lg);
  background:var(--surface-2); text-align:center;
}
.filedrop > .ico{ width:28px; height:28px; color:var(--accent-ink); }
.filedrop-title{ font-weight:600; }
.filedrop-name{ color:var(--ink-2); font-size:var(--fs-sm); overflow-wrap:anywhere; }
.filedrop.has-file, .filedrop.is-over{ border-style:solid; border-color:var(--accent); background:var(--accent-soft); }
.filedrop.has-file .filedrop-name{ color:var(--ink); font-weight:500; }
.js .filedrop input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.js .filedrop:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
html:not(.js) .filedrop input[type="file"]{ max-width:100%; margin-top:8px; font-size:var(--fs-sm); }

.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; }
.search-box{ position:relative; flex:1 1 240px; max-width:420px; }
.search-box > .ico{ position:absolute; top:50%; left:12px; width:18px; height:18px; color:var(--ink-2); transform:translateY(-50%); pointer-events:none; }
.search-box > .input{ padding-left:40px; }

/* 10. Badges, state, chips --------------------------------------------------- */
.dot{ display:inline-block; width:8px; height:8px; flex:none; border-radius:50%; background:var(--ink-3); }
.dot--ok{ background:var(--green); }
.dot--warn{ background:var(--orange); }
.dot--err{ background:var(--red); }
.dot--info{ background:var(--accent-fill); }
.dot--off{ background:var(--ink-3); }

.badge{
  display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:2px 10px; border-radius:999px;
  background:var(--fill-2); color:var(--badge-ink);
  font-size:var(--fs-xs); font-weight:600; line-height:1.3; white-space:nowrap;
}
.badge--blue{ background:var(--accent-soft); color:var(--accent-ink); }
.badge--green{ background:var(--green-soft); color:var(--green-ink); }
.badge--orange{ background:var(--orange-soft); color:var(--orange-ink); }
.badge--red{ background:var(--red-soft); color:var(--red-ink); }
.badge--wrap{ white-space:normal; }

.state{ display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); font-size:var(--fs-sm); font-weight:500; }
.state .dot{ background:var(--ink-3); }
.state--ok{ color:var(--green-ink); }
.state--ok .dot{ background:var(--green); }
.state--warn{ color:var(--orange-ink); }
.state--warn .dot{ background:var(--orange); }
.state--err{ color:var(--red-ink); }
.state--err .dot{ background:var(--red); }
.state--info{ color:var(--ink); }
.state--info .dot{ background:var(--accent-fill); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; min-height:var(--ctl-h-sm); padding:0 14px; border:0; border-radius:999px;
  background:var(--fill-2); color:var(--ink); font-size:var(--fs-sm); font-weight:500; text-decoration:none; white-space:nowrap;
}
.chip:hover{ background:var(--fill); }
.chip[aria-current="true"], .chip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.chip-n{ font-weight:400; font-variant-numeric:tabular-nums; }
@media (max-width:759.98px){ .chip{ min-height:44px; } }

.secret{
  display:inline-block; padding:2px 8px; border-radius:var(--r-sm);
  background:var(--fill-2); color:var(--ink); font-family:var(--mono); font-size:14px; white-space:nowrap;
}
.secret--lg{ padding:10px 14px; font-size:19px; letter-spacing:.08em; white-space:normal; word-spacing:.3em; }

/* 11. Tabs (data-tabs) ------------------------------------------------------ */
.tab-panel{ margin-top:16px; }
.tab-panel:focus-visible{ outline-offset:4px; border-radius:var(--r-lg); }
html:not(.js) .tab-panel + .tab-panel{ margin-top:40px; }
.tab-panel-title{ margin-bottom:12px; font-size:var(--fs-md); }

/* 12. Lists ---------------------------------------------------------------- */
/* Hand-off rows: <details class="row"> inside .card.rows */
.rows{ --row-cols:9.5rem minmax(0,1fr) 7rem 6.75rem 11.5rem 20px; overflow:hidden; }
.rows-head{ display:none; }
.row + .row{ border-top:1px solid var(--line); }
.row-sum{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  padding:14px var(--pad); -webkit-tap-highlight-color:transparent;
}
.row-sum:hover{ background:var(--fill-2); }
.row-sum:focus-visible{ outline-offset:-3px; border-radius:var(--r-lg); }
.row-main{ order:-2; display:flex; flex-direction:column; flex:1 1 calc(100% - 40px); min-width:0; }
.row-chev{ order:-1; color:var(--ink-2); transition:transform .15s var(--ease); }
.row[open] > .row-sum .row-chev{ transform:rotate(180deg); }
.row-title{ font-weight:600; overflow-wrap:anywhere; }
.row-sub{ color:var(--ink-2); font-size:var(--fs-sm); overflow-wrap:anywhere; }
.row-cell{ color:var(--ink-2); font-size:var(--fs-sm); }
.row-body{ padding:0 var(--pad) var(--pad); }
.row-grid{ display:grid; gap:20px; padding:16px; border-radius:var(--r); background:var(--surface-2); }
@media (min-width:760px){
  .rows-head{
    display:grid; grid-template-columns:var(--row-cols); gap:16px; padding:10px var(--pad);
    border-bottom:1px solid var(--line); color:var(--ink-2); font-size:var(--fs-xs); font-weight:600;
  }
  .row-sum{ display:grid; grid-template-columns:var(--row-cols); gap:16px; }
  .row-main, .row-chev{ order:0; }
  .row-grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; }
}

/* .rows--simple: title + one grey line, same layout on phone and desktop (Opposition) */
@media (min-width:760px){ .rows--simple .row-sum{ display:flex; } .rows--simple .row-main{ order:0; } }
.rows--simple .row-body .btn--quiet-danger{ margin-left:-10px; }

.facts{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.fact-value{ display:block; overflow-wrap:anywhere; }
.fact-source{ display:block; color:var(--ink-2); font-size:var(--fs-sm); }
.fact--missing .fact-value{ color:var(--ink-2); }
.quote{ padding-left:12px; border-left:2px solid var(--line-strong); overflow-wrap:anywhere; }
.quote + .hint, .row-grid .hint + .cluster{ margin-top:10px; }

/* Tables. .table--stack turns rows into cards under 760px (add data-label on each td). */
.table{ width:100%; font-size:14px; font-variant-numeric:tabular-nums; }
.table th{
  padding:10px var(--pad); border-bottom:1px solid var(--line);
  color:var(--ink-2); font-size:var(--fs-xs); font-weight:600; text-align:left; white-space:nowrap;
}
.table td{ padding:12px var(--pad); border-top:1px solid var(--line); vertical-align:middle; overflow-wrap:break-word; }
.table tbody tr:first-child td{ border-top:0; }
.table .cell-main{ font-weight:600; overflow-wrap:anywhere; }
.table .cell-actions{ text-align:right; white-space:nowrap; }
.table .cell-muted{ color:var(--ink-2); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.table-scroll .table td, .table-scroll .table th{ white-space:nowrap; overflow-wrap:normal; }
.table-scroll:focus-visible{ outline-offset:-2px; }
@media (min-width:760px){ .table .cell-main{ min-width:12rem; } }
@media (max-width:759.98px){
  .table--stack thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .table--stack, .table--stack tbody, .table--stack tr{ display:block; width:100%; }
  .table--stack tr{ padding:12px var(--pad); border-top:1px solid var(--line); }
  .table--stack tbody tr:first-child{ border-top:0; }
  .table--stack td{ display:flex; align-items:baseline; gap:12px; width:100%; padding:3px 0; border:0; text-align:left; }
  .table--stack td::before{ content:attr(data-label); flex:0 0 7.5rem; color:var(--ink-2); font-size:var(--fs-sm); font-weight:400; }
  .table--stack td.cell-main{ display:block; padding-bottom:6px; font-size:var(--fs-base); }
  .table--stack td.cell-main::before, .table--stack td.cell-actions::before{ content:none; }
  .table--stack td.cell-actions{ justify-content:flex-start; flex-wrap:wrap; padding-top:8px; white-space:normal; }
  .table--stack td.cell-actions > form > .btn--quiet-danger, .table--stack td.cell-actions > form > .btn--quiet, .table--stack td.cell-actions > .btn--quiet{ margin-left:-10px; }
}

.kv{ display:grid; grid-template-columns:minmax(7.5rem, 38%) minmax(0,1fr); }
.kv dt, .kv dd{ padding:12px var(--pad); border-top:1px solid var(--line); }
.kv dt{ color:var(--ink-2); padding-right:8px; }
.kv dd{ overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.kv dt:first-of-type, .kv dt:first-of-type + dd{ border-top:0; }

.todo{ list-style:none; }
.todo-item + .todo-item{ border-top:1px solid var(--line); }
.todo-link{ display:flex; align-items:center; gap:14px; min-height:56px; padding:12px var(--pad); color:var(--ink); text-decoration:none; }
a.todo-link:hover{ background:var(--fill-2); }
a.todo-link:focus-visible{ outline-offset:-3px; }
.todo-mark{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:none; border:1.5px solid var(--ink-3); border-radius:50%; color:#FFFFFF; }
.todo-mark .ico{ width:13px; height:13px; stroke-width:2.5; }
.todo-item.is-done .todo-mark{ border-color:var(--green); background:var(--green); }
.todo-item.is-done .todo-text{ color:var(--ink-2); }
.todo-text{ flex:1; min-width:0; }
.todo-link > .ico{ color:var(--ink-2); }

.alert-list{ list-style:none; }
.alert-row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 14px; padding:16px var(--pad); }
.alert-row + .alert-row{ border-top:1px solid var(--line); }
.alert-icon{ grid-row:span 3; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--orange-soft); color:var(--orange-ink); }
.alert-icon .ico{ width:18px; height:18px; }
.alert-row--err .alert-icon{ background:var(--red-soft); color:var(--red-ink); }
.alert-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; }
.alert-title{ font-size:var(--fs-base); font-weight:600; }
.alert-time{ color:var(--ink-2); font-size:var(--fs-sm); }
.alert-text{ color:var(--ink-2); font-size:var(--fs-sm); }
.alert-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.alert-actions form{ margin:0; }

.order{ list-style:none; }
.order-item{ display:flex; align-items:center; gap:12px; padding:10px 8px 10px var(--pad); }
.order-item + .order-item{ border-top:1px solid var(--line); }
.order-num{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; border-radius:50%; background:var(--fill); font-size:var(--fs-sm); font-weight:600; font-variant-numeric:tabular-nums; }
.order-main{ display:flex; flex-direction:column; flex:1; min-width:0; }
.order-name{ font-weight:600; }
.order-item.is-skipped .order-name{ color:var(--ink-2); }
.order-moves{ display:flex; gap:2px; margin:0; }

.checks{ list-style:none; }
.check-line{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; }
.check-line + .check-line{ border-top:1px solid var(--line); }
.check-icon{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; border-radius:50%; background:var(--green-soft); color:var(--green-ink); }
.check-icon .ico{ width:14px; height:14px; stroke-width:2.5; }
.check-line--fail .check-icon{ background:var(--red-soft); color:var(--red-ink); }
.check-text{ flex:1; min-width:0; padding-top:1px; }
.check-text > .link-tap{ display:flex; width:fit-content; } /* the fix link sits on its own line, full touch height */

.steps-list{ list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:12px; }
.steps-list > li{ counter-increment:step; display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; }
.steps-list > li::before{
  content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink); font-size:var(--fs-sm); font-weight:700;
}
.steps-list > li > span{ padding-top:3px; }

.disclosure{ border-radius:var(--r-lg); }
.disclosure > summary{
  display:flex; align-items:center; gap:8px; min-height:var(--tap);
  color:var(--accent-ink); font-weight:500; border-radius:var(--r);
}
.disclosure > summary .ico{ transition:transform .15s var(--ease); }
.disclosure[open] > summary .ico{ transform:rotate(180deg); }
.disclosure-body{ padding-top:12px; }
.disclosure--section > summary{ color:var(--ink); }
.disclosure--section > summary .ico{ color:var(--ink-2); }

.code-block{
  max-height:220px; margin:0; padding:12px 14px; overflow:auto; border-radius:var(--r);
  background:var(--surface-2); color:var(--ink); font-size:13px; line-height:1.55; white-space:pre;
}

/* 13. Feedback -------------------------------------------------------------- */
.flash-area{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.flash-area:empty{ display:none; }
.flash{
  display:flex; align-items:flex-start; gap:12px; padding:10px 8px 10px 14px; border-radius:var(--r);
  background:var(--fill-2); color:var(--ink);
}
.flash > .ico{ margin-top:2px; color:var(--ink-2); }
.flash-text{ flex:1; min-width:0; padding:1px 0; }
.flash-close{ margin:-6px -2px -6px 0; }
.flash--ok{ background:var(--green-soft); }
.flash--ok > .ico{ color:var(--green-ink); }
.flash--err{ background:var(--red-soft); }
.flash--err > .ico{ color:var(--red-ink); }
.flash--warn{ background:var(--orange-soft); }
.flash--warn > .ico{ color:var(--orange-ink); }
.flash--info{ background:var(--accent-soft); }
.flash--info > .ico{ color:var(--accent-ink); }

.callout{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:var(--r); background:var(--fill-2); color:var(--ink); }
.callout > .ico{ margin-top:1px; color:var(--ink-2); }
.callout-body{ flex:1; min-width:0; }
.callout-title{ font-weight:600; }
.callout-text{ margin-top:2px; font-size:var(--fs-sm); }
.callout-text + .callout-text{ margin-top:6px; }
.callout .btn{ margin-top:10px; }
.callout--warn{ background:var(--orange-soft); }
.callout--warn > .ico{ color:var(--orange-ink); }
.callout--danger{ background:var(--red-soft); }
.callout--danger > .ico{ color:var(--red-ink); }
.callout--ok{ background:var(--green-soft); }
.callout--ok > .ico{ color:var(--green-ink); }
.callout--info{ background:var(--accent-soft); }
.callout--info > .ico{ color:var(--accent-ink); }
.callout:focus{ outline:2px solid var(--accent); outline-offset:2px; }

.toast-region{
  position:fixed; z-index:60; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 12px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:max-content; max-width:calc(100vw - 32px); pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:var(--r);
  background:var(--dark); color:var(--on-dark); box-shadow:var(--shadow-pop);
  font-size:14px; pointer-events:auto; animation:toast-in .2s var(--ease);
  transition:opacity .18s ease, transform .18s ease;
}
.toast .ico{ width:18px; height:18px; }
.toast--ok .ico{ color:var(--green); }
.toast--err .ico{ color:#FF6961; }
.toast.is-leaving{ opacity:0; transform:translateY(6px); }
.auth .toast-region{ bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }
html:not(.js) .toast-region{ position:static; transform:none; margin:0 auto 24px; }
html:not(.js) .toast-region:empty{ display:none; }
@media (min-width:760px){ .toast-region{ bottom:24px; } }

.empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:48px 24px; text-align:center; }
.empty-icon{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:8px; border-radius:50%; background:var(--fill-2); color:var(--ink-2); }
.empty-icon .ico{ width:24px; height:24px; }
.empty-title{ font-size:var(--fs-md); font-weight:600; }
.empty-text{ max-width:42ch; color:var(--ink-2); }
.empty .btn{ margin-top:12px; }

.health{ display:flex; align-items:center; gap:8px; margin-top:48px; color:var(--ink-2); font-size:var(--fs-sm); }

.mock-note{
  display:inline-flex; align-items:center; gap:6px; margin:64px 0 16px; padding:4px 12px;
  border:1px dashed var(--line-strong); border-radius:999px;
  color:var(--ink-2); font-size:var(--fs-xs); font-weight:500;
}
.mock-note:first-child{ margin-top:0; }

/* 14. Dialog: bottom sheet on phone, centred card from 760px ---------------- */
.dialog{
  width:100%; max-width:100%; max-height:92vh; max-height:92dvh; margin:auto 0 0; padding:0; overflow:auto;
  border:0; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-pop);
}
.dialog::backdrop{ background:var(--backdrop); }
.dialog[open]{ animation:sheet-in .24s var(--ease); }
.dialog:not(:modal)[open]{ position:fixed; inset:0; z-index:50; height:fit-content; }
.dialog-body{
  display:flex; flex-direction:column; gap:16px;
  padding:22px max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
.dialog-title{ font-size:var(--fs-md); font-weight:600; }
.dialog-text{ margin-top:-8px; color:var(--ink-2); }
.dialog-actions{ display:flex; flex-direction:column-reverse; gap:8px; margin-top:4px; }
.dialog-actions > .btn{ width:100%; }
@media (min-width:760px){
  .dialog{ width:min(440px, calc(100% - 32px)); margin:auto; border-radius:var(--r-lg); }
  .dialog[open]{ animation:pop-in .18s var(--ease); }
  .dialog-body{ padding:24px; }
  .dialog-actions{ flex-direction:row; justify-content:flex-end; }
  .dialog-actions > .btn{ width:auto; }
}

/* 15. Stepper --------------------------------------------------------------- */
.stepper{ list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin-bottom:28px; }
.step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink-2); font-size:var(--fs-xs); font-weight:500; line-height:1.3; text-align:center; }
.step + .step::before{ content:""; position:absolute; top:13px; left:calc(-50% + 20px); right:calc(50% + 20px); height:2px; border-radius:1px; background:var(--fill); }
.step.is-done + .step::before{ background:var(--accent-fill); }
.step-mark{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
  font-size:var(--fs-sm); font-weight:600; font-variant-numeric:tabular-nums;
}
.step-mark .ico{ width:14px; height:14px; stroke-width:2.5; }
.step[aria-current="step"]{ color:var(--ink); font-weight:600; }
.step[aria-current="step"] .step-mark{ border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
.step.is-done .step-mark{ border-color:transparent; background:var(--accent-soft); color:var(--accent-ink); }

/* 16. Meter / quota ----------------------------------------------------------- */
.quota{ display:flex; flex-direction:column; gap:6px; }
.quota-text{ color:var(--ink-2); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.quota-text strong{ color:var(--ink); font-weight:600; }
.meter{
  display:block; width:100%; height:6px; border:0; border-radius:3px; overflow:hidden;
  background:var(--fill); -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.meter::-webkit-meter-inner-element{ display:block; }
.meter::-webkit-meter-bar{ height:6px; border:0; border-radius:3px; background:var(--fill); }
.meter::-webkit-meter-optimum-value{ border-radius:3px; background:var(--accent-fill); }
.meter::-webkit-meter-suboptimum-value{ border-radius:3px; background:var(--orange); }
.meter::-webkit-meter-even-less-good-value{ border-radius:3px; background:var(--red); }
.meter::-moz-meter-bar{ border-radius:3px; background:var(--accent-fill); }
.meter:-moz-meter-sub-optimum::-moz-meter-bar{ background:var(--orange); }
.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{ background:var(--red); }

/* 17. Screens --------------------------------------------------------------- */
/* Accueil: counters strip (hairlines drawn by the 1px gap) */
.stats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; overflow:hidden; background:var(--line); }
.stats--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.stats--inset{ border-radius:var(--r); box-shadow:0 0 0 .5px var(--line-strong); }
.stat{ display:flex; flex-direction:column; gap:4px; padding:16px; background:var(--surface); }
.stat-value{ order:-1; }
.stat-label{ color:var(--ink-2); font-size:var(--fs-sm); }
.home-lines{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.home-lines .state{ align-items:flex-start; line-height:1.4; }
.home-lines .dot{ flex:none; margin-top:.45em; }
.stat-value{ font-size:26px; font-weight:700; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat-note{ font-size:var(--fs-xs); font-weight:500; }
@media (min-width:760px){ .stats{ grid-template-columns:repeat(4, minmax(0,1fr)); } .stats--3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .stat{ padding:20px; } }

/* Connexions: tool cards */
.tools{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
@media (min-width:1100px){ .tools{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.tools > .tool:last-child:nth-child(odd){ grid-column:1 / -1; } /* UX-19: one card alone on its row is full width, never half */
.tool{ display:flex; flex-direction:column; gap:16px; padding:var(--pad); }
/* S60: a tool CARD is not the round top-bar button that shares the class (44 px, 40 px from 760 px): full size, card look */
.card.tool{ width:auto; height:auto; align-items:stretch; justify-content:flex-start; flex:initial; border-radius:var(--r-lg); background:var(--surface); color:inherit; }
.card.tool:hover{ background:var(--surface); }
.tool--wide{ grid-column:1 / -1; }
.tool-list{ list-style:none; }
.tool-list + .tools{ margin-top:12px; }
.tool-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px var(--pad); }
.tool-row + .tool-row{ border-top:1px solid var(--line); }
.tool-row-main{ flex:1 1 14rem; min-width:0; }
.tool-row-main > p + p{ margin-top:6px; }
.tool-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 12px; }
.tool-head > div{ flex:1 1 12rem; min-width:0; }
.tool-name{ font-size:var(--fs-base); font-weight:600; overflow-wrap:anywhere; }
.tool-purpose{ margin-top:2px; color:var(--ink-2); font-size:var(--fs-sm); }
.tool-head .state, .tool-head .badge{ flex:none; margin-top:1px; }
.tool-line{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:var(--fs-sm); } /* key, Remplacer, Retirer and the switch fit one line at 375 px */
.tool-line form{ margin:0; }
.tool-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.tool-meta{ color:var(--ink-2); font-size:var(--fs-sm); }
.tools + .tool-list--after{ margin-top:12px; }
.tool-foot > form{ margin:0; }
.kv--tool{ grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; font-size:14px; }
.kv--tool dt, .kv--tool dd{ padding:0; border:0; }
.copy-inline{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:0 4px; }
.copy-inline > .btn{ margin:-8px 0; }
.btn--copy{ min-width:7.5rem; } /* « Copier » → « Copié » never moves the field next to it (UX-18) */

/* QR code (always dark on white so phones can scan it, even in dark mode) */
.qr{ display:flex; align-items:center; justify-content:center; width:184px; height:184px; margin:0 auto; border-radius:var(--r); background:#FFFFFF; box-shadow:0 0 0 .5px var(--line-strong); color:#1D1D1F; }
.qr > svg{ width:168px; height:168px; }
.qr path{ fill:currentColor; }
.done-mark{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:16px; border-radius:50%; background:var(--green-soft); color:var(--green-ink); }
.done-mark .ico{ width:28px; height:28px; stroke-width:2.25; }
.error-code{ margin-bottom:6px; color:var(--ink-2); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }

/* Recovery codes (installation, Réglages) */
.codes{ list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.codes .secret{ display:block; padding:8px 10px; font-size:16px; letter-spacing:.06em; text-align:center; }

/* Recherches: result rows to tick */
.picks{ list-style:none; }
.picks > li + li{ border-top:1px solid var(--line); }
.pick{ padding:12px var(--pad); }
.pick-main{ flex:1; min-width:0; }
.pick-title{ display:block; font-weight:600; overflow-wrap:anywhere; }
.pick > .state{ flex:none; padding-top:1px; }
.picks-foot{ border-top:1px solid var(--line); }
/* Phones: the send button stays in reach above the tab bar while the list scrolls (UX-4). */
@media (max-width:759.98px){
  .picks-foot--sticky{ position:sticky; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); z-index:2; background:var(--surface); box-shadow:0 -1px 0 var(--line); }
}

/* Réglages: title column + card column */
.settings{ display:grid; gap:12px 32px; padding:32px 0; border-top:1px solid var(--line); }
.settings:first-of-type{ padding-top:0; border-top:0; }
@media (min-width:1000px){ .settings{ grid-template-columns:220px minmax(0,1fr); } }
.setting + .setting, .setting-row + .setting, .setting + .setting-row, .setting-row + .setting-row{ border-top:1px solid var(--line); }
.setting-sum, .setting-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; min-height:64px; padding:12px var(--pad); }
.setting-sum:focus-visible{ outline-offset:-3px; border-radius:var(--r-lg); }
.setting-main{ display:flex; flex-direction:column; flex:1 1 200px; min-width:0; }
.setting-title{ font-size:var(--fs-base); font-weight:600; }
.setting-action{ display:inline-flex; align-items:center; gap:4px; color:var(--accent-ink); font-size:var(--fs-sm); font-weight:500; }
.setting-action .ico{ width:16px; height:16px; transition:transform .15s var(--ease); }
.setting[open] .setting-action .ico{ transform:rotate(180deg); }
.setting-body{ padding:4px var(--pad) var(--pad); }
.setting-row form{ margin:0; }
.setting + .card-body{ border-top:1px solid var(--line); }
.setting-sum > .state{ flex:none; }
.setting-link{ color:var(--ink); text-decoration:none; }
.setting-link:hover{ background:var(--fill-2); }
.setting-link:focus-visible{ outline-offset:-3px; border-radius:var(--r-lg); }
.setting-link > .ico{ color:var(--ink-2); }
.setting-main--link{ justify-content:center; min-height:44px; border-radius:var(--r-sm); text-decoration:none; }
.setting-main--link .setting-title{ color:var(--accent-ink); }
.setting-main--link:hover .setting-title{ text-decoration:underline; }

/* 19. Sales app (v3): score, bullets, results, À valider, Aujourd'hui, Leads board, lead page ---------- */

.section-after{ margin-top:12px; }
.quota--inline{ flex:0 1 240px; min-width:180px; }
@media (max-width:759.98px){ .quota--inline{ flex-basis:100%; } }

/* Avatar (initials; the name is always written next to it or in sr-only text) */
.avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border-radius:50%;
  background:var(--fill); color:var(--ink); font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; line-height:1;
}
.avatar--sm{ width:24px; height:24px; }
.owner{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-size:var(--fs-sm); font-weight:500; }

/* Score chip: « Chaud · 86 ». Word + note + bars: never colour alone. */
.score{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  min-height:24px; padding:2px 10px 2px 7px; border-radius:999px;
  background:var(--fill-2); color:var(--badge-ink);
  font-size:var(--fs-sm); font-weight:600; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.score > .ico{ width:14px; height:14px; }
.score--hot{ background:var(--hot-soft); color:var(--hot-ink); }
.score--warm{ background:var(--orange-soft); color:var(--orange-ink); }
.score--cold{ background:var(--cold-soft); color:var(--cold-ink); }
.score--lg{ min-height:30px; padding:3px 12px 3px 9px; font-size:var(--fs-base); }
.score--lg > .ico{ width:16px; height:16px; }

/* Bullets: the 2–3 sourced facts about a company */
.bullets{ list-style:none; display:flex; flex-direction:column; gap:4px; font-size:14px; }
.bullets > li{ position:relative; padding-left:15px; overflow-wrap:anywhere; }
.bullets > li::before{ content:""; position:absolute; left:2px; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--ink-2); }

/* « Pourquoi ? »: the note, signal by signal */
.why > summary{
  display:inline-flex; align-items:center; gap:4px; min-height:var(--tap); padding-right:4px;
  border-radius:var(--r-sm); color:var(--accent-ink); font-size:var(--fs-sm); font-weight:500;
}
.why > summary .ico{ width:16px; height:16px; transition:transform .15s var(--ease); }
.why[open] > summary .ico{ transform:rotate(180deg); }
.why-body{ display:flex; flex-direction:column; gap:10px; margin-top:4px; padding:12px 14px; border-radius:var(--r); background:var(--surface-2); font-size:var(--fs-sm); }
.why-list{ list-style:none; }
.why-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 16px; padding:8px 0; }
.why-row:first-child{ padding-top:0; }
.why-row + .why-row{ border-top:1px solid var(--line); }
.why-label{ font-weight:600; }
.why-fact{ grid-column:1; color:var(--ink-2); overflow-wrap:anywhere; }
.why-fact a{ white-space:nowrap; }
.why-pts{ grid-column:2; grid-row:1 / span 2; align-self:center; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.why-row.is-unknown .why-pts, .why-row.is-minus .why-pts{ color:var(--ink-2); font-weight:500; }
.why-total{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; padding-top:10px; border-top:1px solid var(--line-strong); font-weight:600; }
.why-total .muted{ font-weight:400; }

/* Search progress (analysis runs in the background) */
.analysis{ display:flex; flex-direction:column; gap:8px; padding:var(--pad); }
.analysis-text{ font-weight:600; font-variant-numeric:tabular-nums; }
.progress{
  display:block; width:100%; height:6px; border:0; border-radius:3px; overflow:hidden;
  background:var(--fill); color:var(--accent-fill); -webkit-appearance:none; appearance:none;
}
.progress::-webkit-progress-bar{ border-radius:3px; background:var(--fill); }
.progress::-webkit-progress-value{ border-radius:3px; background:var(--accent-fill); }
.progress::-moz-progress-bar{ border-radius:3px; background:var(--accent-fill); }

/* Search results: one row per company, a tick column on the left */
.results{ list-style:none; }
.result{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 4px; padding:12px var(--pad) 12px calc(var(--pad) - 8px); }
.result + .result{ border-top:1px solid var(--line); }
.result:has(input:checked){ background:var(--accent-soft); }
.result-pick{ justify-content:center; padding:8px 0 0; } /* .check: 44px hit area, box on top */
.result-main{ display:flex; flex-direction:column; gap:8px; min-width:0; padding-top:9px; }
.result-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:4px 12px; }
.result-title{ font-size:var(--fs-base); font-weight:600; overflow-wrap:anywhere; }
.result-sub{ margin-top:-6px; color:var(--ink-2); font-size:var(--fs-sm); }
.result-main > .why{ margin-top:-4px; }
.result.is-muted .result-title{ color:var(--ink-2); }
.result--pending .result-main{ gap:10px; }
.skel{ display:block; height:10px; border-radius:5px; background:var(--fill); animation:pulse 1.6s ease-in-out infinite; }
.skel--80{ width:80%; } .skel--60{ width:60%; } .skel--40{ width:40%; }
.result-foot{ border-top:1px solid var(--line); }
@media (max-width:759.98px){
  .sticky-foot{ position:sticky; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); z-index:2; background:var(--surface); box-shadow:0 -1px 0 var(--line); }
}

/* À valider: one card per candidate */
.cands{ display:flex; flex-direction:column; gap:16px; }
.cand{ display:flex; flex-direction:column; gap:14px; padding:var(--pad); }
.cand-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 12px; }
.cand-head > div{ flex:1 1 14rem; min-width:0; }
.cand-title{ font-size:var(--fs-md); font-weight:600; overflow-wrap:anywhere; }
.cand-sub{ margin-top:2px; color:var(--ink-2); font-size:var(--fs-sm); }
.cand-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.cand > .why{ margin-top:-8px; }
.mini-kv{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; font-size:14px; }
.mini-kv dt{ color:var(--ink-2); }
.mini-kv dd{ min-width:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.mini-kv .fact-source{ display:inline; margin-left:6px; font-size:var(--fs-xs); }
.mini-kv .fact--missing{ color:var(--ink-2); }
.verify{ padding-top:2px; border-top:1px solid var(--line); }
.verify > legend{ float:left; width:100%; padding:12px 0 2px; } /* float: the legend sits inside the fieldset flow */
.verify-row{ clear:both; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 12px; }
.verify-row + .verify-row{ border-top:1px solid var(--line); }
.verify-row > .check{ flex:1 1 16rem; }
.verify-row > .btn{ margin-right:-10px; }
.verify-links{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 4px; margin-right:-10px; }
.verify-site{ clear:both; margin:-4px 0 6px 32px; }
.verify-site > summary{ font-size:var(--fs-sm); }
.verify-site-body{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-top:4px; }
.verify-site-body > .field{ align-self:stretch; }
@media (max-width:759.98px){ .verify-links{ justify-content:flex-start; margin:-6px 0 6px 22px; } .verify-site{ margin-left:32px; } }
.cand-actions{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; padding-top:14px; border-top:1px solid var(--line); }
.assign{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; flex:1 1 20rem; }
.assign > .field{ flex:1 1 11rem; }
.cand-actions .disclosure > summary{ padding:0 10px; margin-left:-10px; color:var(--ink); }
.reject-body{ display:flex; flex-direction:column; gap:12px; }
.gate-hint{ flex-basis:100%; }
@media (max-width:759.98px){ .assign > .btn{ flex:1 1 100%; } }

/* Aujourd'hui: the day's tasks */
.tasks{ list-style:none; }
.task{ padding:14px var(--pad); }
.task + .task{ border-top:1px solid var(--line); }
.task-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.task-ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--fill-2); color:var(--ink-2); }
.task-ico .ico{ width:18px; height:18px; }
.task-time{ flex:none; min-width:3.2em; font-size:var(--fs-md); font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.task-main{ position:relative; display:flex; flex-direction:column; gap:2px; flex:1 1 14rem; min-width:0; }
.task-title{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-weight:600; }
.task-title > a{ color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.task-title > a:hover{ text-decoration:underline; }
.task-why{ color:var(--ink-2); font-size:var(--fs-sm); }
.task-late{ color:var(--orange-ink); font-weight:600; }
.task-action{ display:flex; flex-wrap:wrap; gap:8px; flex:none; }
.task-after{ margin-top:12px; }
@media (min-width:760px){ .task-after{ margin-left:50px; } }
@media (max-width:759.98px){ .task-action{ width:100%; } .task-action > .btn{ flex:1 1 auto; } .task-ico{ width:32px; height:32px; } }
/* A whole block is clickable through its title link (.stretch); buttons beside it stay separate. */
.stretch::after{ content:""; position:absolute; inset:-6px -4px; }
.stretch:focus-visible{ outline:none; }
.stretch:focus-visible::after{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }

.today-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 24px; }
.task-action > form{ display:flex; margin:0; }
.task-hint{ color:var(--ink-2); font-size:var(--fs-sm); }
.task-gate{ display:flex; align-items:flex-start; gap:8px; color:var(--ink-2); font-size:var(--fs-sm); }
.task-gate .ico{ margin-top:2px; flex:none; }
@media (max-width:759.98px){
  .task-action > form{ flex:1 1 auto; }
  .task-action > form > .btn{ flex:1 1 auto; }
  .task-action > .btn--quiet{ flex:0 0 auto; }
}
.done-list--card{ padding:4px var(--pad); }
.done-list > li{ align-items:center; }
.done-list.done-list--card > li{ grid-template-columns:3.4em minmax(0,1fr) auto; }
.done-list > li > form{ margin:-6px 0; }
.flash > form{ margin:-4px 0; flex:none; }

.sent-check{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 12px; border-radius:var(--r); background:var(--accent-soft); }
.sent-check-text{ flex:1 1 10rem; font-weight:500; }
.sent-check form{ margin:0; }

.outcomes{ display:flex; flex-direction:column; gap:12px; }
.outcome-group{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.outcome-label{ width:100%; color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; }
@media (max-width:759.98px){ .outcome-group{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); } .outcome-group > .btn{ white-space:normal; } .outcome-label{ grid-column:1 / -1; } }
.notice-line{ padding-left:12px; border-left:2px solid var(--line-strong); color:var(--ink); font-size:14px; }

.done-list{ list-style:none; font-size:14px; }
.done-list > li{ display:grid; grid-template-columns:3.4em minmax(0,1fr); gap:12px; padding:8px 0; }
.done-list > li + li{ border-top:1px solid var(--line); }
.done-list time{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.stat .meter{ margin-top:8px; }

/* Leads: board from 1200px (drag or menu), one list with stage chips below */
.board{ position:relative; border-radius:var(--r-lg); background:var(--surface); box-shadow:0 0 0 .5px var(--line-strong), 0 1px 2px rgba(0,0,0,.03); }
.board-col, .board-list, .board-zone{ display:contents; }
.board-head, .board-sub, .board-empty{ display:none; }
.tile{ position:relative; display:flex; flex-direction:column; gap:6px; padding:12px var(--pad); border-top:1px solid var(--line); }
.board > .board-col:first-child .board-list > .tile:first-child{ border-top:0; }
.tile-head{ display:flex; align-items:flex-start; gap:8px; }
.tile-title{ flex:1; min-width:0; padding-top:2px; font-weight:600; overflow-wrap:anywhere; }
.tile-title > a{ color:var(--ink); text-decoration:none; }
.tile-title > a:hover{ text-decoration:underline; }
.tile-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.tile-next{ color:var(--ink-2); font-size:var(--fs-sm); }
.tile-late{ color:var(--orange-ink); font-weight:600; }
.tile .menu{ margin:-6px -8px 0 0; }
.tile.is-dragging{ opacity:.45; }
.board-only{ display:none; }
@media (min-width:1200px){
  .list-only{ display:none !important; }
  .board-only{ display:revert; }
  .board{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; background:none; box-shadow:none; }
  .board-col{ display:flex; flex-direction:column; gap:8px; min-width:0; min-height:320px; padding:10px; border-radius:var(--r-lg); background:var(--fill-2); transition:background-color .12s ease, box-shadow .12s ease; }
  .board-zone{ display:flex; flex-direction:column; gap:8px; border-radius:var(--r); }
  .board-zone + .board-zone{ margin-top:8px; padding-top:10px; border-top:1px solid var(--line-strong); }
  .board-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 8px; padding:2px 4px 4px; }
  .board-title{ font-size:14px; font-weight:600; }
  .board-sum{ color:var(--ink-2); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
  .board-sub{ display:flex; justify-content:space-between; gap:8px; padding:0 4px; color:var(--ink-2); font-size:var(--fs-xs); font-weight:600; }
  .board-list{ list-style:none; display:flex; flex-direction:column; gap:8px; }
  .board-empty{ display:block; padding:6px 4px; color:var(--ink-2); font-size:var(--fs-sm); }
  .tile{ padding:10px 10px 10px 12px; border-top:0; border-radius:var(--r); background:var(--surface); box-shadow:0 0 0 .5px var(--line-strong), 0 1px 2px rgba(0,0,0,.04); }
  .tile-stage{ display:none; }
  .tile[draggable="true"]{ cursor:grab; }
  .board-col.is-over, .board-zone.is-over{ background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent); }
  .tile .menu{ margin:-4px -4px 0 0; }
}

/* Leads: toolbar, stage chips (list), extras of the board */
.leads-filter{ margin-bottom:16px; }
.leads-filter .search-box{ max-width:none; flex:1 1 260px; }
.field--inline{ flex:0 1 auto; }
.stage-chips{ margin:0 0 16px; }
/* .chips--scroll: on phones a long chip row scrolls sideways inside itself (never the page) */
@media (max-width:759.98px){
  .chips--scroll{ flex-wrap:nowrap; overflow-x:auto; margin-left:-16px; margin-right:-16px; padding:2px 16px 6px; scrollbar-width:none; overscroll-behavior-x:contain; }
  .chips--scroll::-webkit-scrollbar{ display:none; }
  .chips--scroll > .chip{ flex:none; }
  .leads-filter .field--inline{ flex:1 1 40%; }
  .leads-filter .select--auto{ width:100%; }
}
.board-help{ margin:-4px 0 12px; }
.board-help .ico--sm{ margin-top:0; vertical-align:-3px; }
.board-more{ display:none; }
.tile-amount{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tile--closed .tile-title{ font-weight:500; }
.tile-meta > .tile-next{ font-size:var(--fs-sm); }
.input-unit{ position:relative; display:flex; align-items:center; }
.input-unit > .input{ padding-right:64px; font-variant-numeric:tabular-nums; }
.input-unit-text{ position:absolute; right:12px; color:var(--ink-2); font-size:var(--fs-sm); pointer-events:none; }
.seg-opt > .ico{ width:16px; height:16px; }
@media (min-width:1200px){
  .main--wide{ padding-left:32px; padding-right:32px; }
  .board-more{ display:inline-flex; align-self:flex-start; margin:2px 4px 0; font-size:var(--fs-sm); }
  .board-col--end{ gap:0; }
  .board-col--end > .board-zone{ min-height:72px; padding:2px 0 0; }
}

/* Small popover menu (stage menu of a lead) */
.menu{ position:relative; flex:none; }
.menu > summary{ z-index:1; }
.menu > summary.iconbtn{ position:relative; }
.menu-panel{
  position:absolute; z-index:25; top:calc(100% + 4px); right:0;
  width:max-content; min-width:210px; max-width:min(280px, calc(100vw - 32px)); padding:6px;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-pop);
  animation:pop-in .14s var(--ease);
}
.menu-panel form{ margin:0; }
.menu-title{ padding:6px 10px 4px; color:var(--ink-2); font-size:var(--fs-xs); font-weight:600; }
.menu-item{
  display:flex; align-items:center; gap:10px; width:100%; min-height:var(--ctl-h); padding:0 10px;
  border:0; border-radius:var(--r-sm); background:none; color:var(--ink);
  font-size:14px; text-align:left; text-decoration:none; white-space:nowrap;
}
.menu-item:hover{ background:var(--fill-2); }
.menu-item .ico{ width:18px; height:18px; color:var(--ink-2); }
.menu-item[aria-current]{ font-weight:600; }
.menu-item[aria-current] .ico{ color:var(--accent-ink); }
.menu-item:disabled{ cursor:default; }
.menu-item:disabled:hover{ background:none; }
.menu-sep{ height:1px; margin:4px 6px; background:var(--line); }
.menu-item--danger{ color:var(--red-ink); }

/* Lead page: head, the 2–3 bullets, then two columns from 1100 px.
   Below 1100 px the columns dissolve and each block takes its phone order. */
.lead-head{ margin-bottom:16px; }
.lead-head .lede{ margin-top:4px; }
.lead-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px; }
.badge--stage{ min-height:30px; padding:3px 12px; background:var(--fill); color:var(--ink); font-size:var(--fs-sm); }
.lead-about{ display:flex; flex-direction:column; gap:4px; max-width:72ch; margin-bottom:32px; }
.bullets--lg{ gap:6px; font-size:var(--fs-base); }
.bullets--lg > li::before{ top:.62em; }
.lead-grid{ display:flex; flex-direction:column; gap:24px; }
.lead-col{ display:contents; }
.lead-block{ min-width:0; }
.lead-block--contact{ order:1; } .after-message{ order:2; } .lead-block--next{ order:3; } .lead-block--stage{ order:4; }
.lead-block--note{ order:5; } .lead-block--timeline{ order:6; } .lead-block--checks{ order:7; } .lead-block--company{ order:8; }
.lead-block--complete{ order:9; } .lead-block--optout{ order:10; }
@media (min-width:1100px){
  .lead-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
  .lead-col{ display:flex; flex-direction:column; gap:24px; min-width:0; }
  .lead-col > *{ order:0; }
}
.block-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.lead-block--contact > .block-head{ padding:var(--pad) var(--pad) 0; }
.lead-block .section-title{ font-size:var(--fs-base); }
.contact-see{ display:flex; flex-wrap:wrap; gap:0 20px; margin-top:-8px; padding:0 var(--pad) 4px; font-size:var(--fs-sm); }
.after-call{ display:flex; flex-direction:column; gap:12px; margin:0 var(--pad) var(--pad); padding:14px; border-radius:var(--r); background:var(--surface-2); }
.after-call .mini-title{ margin:0; }
.after-message{ margin:0; }
.next-actions{ margin:-4px 0 0 -10px; }
.tl-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; }
.tl-undo{ margin:-6px 0; }
.stage-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.assign-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; border-top:1px solid var(--line); }
.assign-row > .field{ flex:1 1 10rem; }
.check-link{ align-self:flex-start; margin-left:-10px; }
.lead-block--checks .checks .check-line:first-child{ padding-top:0; }
.kv--compact{ grid-template-columns:minmax(6rem, 34%) minmax(0,1fr); font-size:14px; }
.kv--compact dt, .kv--compact dd{ padding:9px var(--pad); }
.kv--compact dt:first-of-type, .kv--compact dt:first-of-type + dd{ border-top:1px solid var(--line); }
.optout{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:0 4px; }
.optout > .check{ padding-top:0; }
.optout > .btn{ margin-left:-10px; }
.contact-fix{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:0 var(--pad) var(--pad); }
.contact-fix > .check{ flex:1 1 16rem; padding:0; }

.contact-actions{ display:flex; flex-wrap:wrap; gap:8px; padding:var(--pad); }
.contact-actions > .btn, .contact-actions > form{ flex:1 1 0; min-width:7.5rem; }
.contact-actions > form{ display:flex; margin:0; }
.contact-actions > form > .btn{ flex:1 1 auto; min-width:0; }
.contact-actions .btn{ white-space:normal; }
/* Phones: one full-width 44 px button per channel, in a column (thumb reach; never wider than the card, v3.1) */
@media (max-width:759.98px){ .contact-actions{ flex-direction:column; flex-wrap:nowrap; } .contact-actions > .btn, .contact-actions > form{ flex:none; width:100%; min-width:0; } }
.action-reasons{ list-style:none; display:flex; flex-direction:column; gap:6px; margin-top:-6px; padding:0 var(--pad) 14px; color:var(--ink-2); font-size:var(--fs-sm); }
.action-reasons > li{ display:flex; align-items:flex-start; gap:8px; }
.action-reasons strong{ color:var(--ink); font-weight:600; }
.action-reasons .ico{ width:16px; height:16px; margin-top:2px; flex:none; }
.contact-rows{ list-style:none; border-top:1px solid var(--line); }
.contact-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:12px var(--pad); }
.contact-row + .contact-row{ border-top:1px solid var(--line); }
.contact-row > .ico{ color:var(--ink-2); }
.contact-main{ display:flex; flex-direction:column; flex:1 1 12rem; min-width:0; }
.contact-value{ font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.contact-src{ color:var(--ink-2); font-size:var(--fs-sm); }
.contact-row .check{ min-height:44px; padding:0; align-items:center; font-size:var(--fs-sm); }
.reply-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px var(--pad); border-top:1px solid var(--line); }
.reply-row > .label{ width:100%; color:var(--ink-2); font-weight:500; }
.reply-row form{ margin:0; }

.next{ display:flex; flex-direction:column; gap:16px; padding:var(--pad); }
.seq{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 8px; }
@media (min-width:600px){ .seq{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
.seq-step{ display:flex; flex-direction:column; gap:2px; min-width:0; padding-top:8px; border-top:3px solid var(--fill); font-size:var(--fs-sm); }
.seq-day{ color:var(--ink-2); font-size:var(--fs-xs); font-weight:600; font-variant-numeric:tabular-nums; }
.seq-label{ font-weight:500; }
.seq-state{ color:var(--ink-2); font-size:var(--fs-xs); }
.seq-step.is-done{ border-top-color:var(--accent-fill); }
.seq-step[aria-current="step"]{ border-top-color:var(--orange); }
.seq-step[aria-current="step"] .seq-label{ font-weight:700; }
.seq-step.is-skipped{ border-top-style:dashed; border-top-color:var(--line-strong); }

.timeline{ list-style:none; }
.tl-item{ display:grid; grid-template-columns:32px minmax(0,1fr); gap:0 12px; padding:12px var(--pad); }
.tl-item + .tl-item{ border-top:1px solid var(--line); }
.tl-item > :not(.tl-ico){ grid-column:2; }
.tl-ico{ grid-row:1 / span 3; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--fill-2); color:var(--ink-2); }
.tl-ico .ico{ width:16px; height:16px; }
.tl-text{ overflow-wrap:anywhere; }
.tl-meta{ color:var(--ink-2); font-size:var(--fs-sm); }
.tl-item--system .tl-text{ color:var(--ink-2); }
.tl-quote{ margin-top:4px; padding-left:10px; border-left:2px solid var(--line-strong); color:var(--ink); font-size:14px; }

/* Message editor (lead page dialog, Modèles) */
.dialog--wide{ }
@media (min-width:760px){ .dialog--wide{ width:min(620px, calc(100% - 32px)); } }
.textarea--msg{ min-height:220px; }
.textarea--note{ min-height:72px; }
.locked{ display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:var(--r); background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-sm); white-space:pre-line; overflow-wrap:anywhere; }
.locked .ico{ width:16px; height:16px; margin-top:2px; flex:none; }
.field-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip--code{ font-family:var(--mono); font-size:13px; }
.mail-preview{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r); background:var(--surface-2); box-shadow:0 0 0 .5px var(--line-strong); }
.mail-preview-head{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px 12px; padding:12px 14px; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.mail-preview-head dt{ color:var(--ink-2); }
.mail-preview-head dd{ min-width:0; overflow-wrap:anywhere; font-weight:600; }
.mail-preview-body{ padding:14px; font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.mail-preview-foot{ padding:0 14px 14px; color:var(--ink-2); font-size:var(--fs-sm); white-space:pre-wrap; overflow-wrap:anywhere; }
.pv-var{ border-radius:3px; background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent-soft); }
.pv-bad{ border-radius:3px; background:var(--red-soft); color:var(--red-ink); box-shadow:0 0 0 2px var(--red-soft); }

/* Message page (/leads/{id}/message/{canal}) and the « prêt » page */
.msg-pick{ margin-bottom:16px; }
.msg-pick .field--inline{ flex:1 1 18rem; max-width:28rem; }
.msg-pick .select--auto{ width:100%; }
.msg{ overflow:hidden; }
.mail-preview--page{ border-radius:0; background:var(--surface); box-shadow:none; }
.mail-preview--page .mail-preview-body{ font-size:var(--fs-base); max-width:72ch; }
.mail-preview-foot{ position:relative; }
.foot-tag{ display:flex; align-items:center; gap:6px; margin-bottom:2px; color:var(--ink-2); font-size:var(--fs-xs); font-weight:600; white-space:normal; }
.mail-preview--page .mail-preview-foot{ margin:0 var(--pad) var(--pad); padding:10px 12px; border-radius:var(--r); background:var(--surface-2); }
.msg-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:var(--pad); border-top:1px solid var(--line); }
.msg-actions > form{ display:flex; margin:0; }
.msg-hint{ margin-top:-6px; padding:0 var(--pad) var(--pad); color:var(--ink-2); font-size:var(--fs-sm); }
.msg-opened{ margin:0 var(--pad) var(--pad); }
.msg-gate{ padding:0 var(--pad) var(--pad); }
@media (max-width:759.98px){ .msg-actions > form, .msg-actions > form > .btn{ flex:1 1 auto; } }
.page-title--sub{ margin:0 0 16px; font-size:var(--fs-lg); }
.wa-preview{ display:flex; flex-direction:column; gap:10px; padding:var(--pad); background:var(--surface-2); }
.wa-to{ display:flex; align-items:center; gap:8px; color:var(--ink-2); font-size:var(--fs-sm); font-weight:500; }
.wa-bubble{
  align-self:flex-start; max-width:min(52ch, 100%); padding:10px 12px; border-radius:14px 14px 14px 4px;
  background:var(--green-soft); color:var(--ink); font-size:var(--fs-base); line-height:1.45; white-space:pre-line; overflow-wrap:anywhere;
}
.wa-stop{ color:var(--ink); font-weight:500; }
.pret{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.pret .done-mark{ margin-bottom:4px; }

/* Modèles et séquence */
.tpl-chips{ margin-bottom:16px; }
.tpl{ display:grid; gap:24px; }
@media (min-width:1100px){ .tpl{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; } .tpl-preview{ position:sticky; top:24px; } }
.tpl-edit .block-head .label-aside{ margin-left:4px; }
.tpl-preview{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.tpl-preview .mail-preview-body{ font-size:14px; }
.preview-pick{ display:flex; gap:8px; margin:0; }
.fields-help{ grid-template-columns:7.5rem minmax(0,1fr); font-size:var(--fs-sm); }
.fields-help code{ font-size:12px; }
.seq-table .select--auto{ min-width:0; max-width:100%; }
.seq-table td{ white-space:normal; }
.seq-after{ border-top:1px solid var(--line); }
.seq-after .select--auto{ align-self:flex-start; max-width:100%; }
@media (max-width:759.98px){ .seq-table td{ align-items:center; } .seq-table td > .select{ flex:1 1 0; min-width:0; width:100%; } }

/* Conformité */
.callout-list{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:4px; font-size:var(--fs-sm); }
.callout-list a{ display:inline-flex; align-items:center; min-height:var(--tap); }
.conformite{ margin-top:24px; }
.conformite > .settings{ padding:0; border-top:0; }
.conformite > .settings + .settings{ padding-top:32px; border-top:1px solid var(--line); }
.conformite-save{ padding-top:8px; }
@media (min-width:1000px){ .conformite-save{ padding-left:252px; } }

/* Équipe */
.person-sum > .avatar{ width:36px; height:36px; font-size:var(--fs-sm); }
.person .setting-title{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.person-actions{ display:flex; flex-direction:column; gap:16px; padding-top:16px; border-top:1px solid var(--line); }
.person-actions > .assign{ flex:none; }
.person-actions .cluster form{ margin:0; }
.person-off .setting-title{ color:var(--ink-2); }
.temp-pass .secret--lg{ letter-spacing:.06em; word-spacing:0; }
.temp-pass .callout-body{ gap:10px; }
.temp-pass:focus{ outline:2px solid var(--accent); outline-offset:2px; }

/* Reprise */
.stats--flat{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.reprise-go{ border-top:1px solid var(--line); }

/* Small helpers */
.hint--warn{ color:var(--orange-ink); font-weight:500; }
.hub-alert{ margin-bottom:24px; }
.why-more{ align-self:flex-start; font-size:var(--fs-sm); }
.lead-head-text{ min-width:0; }

/* Réglages hub rows */
.hub-ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; border-radius:var(--r); background:var(--fill-2); color:var(--accent-ink); }
.hub-ico .ico{ width:18px; height:18px; }
.hub .setting-row, .hub .setting-sum{ flex-wrap:nowrap; }
.hub .setting-main{ flex:1 1 auto; }
@media (max-width:759.98px){ .hub .setting-row > .state{ display:none; } } /* the hint line repeats the state on phones */

/* Team */
.person-sum{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }

@keyframes pulse{ 50%{ opacity:.45; } }
@media (forced-colors: active){
  .score, .avatar, .seq-step{ border:1px solid CanvasText; }
  .board-col.is-over{ outline:2px solid Highlight; }
}

/* v3.1 (design critique of 2026-10-10) ------------------------------------------ */
/* Phones: anchors and focus land below the sticky brand bar and above the tab bar */
@media (max-width:759.98px){ html{ scroll-padding-top:calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12px); scroll-padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 12px); } }

/* Aujourd'hui: section anchors under the title (« RDV 1 · Appels 8 · Messages 4 · Fait 19 ») */
.jump-chips{ margin:-8px 0 28px; }

/* Call row: the number as text (v3.1) */
.task-num{ display:inline-flex; align-items:center; gap:2px; color:var(--ink-2); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; white-space:nowrap; }
.task-num .btn{ margin-right:-10px; }
.task-notice{ margin-top:6px; }
@media (min-width:760px){
  .task-action--call{ flex-direction:column; align-items:flex-end; gap:2px; }
}
@media (max-width:759.98px){
  .task-action--call{ flex-wrap:wrap; align-items:center; } /* wraps under ~440 px (verifier 15/10: 448 px wide at 375 with « Copier ») */
  .task-action--call > .btn{ flex:1 1 auto; }
  .task-action--call > .task-num{ flex:none; padding:0 4px; }
}
/* « Copier » the number: a mouse needs it (a computer rarely dials tel:), a touch phone dials */
@media (hover:none) and (pointer:coarse){ .copy-desk{ display:none !important; } }

/* Call result: always on the page, closed; « Appeler » only opens it (v3.1, replaces data-later) */
.call-result{ margin-top:8px; }
.call-result > summary{ width:fit-content; padding:0 10px; margin-left:-10px; font-size:var(--fs-sm); }
.call-result[open] > summary{ color:var(--ink); font-weight:600; }
@media (min-width:760px){ .task > .call-result{ margin-left:50px; } }
.call-form{ display:flex; flex-direction:column; gap:14px; padding:14px; border-radius:var(--r); background:var(--surface-2); }
.lead-block .call-result{ margin:0 var(--pad) 12px; }
.lead-block .call-result > summary{ margin-left:-10px; font-size:var(--fs-base); }
/* Two-step outcomes (RDV…, À rappeler…, Pas intéressé…): a radio styled as a button opens its panel.
   CSS only (:has), so it works without JS; without :has every panel shows (still usable). */
.outcome-pick{ position:relative; cursor:pointer; user-select:none; -webkit-user-select:none; }
.outcome-radio{ position:absolute; top:50%; left:50%; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.outcome-pick:has(.outcome-radio:checked){ background:var(--accent-soft); color:var(--accent-ink); box-shadow:inset 0 0 0 1.5px var(--accent-fill); }
.outcome-pick:has(.outcome-radio:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.outcome-panel{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; padding:12px; border-radius:var(--r); background:var(--surface); box-shadow:0 0 0 .5px var(--line-strong); }
.outcome-panel > .field{ flex:1 1 11rem; }
.outcome-panel > .hint{ flex-basis:100%; margin-top:-4px; }
.outcome-panel > .btn{ flex:none; }
@media (max-width:759.98px){ .outcome-panel > .btn{ flex:1 1 100%; } }
@supports selector(:has(*)){
  .outcome-panel{ display:none; }
  .call-form:has(.outcome-radio[value="meeting"]:checked) .outcome-panel[data-for="meeting"],
  .call-form:has(.outcome-radio[value="callback"]:checked) .outcome-panel[data-for="callback"],
  .call-form:has(.outcome-radio[value="not_interested"]:checked) .outcome-panel[data-for="not_interested"]{ display:flex; }
}
.call-note > summary{ font-size:var(--fs-sm); }
.call-note .disclosure-body{ padding-top:4px; }

/* Long lists: 5 rows per section, the rest one tap away */
.more-tasks{ margin-top:8px; }
.more-tasks > summary{ width:fit-content; padding:0 10px; }
.more-tasks > .tasks{ margin-top:4px; }

/* À valider: what the ticked checks change, under the checks (live with JS, server text without) */
.score-hint{ min-height:1.4em; color:var(--ink-2); font-size:var(--fs-sm); }
.score-hint:empty{ display:none; }
/* À valider: « Pub Meta » is one 3-way choice, never two contradictory values */
.verify-meta{ clear:both; display:flex; flex-direction:column; gap:6px; padding:10px 0 12px; border-top:1px solid var(--line); }
.verify-meta > .label-row{ align-items:center; }
.verify-meta .seg{ align-self:flex-start; }
.verify-meta .verify-links{ margin:0 0 0 -10px; justify-content:flex-start; }
@media (max-width:759.98px){ .verify-meta .seg{ align-self:stretch; } .verify-meta .seg-label{ flex:1 1 0; } }

/* Dev / test safeguard (ARCHITECTURE-v1 §0 rule 5): never confuse a test with a real prospect */
.test-tag{ display:inline-flex; align-items:center; min-height:20px; padding:1px 7px; border-radius:999px; background:var(--test-bg); box-shadow:inset 0 0 0 1px var(--orange); color:var(--orange-ink); font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; white-space:nowrap; } /* opaque token (no color-mix): readable on a blue button too, 6.2:1 light, 7.4:1 dark */
.btn .test-tag{ margin-left:2px; }
.test-note{ margin:0 var(--pad) 12px; }

/* Labels that depend on the device (CSS decides; the server renders both) */
.on-touch{ display:none; }
@media (hover:none) and (pointer:coarse){ .on-touch{ display:inline; } .btn.on-touch{ display:inline-flex; } .btn--block.on-touch{ display:flex; } .on-desk{ display:none; } }
/* « prêt » page and message page with « Automatique »: the device's usual client is the blue one */
@media (hover:none) and (pointer:coarse){
  .pick-desk.btn--primary{ background:var(--fill); color:var(--ink); }
  .pick-desk.btn--primary:hover{ background:var(--line-strong); }
  .pick-touch.btn--ghost{ background:var(--accent); color:var(--on-accent); }
  .pick-touch.btn--ghost:hover{ background:var(--accent-hover); }
}
.pret-links{ display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:759.98px){ .pret-links{ flex-direction:column; align-self:stretch; } .pret-links > .btn{ width:100%; } }

/* First day / missing signature on Aujourd'hui */
.welcome .empty-text + .cluster{ justify-content:center; margin-top:12px; }
.welcome .cluster .btn{ margin-top:0; }

/* v3.2 (Kamilia, 2026-10-12: no call script, no repetition, search target) ---------- */
/* Call row: the company's 2–3 sourced bullets are what you say (they replace the call script) */
.task-bullets{ margin-top:6px; color:var(--ink); }
/* The ONE legal line of a call (04 §5.1), quiet, above every submit button; tick only until the notice is given */
.call-legal{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.call-legal-text{ display:flex; align-items:flex-start; gap:8px; flex:1 1 18rem; min-width:0; color:var(--ink-2); font-size:var(--fs-sm); }
.call-legal-text > .ico{ flex:none; width:16px; height:16px; margin-top:1px; }
.call-legal > .check{ flex:none; padding:0; align-items:center; }
.call-legal > .check input{ margin-top:0; }
/* Recherches: Métier · Zone · Nombre de leads on one row from 1000 px (the count is never hidden in « Plus de filtres ») */
@media (min-width:640px){ .form-row--search{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); } .form-row--search > .field--count{ grid-column:1 / -1; } }
@media (min-width:1000px){ .form-row--search{ grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; } .form-row--search > .field--count{ grid-column:auto; } }
.field--count{ min-width:0; border:0; padding:0; margin:0; }
.field--count .seg{ display:grid; grid-template-columns:repeat(3, minmax(3.5rem,1fr)); width:100%; }
@media (min-width:1000px){ .field--count .seg{ width:auto; } }
.field--count .seg-opt{ font-variant-numeric:tabular-nums; }
/* Search progress and end states (« 12 leads utiles sur 25 · 40 entreprises analysées ») */
.analysis-title{ display:flex; align-items:center; gap:8px; font-weight:600; }
.analysis-title > .dot{ flex:none; }
/* Results beyond the first 5: one tap away, inside the same form (nothing is lost without JS) */
.more-results{ margin:0; border-top:1px solid var(--line); border-radius:0; }
.more-results > summary{ width:auto; padding:0 var(--pad) 0 calc(var(--pad) + 40px); }
.more-results > .results{ margin:0; border-top:1px solid var(--line); }
/* À valider: the legend alone heads the checks; the first check needs no second rule under it */
.verify > legend + .verify-meta{ border-top:0; padding-top:2px; }
/* Lead page « Pourquoi ? »: points only when the bullets already say the fact */
.why-row:not(:has(.why-fact)) .why-pts{ grid-row:auto; }

/* v3.3 (2026-10-13: BloomX Hub, ARCHITECTURE-v1 §19–§21, v3.2 audit) ------------------------------------ */

/* 1. Sidebar rail (§19.2): the v3.3 sidebar is archived (_archive/glass-2026-10-19); the Liquid Glass sidebar and its fold are in §5. */

/* Auth pages carry the same monogram */
.auth-brand{ display:flex; align-items:center; justify-content:center; gap:10px; }

/* 2. E-mail sent by the Hub (§20.1): team and personal meters, the « Envoyer » block, the sent line */
.send-meters{ display:flex; flex-wrap:wrap; gap:10px 24px; flex:0 1 460px; min-width:0; }
.send-meters > .quota{ flex:1 1 190px; min-width:0; }
@media (max-width:759.98px){ .send-meters{ flex-basis:100%; } }
.msg-send{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:var(--pad); border-top:1px solid var(--line); }
.msg-send > .hint{ flex:1 1 16rem; min-width:0; }
@media (max-width:759.98px){ .msg-send > .btn{ flex:1 1 100%; } }
.sent-line{ display:flex; align-items:center; gap:8px; color:var(--green-ink); font-weight:600; }
.sent-line > .ico{ flex:none; }
.mail-preview-head .label-aside{ font-weight:400; }

/* 3. Replies (§20.2, §20.5): the prospect's message in the timeline, « Répondre », markers */
.tl-item--reply > .tl-ico{ background:var(--accent-soft); color:var(--accent-ink); }
.tl-sub{ color:var(--ink-2); font-weight:400; }
.tl-reply{ margin:6px 0 2px; padding:12px 14px; border-radius:var(--r); background:var(--surface-2); color:var(--ink); font-size:14px; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere; }
.tl-cut{ display:block; margin-top:6px; color:var(--ink-2); font-size:var(--fs-sm); }
.tl-text > .badge{ margin-right:6px; vertical-align:1px; }
.tl-item--stop > .tl-ico{ background:var(--red-soft); color:var(--red-ink); }
.tl-item--bounce > .tl-ico{ background:var(--orange-soft); color:var(--orange-ink); }
.reply-compose{ margin-top:8px; }
.reply-compose > summary{ width:fit-content; }
.reply-compose[open] > summary{ background:var(--fill); color:var(--ink); }
.mail-compose{ display:flex; flex-direction:column; margin-top:10px; overflow:hidden; border-radius:var(--r); background:var(--surface); box-shadow:0 0 0 .5px var(--line-strong); }
.mail-compose > .field{ padding:14px 14px 0; }
.mail-compose .textarea{ min-height:150px; }
.mail-compose-foot{ margin:12px 14px 14px; padding:10px 12px; border-radius:var(--r); background:var(--surface-2); color:var(--ink-2); font-size:var(--fs-sm); white-space:pre-line; overflow-wrap:anywhere; }
.contact-row.is-invalid .contact-value{ color:var(--ink-2); text-decoration:line-through; text-decoration-thickness:1px; }

/* 4. QR call (§20.3): on a computer « Appeler » shows a QR code of tel:… and the number in large type */
.call-qr{ align-items:center; text-align:center; }
.call-qr .qr{ width:212px; height:212px; }
.call-qr .qr > svg{ width:196px; height:196px; }
.call-qr-num{ font-size:34px; font-weight:700; letter-spacing:.01em; line-height:1.1; font-variant-numeric:tabular-nums; }
.call-qr-hint{ max-width:34ch; }
.call-qr .dialog-actions{ align-self:stretch; }
@media (min-width:760px){ .call-qr .dialog-actions{ justify-content:center; } }

/* 5. Compte rendu d'appel (§19.1), its suggestion, its card in the timeline */
.report{ padding:var(--pad); }
.report-form{ display:flex; flex-direction:column; gap:18px; }
.report-head{ display:flex; align-items:flex-start; gap:12px; }
.report-ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); }
.report-ico .ico{ width:18px; height:18px; }
.chip-checks{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-check{ position:relative; display:inline-flex; min-width:0; }
.chip-check > input{ position:absolute; top:50%; left:50%; width:1px; height:1px; margin:0; opacity:0; }
.chip-check > span{
  display:inline-flex; align-items:center; min-height:var(--ctl-h-sm); padding:0 14px; border-radius:999px;
  background:var(--fill-2); color:var(--ink); font-size:var(--fs-sm); font-weight:500; line-height:1.2;
  cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
}
.chip-check > span:hover{ background:var(--fill); }
.chip-check > input:checked + span{ background:var(--accent-soft); color:var(--accent-ink); box-shadow:inset 0 0 0 2px var(--accent-ink); }
.chip-check > input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:759.98px){ .chip-check > span{ min-height:44px; } }
.report-other, .report-date{ max-width:22rem; }
@supports selector(:has(*)){
  .report-other, .report-date{ display:none; }
  .report-form:has(input[name="objections[]"][value="autre"]:checked) .report-other,
  .report-form:has(input[name="prochaine_etape"][value="rappeler"]:checked) .report-date{ display:flex; }
}
.report-transcript > summary{ width:fit-content; padding:0 10px; margin-left:-10px; }
.report-transcript .textarea{ min-height:140px; }
.suggest{ flex-wrap:wrap; align-items:center; }
.suggest .flash-text{ flex:1 1 16rem; }
.suggest-title{ font-weight:600; }
.suggest > .btn, .suggest > .cluster{ flex:none; margin:-2px 0; }
@media (max-width:759.98px){ .suggest > .btn, .suggest > .cluster{ flex:1 1 100%; } }
.tl-report{ margin-top:4px; }
.tl-report > summary{ display:inline-flex; align-items:center; gap:6px; width:fit-content; min-height:var(--tap); padding:0 10px; margin-left:-10px; border-radius:var(--r-sm); color:var(--accent-ink); font-size:var(--fs-sm); font-weight:500; }
.tl-report > summary .ico{ width:16px; height:16px; }
.tl-report > summary .ico:last-child{ transition:transform .15s var(--ease); }
.tl-report[open] > summary .ico:last-child{ transform:rotate(180deg); }
.tl-report-body{ margin:2px 0 4px; padding:12px 14px; border-radius:var(--r); background:var(--surface-2); }
.tl-report-body .mini-kv{ grid-template-columns:max-content minmax(0,1fr); }
.tl-transcript > summary{ display:inline-flex; align-items:center; min-height:var(--tap); color:var(--accent-ink); }
.tl-transcript-text{ margin-top:4px; white-space:pre-line; }
.tl-add{ margin-left:-10px; }

/* 6. Search target slider (§20.4): native range, 5–50 by 5, live value with JS, works without it */
.range{
  --pct:44.444%;
  display:block; width:100%; height:44px; margin:0; padding:0; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none; touch-action:pan-y;
}
.range:focus{ outline:none; }
.range::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:var(--fill); box-shadow:inset 0 0 0 .5px var(--line-strong); }
.js .range::-webkit-slider-runnable-track{ background:linear-gradient(90deg, var(--accent-fill) 0 var(--pct), var(--fill) var(--pct) 100%); }
.range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; margin-top:-9px; border:3px solid #FFFFFF; border-radius:50%; background:var(--accent-fill); box-shadow:0 1px 3px rgba(0,0,0,.35), 0 0 0 .5px rgba(0,0,0,.2); }
.range::-moz-range-track{ height:6px; border-radius:3px; background:var(--fill); }
.range::-moz-range-progress{ height:6px; border-radius:3px; background:var(--accent-fill); }
.range::-moz-range-thumb{ width:18px; height:18px; border:3px solid #FFFFFF; border-radius:50%; background:var(--accent-fill); box-shadow:0 1px 3px rgba(0,0,0,.35), 0 0 0 .5px rgba(0,0,0,.2); }
.range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.range:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.range-out{ min-width:2ch; color:var(--ink); font-size:var(--fs-md); font-weight:700; line-height:1; text-align:right; font-variant-numeric:tabular-nums; }
.range-scale{ display:flex; justify-content:space-between; margin-top:-8px; padding:0 6px; color:var(--ink-2); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.field--count > .label-row{ min-height:20px; }
@media (min-width:1000px){ .form-row--search{ grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(210px,1.15fr); } }

/* 7. Notifications (§21): one switch per kind in Mon compte; the sample e-mails page */
.notif-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; border-top:1px solid var(--line); }
.notif-foot > .note{ flex:1 1 18rem; }
.doc-main{ margin:0 auto; }
.mail-samples{ display:flex; flex-direction:column; gap:12px; }
.mail-samples .mail-preview{ background:var(--surface); }
.mail-samples .mail-preview-body a{ overflow-wrap:anywhere; }

/* 8. Small v3.3 pieces */
.contact-legal{ padding:12px var(--pad); border-top:1px solid var(--line); }
.call-legal--tick{ justify-content:flex-start; }

/* 18. Motion, high contrast ---------------------------------------------------- */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes sheet-in{ from{ transform:translateY(24px); opacity:0; } }
@keyframes pop-in{ from{ transform:scale(.97); opacity:0; } }
@keyframes toast-in{ from{ transform:translateY(8px); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@media (forced-colors: active){
  .dot, .todo-mark, .step-mark, .order-num{ forced-color-adjust:none; border:1px solid CanvasText; }
  .card, .flash, .callout, .dialog, .toast{ border:1px solid CanvasText; }
  .switch input{ border:1px solid ButtonText; }
  .switch input::before{ background:ButtonText; }
  .check input{ border-color:ButtonText; }
  .check input:checked{ forced-color-adjust:none; border-color:Highlight; background:Highlight; }
  .check input:checked::before{ border-color:HighlightText; }
  .seg-opt[aria-selected="true"], .seg-opt[aria-current="true"], .seg-input:checked + .seg-opt, .chip[aria-current="true"]{ outline:2px solid Highlight; }
  .meter{ border:1px solid CanvasText; }
  .chip-check > input:checked + span{ outline:2px solid Highlight; }
  .tool-tip, .tip, .side, .user-menu-panel{ border:1px solid CanvasText; }
  @container side (max-width:140px){ .nav-label, .side-label{ border:1px solid CanvasText; } }
  .nav-link[aria-current]{ outline:2px solid Highlight; }
  .brand-mark{ forced-color-adjust:none; border:1px solid CanvasText; }
}

/* Recherches S14 (round 3): « Où ? » + « Rayon » side by side, numbered slider scale, status counts, saved rows */
.zone-pair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(7.5rem,auto); gap:12px; align-items:start; min-width:0; }
.range-scale--steps{ padding:0 4px; }
.status-counts{ font-variant-numeric:tabular-nums; color:var(--ink-2); }
.saved-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.saved-actions .btn, .verify-row .btn{ min-height:44px; }
.verify-links{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.aside-counts{ list-style:none; display:flex; flex-direction:column; gap:4px; }
@media (min-width:760px){ .sticky-foot{ position:sticky; bottom:0; z-index:2; background:var(--surface); } }
@media (min-width:1000px){ .search-form .form-row--search{ grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr) minmax(210px,1fr); } }

/* =========================================================================
   S18 « Recherches façon Meta Ads » (70 §11 S18): numbered steps on the left, « Votre audience » on the right
   (sticky from 1024 px); below 1024 px the audience card follows the form and its count + « Trouver N leads »
   stay in a sticky bottom bar (above the tab bar on phones) until the end of the form. Gauge positioned by
   data-pos (0…20, log scale) — no inline style. Owner: S18 (form side only).
   ========================================================================= */
.s18{ display:flex; flex-direction:column; gap:16px; }
.s18-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.s18-aside{ display:contents; }
.s18-steps{ padding:0; }
.s18-step{ min-width:0; margin:0; padding:20px var(--pad); border:0; border-top:1px solid var(--line); }
.s18-step:first-child{ border-top:0; }
.s18-step > .field + .field, .s18-step > .zone-pair + .field{ margin-top:14px; }
.s18-step > .hint{ margin-top:8px; }
.s18-legend{ float:left; width:100%; padding:0; margin:0 0 12px; }
.s18-legend + *{ clear:both; }
.s18-step-title{ display:flex; align-items:center; gap:10px; margin:0 0 12px; color:var(--ink); font-size:var(--fs-md); font-weight:600; letter-spacing:-.012em; }
.s18-legend .s18-step-title{ margin:0; }
.s18-step-n{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink); font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums;
}
.s18-step-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.s18-step-head .s18-step-title{ margin:0; }
.s18-step-head .range-out{ font-size:var(--fs-lg); }
.s18-country{ color:var(--ink-2); }
.s18-sizes{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
@media (min-width:640px){ .s18-sizes{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.s18-size{
  display:flex; align-items:flex-start; gap:10px; min-height:44px; padding:12px 14px; border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line-strong); background:var(--surface); cursor:pointer;
  transition:box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.s18-size:hover{ background:var(--fill-2); }
.s18-size > input{ flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent); }
.s18-size:has(> input:checked){ box-shadow:inset 0 0 0 2px var(--accent); background:var(--accent-soft); }
.s18-size:has(> input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.s18-size-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.s18-size-title{ font-weight:600; }
.s18-size-desc{ color:var(--ink-2); font-size:var(--fs-sm); }
.s18-more{ padding:4px var(--pad) 12px; border-top:1px solid var(--line); border-radius:0; }

.audience{ padding:20px var(--pad); }
.audience-title{ margin:0 0 10px; color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; }
.audience-est{ transition:opacity .2s var(--ease); }
.audience[data-loading] .audience-est{ opacity:.55; }
.audience-count{ margin:0; color:var(--ink-2); }
.audience-n{ display:block; color:var(--ink); font-size:var(--fs-xl); font-weight:700; line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.audience:not([data-state="ok"]) .audience-n{ display:none; }
.audience-note{ margin-top:4px; }
.gauge-hint{ margin-top:12px; font-size:var(--fs-sm); }
.gauge-word{ font-weight:700; }
.audience:has(.gauge[data-level="narrow"]) .gauge-word{ color:var(--orange-ink); }
.audience:has(.gauge[data-level="good"]) .gauge-word{ color:var(--green-ink); }
.audience:has(.gauge[data-level="wide"]) .gauge-word{ color:var(--accent-ink); }
.gauge{ margin-top:14px; }
.gauge-track{ position:relative; display:flex; gap:2px; height:8px; margin:0 8px; }
.gauge-zone{ display:block; height:100%; border-radius:4px; }
.gauge-zone--narrow{ width:34%; background:var(--orange-soft); }
.gauge-zone--good{ width:40%; background:var(--green-soft); }
.gauge-zone--wide{ flex:1; background:var(--accent-soft); }
.gauge:not([data-pos]) .gauge-zone{ background:var(--fill-2); }
.gauge-dot{
  position:absolute; top:50%; left:0; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:var(--surface); box-shadow:0 0 0 2px var(--ink), 0 1px 3px rgba(0,0,0,.3);
  transition:left .35s var(--ease);
}
.gauge:not([data-pos]) .gauge-dot{ display:none; }
.gauge[data-pos="0"] .gauge-dot{ left:0%; }
.gauge[data-pos="1"] .gauge-dot{ left:5%; }
.gauge[data-pos="2"] .gauge-dot{ left:10%; }
.gauge[data-pos="3"] .gauge-dot{ left:15%; }
.gauge[data-pos="4"] .gauge-dot{ left:20%; }
.gauge[data-pos="5"] .gauge-dot{ left:25%; }
.gauge[data-pos="6"] .gauge-dot{ left:30%; }
.gauge[data-pos="7"] .gauge-dot{ left:35%; }
.gauge[data-pos="8"] .gauge-dot{ left:40%; }
.gauge[data-pos="9"] .gauge-dot{ left:45%; }
.gauge[data-pos="10"] .gauge-dot{ left:50%; }
.gauge[data-pos="11"] .gauge-dot{ left:55%; }
.gauge[data-pos="12"] .gauge-dot{ left:60%; }
.gauge[data-pos="13"] .gauge-dot{ left:65%; }
.gauge[data-pos="14"] .gauge-dot{ left:70%; }
.gauge[data-pos="15"] .gauge-dot{ left:75%; }
.gauge[data-pos="16"] .gauge-dot{ left:80%; }
.gauge[data-pos="17"] .gauge-dot{ left:85%; }
.gauge[data-pos="18"] .gauge-dot{ left:90%; }
.gauge[data-pos="19"] .gauge-dot{ left:95%; }
.gauge[data-pos="20"] .gauge-dot{ left:100%; }
.gauge-ends{ display:flex; justify-content:space-between; margin-top:6px; color:var(--ink-2); font-size:var(--fs-xs); }
.audience-choices{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.audience-sub{ margin:0 0 8px; color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; }
.aud-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.aud-chips:focus{ outline:none; }
.aud-chip{
  display:inline-flex; align-items:center; gap:2px; max-width:100%; min-height:32px; padding:0 12px; border-radius:999px;
  background:var(--fill-2); color:var(--ink); font-size:var(--fs-sm); font-weight:500;
}
.aud-chip:has(> .aud-chip-x){ padding-right:2px; }
.aud-chip-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aud-chip-x{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:28px; height:28px; padding:0; border:0;
  border-radius:50%; background:transparent; color:var(--ink-2); cursor:pointer;
}
.aud-chip-x:hover{ background:var(--fill); color:var(--ink); }
.aud-chip-x .ico{ width:14px; height:14px; }
.s18-estimer{ width:100%; margin-top:16px; }
.js .s18-estimer{ display:none; }
.audience-serper{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.audience-go{ min-height:44px; }

@media (max-width:479.98px){ .s18 .zone-pair{ grid-template-columns:minmax(0,1fr); } }
/* Below 1024 px: the audience card in the flow, then a sticky bottom bar (count + main button). */
@media (max-width:1023.98px){
  .audience-bar{
    position:sticky; bottom:16px; z-index:3; display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px;
    border-radius:var(--r-lg); background:var(--raised); box-shadow:var(--shadow-pop);
  }
  .audience-bar-count{ flex:1 1 auto; min-width:0; margin:0; color:var(--ink-2); font-size:var(--fs-sm); }
  .audience-bar-n{ color:var(--ink); font-size:var(--fs-md); font-weight:700; font-variant-numeric:tabular-nums; }
  .audience-bar-count[hidden] + .audience-go{ flex:1 1 auto; }
  .audience-go{ flex:0 0 auto; }
}
@media (max-width:759.98px){
  .audience-bar{ bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 8px); }
  .aud-chip{ min-height:44px; }
  .aud-chip-x{ width:44px; height:44px; margin:0 -6px 0 -4px; }
  .aud-chip:has(> .aud-chip-x){ padding-right:6px; }
}
/* 1024 px and wider: two columns, the audience sticky on the right. */
@media (min-width:1024px){
  .s18{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; max-width:1160px; }
  .s18-aside{ display:flex; flex-direction:column; gap:12px; position:sticky; top:24px; }
  .s18-step{ padding:24px 28px; }
  .s18-more{ padding:4px 28px 16px; }
  .audience{ padding:24px; }
  .audience-bar-count{ display:none; }
  .audience-go{ width:100%; min-height:48px; font-size:var(--fs-md); }
}
@media (forced-colors: active){
  .s18-size:has(> input:checked){ outline:2px solid Highlight; }
  .gauge-zone{ forced-color-adjust:none; border:1px solid CanvasText; }
  .gauge-dot{ forced-color-adjust:none; background:Canvas; border:2px solid CanvasText; }
  .aud-chip{ border:1px solid CanvasText; }
}
/* end S18 */

/* S21 B3 — the commercial's day (PLAN §4, §1.1–1.7, §1.11) ------------------
   Aujourd'hui: one quota line, keyboard row focus. Lead page: phone order with « Contacter » first, the number in the
   header, one contact block, folded « Suivi par » for one commercial. Call result: Calendly first, note on « Joint »,
   44 px targets. Message page: fitting templates, « Écrire pour moi » beside « Modèle », « Envoyer » always in view.
   Connexions: ready tools fold into one line. Ce qui marche: « Le détail » in one line. */

/* Aujourd'hui */
.day-quota{ gap:8px; max-width:560px; margin:-20px 0 28px; }
.day-quota .quota-text{ font-size:var(--fs-base); }
.q-part{ white-space:nowrap; }
/* .keys-hint (Aujourd'hui J / K / Entrée / R): removed 19/10 with the shortcuts (_archive/shortcuts-2026-10-19) */

/* Lead page (Kamilia 15/10): a compact header (the shared card + the stage + ONE next action), the action column on
   the left, the lead's journey on the right (360 px, sticky) from 1024 px. Phone: header and action first, the actions,
   then « Historique » folded. One column order for every width (CSS `order` on the blocks). */
.lead-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:20px; padding:var(--pad); border-radius:var(--r-lg); background:var(--surface); box-shadow:0 0 0 .5px var(--line-strong), 0 1px 2px rgba(0,0,0,.03); }
.lead-head .page-title{ font-size:var(--fs-lg); line-height:1.2; }
.lead-head-text{ min-width:0; }
.lead-head .lc{ margin:6px 0 0; padding:0; border:0; }
.lead-head .lc-name{ display:none; } /* the page title is the name */
.lead-head .lc-head{ min-height:0; }
.lead-head .lc-reach{ font-size:var(--fs-base); }
.lead-head .lc-tel{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; margin-left:-12px; border-radius:var(--r); font-weight:600; }
.lead-head .lc-tel:hover{ background:var(--accent-soft); }
.lead-head .lc-tel:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lead-head-side{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.lead-head-action{ min-height:48px; font-size:var(--fs-md); }
@media (max-width:759.98px){ .lead-head-action{ flex:1 1 100%; } .contact-call--dup{ display:none; } } /* phone: one « Appeler », the header's */
@media (min-width:1024px){
  .lead-head{ grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:16px 32px; padding:20px 24px; }
  .lead-head-side{ flex-direction:column; align-items:stretch; min-width:240px; }
  .lead-head-side > .badge--stage{ align-self:flex-end; }
}
.lead-about.lead-block{ margin-bottom:0; }
/* Blocks, in the order a commercial works them */
.lead-block--about{ order:1; } .lead-block--contact{ order:2; } .after-message{ order:3; } .lead-block--report{ order:4; }
.lead-block--next{ order:5; } .lead-block--advice{ order:6; } .lead-block--stage{ order:7; } .lead-block--checks{ order:8; }
.lead-block--note{ order:9; } .lead-block--company{ order:10; } .lead-block--sources{ order:11; } .lead-block--claude{ order:12; }
.lead-block--complete{ order:13; } .lead-block--optout{ order:14; } .lead-block--erase{ order:15; }
.lead-block--timeline{ order:9; } /* phone: « Historique » right after the note, before the folded extras */
.lead-grid{ gap:16px; }
@media (min-width:1024px){
  .lead-grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
  .lead-col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
  .lead-col > *{ order:initial; }
  .lead-col > .lead-block--about{ order:1; } .lead-col > .lead-block--contact{ order:2; } .lead-col > .after-message{ order:3; }
  .lead-col > .lead-block--report{ order:4; } .lead-col > .lead-block--next{ order:5; } .lead-col > .lead-block--advice{ order:6; }
  .lead-col > .lead-block--stage{ order:7; } .lead-col > .lead-block--checks{ order:8; } .lead-col > .lead-block--note{ order:9; }
  .lead-col > .lead-block--company{ order:10; } .lead-col > .lead-block--sources{ order:11; } .lead-col > .lead-block--claude{ order:12; }
  .lead-col > .lead-block--complete{ order:13; } .lead-col > .lead-block--optout{ order:14; } .lead-col > .lead-block--erase{ order:15; }
  .lead-col--journey{ position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; overscroll-behavior:contain; padding:2px; }
}
/* Never wider than the screen */
.lead-grid, .lead-col, .lead-block, .lead-block .cluster{ min-width:0; max-width:100%; }
.lead-block--claude .cluster > .btn{ white-space:normal; }
@media (max-width:759.98px){ .lead-block--claude .cluster > .btn{ flex:1 1 100%; } }
/* Folds inside the action column */
.contact-sources{ padding:0 var(--pad) 8px; border-top:1px solid var(--line); }
.contact-sources > summary{ font-size:var(--fs-sm); }
.contact-sources > .contact-rows{ border-top:0; margin:0 calc(-1 * var(--pad)); }
.contact-sources > .kv{ margin:0 calc(-1 * var(--pad)); }
.company-sum{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; min-height:52px; cursor:pointer; list-style:none; }
.company-sum::-webkit-details-marker{ display:none; }
.company-hint{ flex:1 1 auto; color:var(--ink-2); font-size:var(--fs-sm); }
.company-fold[open] .company-sum > .ico{ transform:rotate(180deg); }
.assign-solo{ border-top:1px solid var(--line); }
.assign-solo > summary{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-height:var(--tap); cursor:pointer; list-style:none; color:var(--ink-2); font-size:var(--fs-sm); }
.assign-solo > summary::-webkit-details-marker{ display:none; }
.assign-change{ color:var(--accent-ink); font-weight:500; }
.assign-solo[open] .assign-change{ display:none; }
.assign-solo > .assign-row{ padding:8px 0 0; border-top:0; }

/* The lead's journey: compact, dated, newest first, one line per event, filter chips (CSS :has, no JS) */
.journey-sum{ display:flex; align-items:center; gap:8px; min-height:52px; padding:0 var(--pad); border-radius:var(--r-lg); background:var(--surface); box-shadow:0 0 0 .5px var(--line-strong); cursor:pointer; list-style:none; }
.journey-fold[open] > .journey-sum{ margin-bottom:8px; }
@media (min-width:1024px){ .journey-sum{ padding:0; background:none; box-shadow:none; } }
.journey-sum::-webkit-details-marker{ display:none; }
.journey-sum .section-title{ margin:0; }
.journey-toggle{ margin-left:auto; color:var(--ink-2); }
.journey-fold[open] .journey-toggle .ico{ transform:rotate(180deg); }
.journey-filters{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px; }
.journey-chip{ position:relative; display:inline-flex; }
.journey-chip > input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.journey-chip > span{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:999px; background:var(--fill); color:var(--ink); font-size:var(--fs-sm); font-weight:500; }
.journey-chip > input:checked + span{ background:var(--dark); color:var(--on-dark); }
.journey-chip > input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:759.98px), (pointer:coarse){ .journey-chip > span{ min-height:44px; padding:0 16px; } }
.journey:has(.journey-radio--call:checked) .tl-item:not(.tl-item--call),
.journey:has(.journey-radio--message:checked) .tl-item:not(.tl-item--message),
.journey:has(.journey-radio--note:checked) .tl-item:not(.tl-item--note){ display:none; }
@supports not selector(:has(*)){ .journey-filters{ display:none; } }
.journey .timeline{ position:relative; }
.journey .tl-item{ grid-template-columns:24px minmax(0,1fr); gap:0 10px; padding:9px 12px; }
.journey .tl-item + .tl-item{ border-top:0; }
.journey .tl-item:not(:last-child)::before{ content:""; position:absolute; left:23px; top:33px; bottom:-9px; width:2px; background:var(--line); }
.journey .tl-item{ position:relative; }
.journey .tl-ico{ position:relative; z-index:1; width:24px; height:24px; }
.journey .tl-ico .ico{ width:13px; height:13px; }
.journey .tl-text{ font-size:14px; line-height:1.35; }
.journey .tl-meta{ font-size:var(--fs-xs); }
.journey .tl-quote{ font-size:13px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.journey .tl-report > summary{ min-height:32px; font-size:var(--fs-sm); }
.journey .tl-item--summary > .tl-text{ display:none; } /* the card « Résumé du RDV · Fathom · date » says it */
.journey .tl-item--summary > .tl-report{ grid-row:1; }
.lead-block--stage .block-head > .badge--stage{ display:none; } /* the stage is in the header */
.tl-tag{ display:inline-block; margin-left:4px; padding:0 6px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); font-size:var(--fs-xs); font-weight:500; vertical-align:1px; }
@media (min-width:1024px){
  .journey-sum{ cursor:default; pointer-events:none; }
  .journey-toggle{ display:none; }
  .journey-fold::details-content{ content-visibility:visible; block-size:auto; }
}

/* Call result: Calendly first, the note opens on « Joint », 44 px targets on a phone */
.outcome-first{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; flex-basis:100%; }
.outcome-first > .hint{ flex:1 1 14rem; margin:0; }
.outcome-or{ flex-basis:100%; margin:2px 0 -4px; color:var(--ink-2); font-size:var(--fs-sm); }
.call-note{ display:flex; flex-direction:column; gap:8px; }
.call-note-toggle{ padding:0; font-size:var(--fs-sm); }
.call-note-box{ display:none; flex-direction:column; gap:6px; }
.call-form:has(.outcome-radio:checked) .call-note-box,
.call-note:has(.call-note-check:checked) .call-note-box{ display:flex; }
.call-form:has(.outcome-radio:checked) .call-note-toggle{ display:none; }
@supports not selector(:has(*)){ .call-note-box{ display:flex; } .call-note-toggle{ display:none; } }
@media (max-width:759.98px), (pointer:coarse){
  .call-form .btn, .call-form .outcome-pick{ min-height:44px; }
  .call-result > summary{ min-height:44px; }
}

/* Message page */
.msg{ overflow:clip; }
.msg-tools{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 16px; margin-bottom:16px; }
.msg-tools .msg-pick{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; flex:1 1 18rem; max-width:30rem; margin:0; }
.msg-tools .msg-pick .field--inline{ flex:1 1 auto; max-width:none; }
.msg-one{ flex:1 1 18rem; margin:0; font-size:var(--fs-sm); }
.msg-ai{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; flex:0 1 auto; margin:0; }
.msg-ai > .hint{ flex:1 1 14rem; max-width:22rem; margin:0; }
.msg-why{ flex-basis:100%; }
.msg-why > summary{ min-height:32px; font-size:var(--fs-sm); }
.msg-why > .hint{ max-width:72ch; }
/* « Envoyer » stays in view while the e-mail is read */
.msg > .msg-send, .msg > .msg-actions{ position:sticky; bottom:0; z-index:5; background:var(--surface); box-shadow:0 -1px 0 var(--line), 0 -8px 16px -12px rgba(0,0,0,.18); }
@media (max-width:759.98px){
  .msg > .msg-send, .msg > .msg-actions{ bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
  .msg-tools .msg-pick, .msg-ai{ flex:1 1 100%; max-width:none; }
  .msg-ai > .btn{ flex:1 1 100%; }
}

/* Connexions: a ready tool in one line */
.tools > .tool-fold{ grid-column:1 / -1; order:1; } /* the open cards pair up first, the one-line ready tools follow */
.tool-fold{ border-radius:var(--r-lg); background:var(--surface); box-shadow:0 0 0 .5px var(--line-strong), 0 1px 2px rgba(0,0,0,.03); }
.tool-fold-sum{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-height:52px; padding:8px var(--pad); cursor:pointer; list-style:none; }
.tool-fold-sum::-webkit-details-marker{ display:none; }
.tool-fold-name{ font-weight:600; }
.tool-fold-q{ color:var(--ink-2); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.tool-fold-more{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; color:var(--accent-ink); font-size:var(--fs-sm); font-weight:500; }
.tool-fold[open] .tool-fold-more .ico{ transform:rotate(180deg); }
.tool-fold > .tool{ box-shadow:none; border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg); }
.tool-fold-sum:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-lg); }
.source-cost > summary{ min-height:32px; font-size:var(--fs-sm); }

/* Ce qui marche */
.detail-line{ color:var(--ink-2); font-size:var(--fs-sm); }
.detail-line strong{ color:var(--ink); font-size:var(--fs-base); font-weight:600; }
/* end S21 B3 */

/* S30 (V3 note §14, integrator 17/10): Modèles « Aperçu avec … » never wider than a 375 px screen */
.preview-pick{ min-width:0; max-width:100%; }
.preview-pick .select--auto{ min-width:0; max-width:100%; }
/* Compliance S1 (18/10): « Ne plus contacter » in one click from Aujourd'hui and À valider — quiet, at the end of the row */
.task-optout{ margin-top:4px; display:flex; justify-content:flex-end; }
.focus-optout{ margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); }

/* ---------- S49 (external audit, Kamilia 19/10): one-tap call card, « Ce qui s'est passé », opener, lead page bar ----------
   One action, one place. Every control is a capsule (glass.css), targets 44 px on touch, focus rings visible. */
/* The call card (Aujourd'hui): the indent of the row content lines up with the title (36 px icon + 14 px gap) */
.task--call > .pitch, .task--call > .pitch-fold, .task--call > .call-actions, .task--call > .happened, .task--call > .task-gate{ margin-top:12px; }
@media (min-width:760px){ .task--call > .pitch, .task--call > .pitch-fold, .task--call > .call-actions, .task--call > .happened, .task--call > .task-gate{ margin-left:50px; } }
.call-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.call-actions > form{ display:flex; margin:0; }
.call-btn{ min-height:44px; }
.call-num{ font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.task--first .call-btn{ min-height:52px; padding-inline:22px; font-size:var(--fs-md); }
@media (max-width:759.98px){
  .call-actions > .call-btn, .call-actions > form{ flex:1 1 9rem; }
  .call-actions > form > .btn{ flex:1 1 auto; }
}
.call-window{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; color:var(--ink-2); font-size:var(--fs-sm); }
.call-window--now{ color:var(--done-ink, var(--green)); font-weight:600; }
/* The first card of Aujourd'hui: the page's first move, lifted a little */
.today-first .tasks{ box-shadow:inset 0 0 0 1.5px var(--accent-soft), var(--glass-hi); }

/* « Ce qui s'est passé »: four direct outcomes + « Autre… » */
.happened-form{ display:flex; flex-direction:column; gap:10px; margin:0; }
.happened-now{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.happened-label{ width:100%; color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; }
.happened-now > .btn{ gap:6px; }
@media (max-width:759.98px){
  .happened-now{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .happened-label{ grid-column:1 / -1; }
  .happened-now > .btn{ min-height:44px; white-space:normal; }
}
.happened-more > summary{ display:inline-flex; align-items:center; gap:4px; width:fit-content; min-height:36px; padding:0 10px; margin-left:-10px; border-radius:var(--r-pill); color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; cursor:pointer; list-style:none; }
.happened-more > summary::-webkit-details-marker{ display:none; }
.happened-more > summary:hover{ background:var(--fill-2); color:var(--ink); }
.happened-more[open] > summary{ color:var(--ink); }
.happened-more[open] > summary .ico{ transform:rotate(180deg); }
.happened-body{ display:flex; flex-direction:column; gap:12px; margin-top:8px; padding:14px; border-radius:var(--r-md); background:var(--surface-2); }
.happened-row{ display:flex; flex-wrap:wrap; gap:8px; }
.happened-panel{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; }
.happened-panel > .field{ flex:1 1 11rem; }
.happened-panel > .btn{ flex:none; }
@media (max-width:759.98px){ .happened-panel > .btn{ flex:1 1 100%; } .happened-row > .btn{ flex:1 1 auto; min-height:44px; } }
@media (pointer:coarse){ .happened-now > .btn, .happened-more > summary, .happened-body .btn{ min-height:44px; } }

/* What to say: the opener, the niche warning, « Il/elle dit… » */
.pitch{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--glass-line); }
.pitch-label{ display:inline-flex; align-items:center; gap:6px; color:var(--accent-ink); font-size:var(--fs-sm); font-weight:600; }
.pitch-text{ font-size:var(--fs-md); line-height:1.45; max-width:68ch; }
.pitch-fact{ color:var(--ink-2); font-size:var(--fs-sm); }
.pitch-fact-text{ color:var(--ink); font-weight:600; }
.pitch-src{ color:var(--ink-2); }
.pitch-warn{ display:flex; align-items:flex-start; gap:6px; color:var(--ink-2); font-size:var(--fs-sm); }
.pitch-warn .ico{ margin-top:2px; flex:none; }
.pitch-obj{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px; }
.pitch-obj-label{ width:100%; color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; }
.obj{ max-width:100%; }
.obj > summary{ display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:var(--r-pill); background:var(--fill-2); box-shadow:inset 0 0 0 1px var(--glass-line); color:var(--ink); font-size:var(--fs-sm); font-weight:500; cursor:pointer; list-style:none; }
.obj > summary::-webkit-details-marker{ display:none; }
.obj > summary:hover{ background:var(--fill); }
.obj[open]{ flex-basis:100%; }
.obj[open] > summary{ background:var(--pill-on); color:var(--pill-on-ink); }
.obj-body{ display:flex; flex-direction:column; gap:4px; margin-top:6px; padding:10px 12px; border-radius:var(--r); background:var(--card); font-size:var(--fs-sm); line-height:1.45; max-width:68ch; }
.obj-next{ color:var(--ink-2); }
@media (pointer:coarse){ .obj > summary{ min-height:44px; } }
.pitch-fold > summary{ font-size:var(--fs-sm); }
.pitch-fold > .pitch{ margin-top:6px; }

/* WhatsApp « pas de WhatsApp » (S46-3) and the « … » menu of the lead page */
.wa-no{ margin:0; }
.more-menu{ position:relative; }
.more-menu > summary{ list-style:none; cursor:pointer; }
.more-menu > summary::-webkit-details-marker{ display:none; }
.more-menu-panel{
  position:absolute; z-index:40; top:calc(100% + 8px); right:0;
  width:min(320px, calc(100vw - 32px)); padding:12px;
  border-radius:var(--r-lg); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-pop);
  animation:pop-in .18s var(--ease); transform-origin:top right;
}
.more-menu-panel form{ display:flex; flex-direction:column; gap:10px; margin:0; }
.more-menu-panel form + form, .more-menu-panel form + .more-menu-sep{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }

/* Lead page: the ONE call bar (Appeler with the number · WhatsApp · « … »). On a phone it sticks to the bottom, above
   the tab bar (audit #14) — glass, one of the four blur layers of the phone. */
.lead-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.lead-bar > form{ display:flex; margin:0; }
.lead-bar .call-btn{ min-height:48px; }
@media (max-width:759.98px){
  .lead-bar--sticky{
    position:fixed; z-index:29; left:max(10px, env(safe-area-inset-left, 0px)); right:max(10px, env(safe-area-inset-right, 0px));
    bottom:calc(var(--tab-h) + max(10px, env(safe-area-inset-bottom, 0px)) + 8px);
    flex-wrap:nowrap; margin:0; padding:8px; border-radius:var(--r-xl);
    background:var(--glass-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-hi), var(--glass-shadow);
  }
  .lead-bar--sticky > .call-btn, .lead-bar--sticky > form{ flex:1 1 0; min-width:0; }
  .lead-bar--sticky > form > .btn{ flex:1 1 auto; }
  .lead-bar--sticky .call-num{ display:none; }
  .lead-bar--sticky > .more-menu{ flex:none; }
  .lead-bar--sticky .more-menu-panel{ top:auto; bottom:calc(100% + 10px); transform-origin:bottom right; }
  .main:has(.lead-bar--sticky){ padding-bottom:calc(var(--tab-h) + 128px + env(safe-area-inset-bottom, 0px)); }
}
.lead-next{ margin-top:6px; color:var(--ink-2); font-size:var(--fs-sm); }
/* A missing / late next step: a plain bold warning (orange stays for Chaud / urgent only, GLASS.md) */
.lead-next--missing{ color:var(--ink); font-weight:600; }
.lead-next--late{ color:var(--red-ink); font-weight:600; }

/* « Ce qui s'est passé » block of the lead page + « Changer d'étape à la main » */
.lead-block--happened .card-body{ display:flex; flex-direction:column; gap:12px; }
.after-rdv{ display:flex; flex-wrap:wrap; gap:8px; }
.stage-manual > summary{ font-size:var(--fs-sm); }
.stage-manual .stage-actions{ margin-top:10px; }
@media (prefers-reduced-motion:reduce){ .happened-more[open] > summary .ico{ transform:none; } .more-menu-panel, .user-menu-panel{ animation:none; } }
/* S46-3: WhatsApp on a board tile (French mobile only) — above the tile's stretched link, like the stage menu */
.tile-wa{ position:relative; z-index:1; flex:none; margin:-6px -4px 0 0; }
.tile-wa .iconbtn{ color:var(--accent-ink); }
.menu-panel form + form{ margin-top:4px; padding-top:4px; border-top:1px solid var(--line); }
.sx-star{ color:var(--accent-ink); font-size:13px; line-height:1; }
.sx-others{ border-top:1px solid var(--line); }
.sx-others > summary{ padding:12px var(--pad); min-height:44px; font-weight:600; }
/* A1 audit #7: a meeting with no result after a day is the first task, in red (tone « danger ») */
.task--danger{ box-shadow:inset 3px 0 0 var(--red); }
.task--danger .task-late{ color:var(--red-ink); }
/* The top-bar « .tool » buttons share their class name with the Connexions cards (§ « tools »): keep them round icons */
.top-tools .tool{ flex-direction:row; gap:0; padding:0; }
@media (min-width:1100px){ .top-tools .tool--new{ gap:6px; padding:0 16px 0 12px; } }
/* Résultats (audit #15, S49): 7-day funnel, weekly RDV target, early trends, opener A/B */
.funnel-line{ font-size:var(--fs-md); }
.input--narrow{ width:6.5em; flex:none; }
.subhead{ margin:8px 0 0; font-size:var(--fs-base); font-weight:600; }
.row-best .cell-main{ font-weight:600; }
/* Audit #8: « Modifier le texte » of a WhatsApp (editable preview, works without JS) */
.msg-edit{ margin-bottom:12px; }
.msg-edit .textarea{ width:100%; min-height:9em; margin-top:6px; }
/* Audit #7: the meeting on the lead page (time, Meet link, the 3 Calendly answers) */
.meeting-info{ display:flex; flex-direction:column; gap:6px; }
.meeting-info .ico{ vertical-align:-2px; }
.meeting-answers{ display:grid; gap:4px; margin:0; font-size:var(--fs-sm); }
.meeting-answers > div{ display:flex; gap:8px; }
.meeting-answers dt{ color:var(--ink-2); min-width:9em; }
.meeting-answers dd{ margin:0; }
#rdv + *{ margin-top:24px; }
/* ---------- S57 consistency pass (PM checklist, 20/10): shared patterns ---------- */
/* One empty state everywhere (.empty): icon in a soft circle, title, one hint line; --sm inside a section */
.empty--sm{ gap:6px; padding:28px 20px; }
.empty--sm .empty-icon{ width:40px; height:40px; margin-bottom:4px; }
.empty--sm .empty-icon .ico{ width:20px; height:20px; }
/* Lead page: ONE « Autres actions » card (Copier pour Claude · Chercher le téléphone · Effacer ses données), last */
.lead-grid .lead-block--more{ order:9; }
@media (min-width:1024px){ .lead-col > .lead-block--more{ order:16; } }
.lead-more-part + .lead-more-part{ padding-top:16px; border-top:1px solid var(--line); }
.lead-block--more .cluster > .btn{ white-space:normal; }
@media (max-width:759.98px){ .lead-block--more .cluster > .btn{ flex:1 1 100%; } }
.lead-erase > summary{ align-self:flex-start; width:auto; list-style:none; }
.lead-erase > summary::-webkit-details-marker{ display:none; }
.lead-erase[open] > summary .ico:last-child{ transform:rotate(180deg); }
.lead-erase > form{ margin-top:12px; }
/* A warning or error said in one line (same tones as .callout): « Adresse personnelle possible » on À valider */
.callout--line{ align-items:center; gap:8px; padding:10px 14px; font-size:var(--fs-sm); }
.callout--line > .ico{ margin-top:0; }
/* État du Hub: the H1 is the page name, the state is the top bar's pill under it */
.etat-pill{ margin-top:10px; }
/* Phone top bar: the status pill keeps a visible count next to its dot (« • 1 »), never a bare dot */
.status-n{ display:none; font-variant-numeric:tabular-nums; }
@media (max-width:519.98px){
  .top .status{ width:auto; min-width:44px; padding:0 10px !important; gap:5px; }
  .top .status-n{ display:inline; }
}
/* Leads board: columns never narrower than 176 px (all five fit at 1280 px) (the board scrolls sideways inside itself), names on 2 lines at
   most, and ONE column-header style for every stage (title left, count right) — Gagné / Perdu / En pause included */
@media (min-width:1200px){
  .board{ grid-template-columns:repeat(5, minmax(176px, 1fr)); overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:4px; }
  .tile-title{ overflow-wrap:break-word; }
  .tile-title > a{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
  .board-sub{ flex-wrap:wrap; align-items:baseline; gap:0 8px; padding:2px 4px 4px; color:var(--ink); font-size:inherit; font-weight:inherit; }
  .board-sub .board-sum{ color:var(--ink-2); }
}
/* À valider (a « focus » page, 720 px centred): the Trouver switch sits on the same axis as the card and the H1 */
.find-switch--focus{ display:flex; width:fit-content; margin-left:max(0px, calc((100% - 720px) / 2)); }
/* Page header: the actions sit top-right, on the H1's line (never at the bottom of a long lede) */
.page-head{ align-items:flex-start; }
/* Hors de la file: « Écarter ⌄ » opens the reasons as a list (one tap = one reason) */
.focus-row-menu .more-menu-panel{ width:min(260px, calc(100vw - 32px)); }
.focus-row-menu .more-menu-panel form{ gap:6px; }
.focus-row-menu .more-menu-panel .label{ text-align:left; }
.focus-row-menu .more-menu-panel .btn{ width:100%; justify-content:flex-start; }