/* ══════════════════════════════════════════════════════════════════
   donna PWA · Margot Design System V1 (couche additive)
   ──────────────────────────────────────────────────────────────────
   Chargée AVANT pwa-mobile.css → cascade CSS donne priorité aux
   overrides existants. Aucune régression visuelle immédiate.
   
   À mesure que les écrans sont reskinés avec les classes .m-*,
   ces composants prennent le dessus sur l'ancien.
   
   Scopé sous .pwa-root pour ne JAMAIS polluer le desktop.
   v1201 — Anthony 17 mai 2026, reskin Phase 1 Étape 1.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   DONNA MOBILE — DESIGN SYSTEM (V1)
   Tokens : extension stricte de CLAUDE.md (Light + Noir verrouillés)
   ══════════════════════════════════════════════════════════════════════ */

/* ─── TOKENS — LIGHT (défaut) ─────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:         #f7f8fa;
  --surface:    #ffffff;
  --s2:         #f1f3f7;
  --s3:         #e7ebf2;
  --border:     #e4e7ee;
  --border-hi:  #d3d8e3;

  /* Text */
  --text:       #14161f;
  --text-dim:   #4a5169;
  --muted:      #8a93ab;

  /* Accent (réservé décoratif/labels — JAMAIS bouton plein) */
  --accent:     #6b5cf5;
  --accent-hi:  #564bd8;
  --accent-dim: rgba(107,92,245,.09);

  /* Sémantique */
  --chaud:      #d64560;
  --tiede:      #c08a2e;
  --froid:      #3d7fc2;
  --green:      #22a06b;

  /* Radius (carré-mais-pas-brutal) */
  --radius-sm:  3px;
  --radius:     4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;       /* mobile-only : bottom sheets */
  --radius-full: 999px;

  /* Élévation — 5 niveaux mobile */
  --e0: none;
  --e1: 0 1px 2px rgba(20,22,31,.05);
  --e2: 0 4px 14px rgba(20,22,31,.07);
  --e3: 0 8px 24px rgba(20,22,31,.10);
  --e4: 0 16px 40px rgba(20,22,31,.14);
  --e5: 0 24px 60px rgba(20,22,31,.22); /* modals critiques */

  /* Typo — Mobile scale (≥ 24 visible en mouvement, ≥ 13 minimum lisible) */
  --font:         -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --font-display: var(--font);
  --font-mono:    ui-monospace, 'JetBrains Mono', monospace;

  /* Motion */
  --dur-instant: 100ms;
  --dur-fast:    200ms;
  --dur-medium:  300ms;
  --ease:        cubic-bezier(.2,.7,.2,1);    /* ease-out par défaut */
  --ease-in:     cubic-bezier(.4,0,1,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Safe areas iOS (fallback 0) */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bot:    env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* Touch target minimum */
  --hit: 44px;
}

/* ─── TOKENS — NOIR ───────────────────────────────────────────────── */
html[data-theme="noir"] .pwa-root,
html[data-theme="noir"] body.is-mobile.pwa-active #__pwa_tabbar_host,
html[data-theme="noir"] body.is-mobile.pwa-active #__pwa_sheet_host,
.scope-noir,
.mds-demo .card-pane.noir {
  /* [v1253] Anthony "tu as adouci le theme noir sur desktop, fais pareil PWA"
     Aligné sur themes.css v1150 desktop (style Linear focus mode gris-bleuté) */
  --bg:         #0f1115;
  --surface:    #16181d;
  --s2:         #1c1e24;
  --s3:         #23262d;
  --border:     rgba(255,255,255,.07);
  --border-hi:  rgba(255,255,255,.12);

  --text:       #e7e9ee;
  --text-dim:   #a8adbd;
  --muted:      #6a7080;

  --accent:     #8b7bff;
  --accent-hi:  #a89dff;
  --accent-dim: rgba(139,123,255,.13);

  --chaud:      #ff6680;
  --tiede:      #f0c050;
  --froid:      #5ca8ff;
  --green:      #4fd49a;

  /* Radius Noir un cran plus serré */
  --radius-sm:  2px;
  --radius:     3px;
  --radius-md:  5px;
  --radius-lg:  6px;
  --radius-xl:  10px;

  --e1: 0 1px 2px rgba(0,0,0,.5);
  --e2: 0 4px 14px rgba(0,0,0,.5);
  --e3: 0 8px 24px rgba(0,0,0,.6);
  --e4: 0 16px 40px rgba(0,0,0,.65);
  --e5: 0 24px 60px rgba(0,0,0,.75);
}

/* ─── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* [v1204 fix] Ligne supprimée — elle imposait min-height:100vh à TOUS les éléments .m-* (avatar, badge, li, etc.), ce qui étirait l'avatar et le score à toute la hauteur de l'écran. Le min-height:100vh était l'adaptation foirée du `body { min-height: 100vh }` original du DS Margot. Le body n'a pas besoin de cette règle ici car .pwa-root est déjà fullscreen via son layout fixe. */
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ════════════════════════════════════════════════════════════════════
   PAGE SHELL
   ════════════════════════════════════════════════════════════════════ */
.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 28px 160px;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.hero-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: #000;
  display: grid; place-items: center;
  border: 1px solid var(--accent);
  box-shadow: 0 0 24px rgba(107,92,245,.18);
}
.hero-logo svg { width: 36px; height: 36px; }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  color: var(--accent); text-transform: uppercase; margin-bottom: 8px;
}
.hero h1 {
  font-family: var(--font-display); font-size: 36px; font-weight: 800;
  letter-spacing: -.5px; line-height: 1.05; margin-bottom: 10px;
}
.hero h1 .accent-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lede {
  color: var(--text-dim); font-size: 14px; line-height: 1.55;
  max-width: 680px;
}
.hero-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.hero-meta b { color: var(--text); font-weight: 600; }

/* Intro note */
.intro-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.intro-col h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--muted); text-transform: uppercase; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.intro-col h4::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
}
.intro-col.do h4::before    { background: var(--green); }
.intro-col.dont h4::before  { background: var(--chaud); }
.intro-col.scope h4::before { background: var(--accent); }
.intro-col ul { list-style: none; }
.intro-col li {
  font-size: 13px; color: var(--text-dim); line-height: 1.6;
  padding-left: 14px; position: relative;
}
.intro-col li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1px; background: var(--border-hi);
}

/* Sticky nav */
.kit-nav {
  position: sticky; top: 12px; z-index: 50;
  display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 40px;
}
.kit-nav a {
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  color: var(--text-dim); border-radius: var(--radius);
  transition: all var(--dur-fast) var(--ease);
}
.kit-nav a:hover { color: var(--text); background: var(--s2); }
.kit-nav a.active { background: var(--text); color: var(--bg); }

/* Section */
.section { margin-bottom: 72px; scroll-margin-top: 80px; }
.section-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 10px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.section-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase;
}
.section h2 {
  font-family: var(--font-display); font-size: 28px; font-weight: 800;
  letter-spacing: -.4px;
}
.section-desc {
  font-size: 14px; color: var(--text-dim); line-height: 1.6;
  max-width: 760px; margin-bottom: 24px;
}

/* Sub-section title */
.sub-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--muted); text-transform: uppercase;
  margin: 28px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.sub-title::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ════════════════════════════════════════════════════════════════════
   CARD : LIGHT + NOIR SIDE-BY-SIDE
   ════════════════════════════════════════════════════════════════════ */
.mds-demo .card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--surface);
}
.mds-demo .card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--s2);
}
.mds-demo .card-head h3 {
  font-size: 13px; font-weight: 700; color: var(--text);
  letter-spacing: -.1px;
}
.mds-demo .card-head .spec {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: .3px;
}
.mds-demo .card-body { display: grid; grid-template-columns: 1fr 1fr; }
.mds-demo .card-pane {
  padding: 24px;
  min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px;
}
.mds-demo .card-pane.light { background: #f7f8fa; color: #14161f; }
.mds-demo .card-pane.noir { background: #000000; color: #f2f3f7; border-left: 1px solid var(--border); }
.mds-demo .card-pane-label {
  position: absolute; top: 8px; left: 12px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 1.2px; opacity: .35; text-transform: uppercase;
}
.mds-demo .card-pane { position: relative; }

/* Mode focus (when zoomed via Tweaks) */
body.focus-light .card-pane.noir,
body.focus-noir  .card-pane.light { display: none; }
body.focus-light .card-pane.light,
body.focus-noir  .card-pane.noir  { grid-column: 1 / -1; }

/* Pane stretch helper */
.mds-demo .card-pane.stretch { padding: 0; min-height: unset; }
.mds-demo .card-pane.start { justify-content: flex-start; align-items: flex-start; }
.mds-demo .card-pane.col { flex-direction: column; }

/* ════════════════════════════════════════════════════════════════════
   FOUNDATIONS — swatches, type, scales
   ════════════════════════════════════════════════════════════════════ */

/* Swatch */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; width: 100%; }
.swatch {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.swatch-color { height: 68px; }
.swatch-meta {
  padding: 8px 10px;
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.swatch-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.swatch-hex  { font-family: var(--font-mono); font-size: 10px; opacity: .55; }

/* Type scale */
.type-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 24px;
  align-items: baseline; padding: 14px 0;
  border-bottom: 1px dashed color-mix(in srgb, currentColor 12%, transparent);
  width: 100%;
}
.type-row:last-child { border-bottom: 0; }
.type-meta {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .5px; opacity: .55;
}
.type-meta b { opacity: 1; font-weight: 600; }
.type-sample { font-family: var(--font); }
.type-sample.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.5px; }

/* Scale row (spacing, radius) */
.scale-row { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; width: 100%; }
.scale-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scale-item .box { background: currentColor; border-radius: 2px; }
.scale-item .ring {
  background: transparent;
  border: 1px solid currentColor;
}
.scale-label {
  font-family: var(--font-mono); font-size: 10px; opacity: .55;
  letter-spacing: .3px;
}
.scale-label b { opacity: 1; font-weight: 600; }

/* Elevation tiles */
.elev-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; width: 100%; }
.elev-tile {
  height: 84px; border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
}
.mds-demo .card-pane.light .elev-tile { background: #ffffff; border-color: #e4e7ee; color: #14161f; }
.mds-demo .card-pane.noir  .elev-tile { background: #0a0a0c; border-color: #1f1f27; color: #f2f3f7; }
.mds-demo .card-pane.light .elev-tile.e1 { box-shadow: 0 1px 2px rgba(20,22,31,.05); }
.mds-demo .card-pane.light .elev-tile.e2 { box-shadow: 0 4px 14px rgba(20,22,31,.07); }
.mds-demo .card-pane.light .elev-tile.e3 { box-shadow: 0 8px 24px rgba(20,22,31,.10); }
.mds-demo .card-pane.light .elev-tile.e4 { box-shadow: 0 16px 40px rgba(20,22,31,.14); }
.mds-demo .card-pane.light .elev-tile.e5 { box-shadow: 0 24px 60px rgba(20,22,31,.22); }
.mds-demo .card-pane.noir  .elev-tile.e1 { box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.mds-demo .card-pane.noir  .elev-tile.e2 { box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.mds-demo .card-pane.noir  .elev-tile.e3 { box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.mds-demo .card-pane.noir  .elev-tile.e4 { box-shadow: 0 16px 40px rgba(0,0,0,.65); }
.mds-demo .card-pane.noir  .elev-tile.e5 { box-shadow: 0 24px 60px rgba(0,0,0,.75); }

/* Motion swatches */
.motion-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; width: 100%; }
.motion-tile {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--radius); padding: 14px;
  cursor: pointer; position: relative; overflow: hidden;
}
.motion-tile .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: currentColor;
  transform: translateX(0);
  transition-property: transform;
}
.motion-tile.t-instant .dot { transition: transform 100ms cubic-bezier(.2,.7,.2,1); }
.motion-tile.t-fast .dot    { transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
.motion-tile.t-medium .dot  { transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
.motion-tile:hover .dot     { transform: translateX(calc(100% - 14px)); }
.motion-tile .lbl {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  margin-top: 12px; opacity: .7;
}

/* Touch zone preview */
.hit-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; width: fit-content; }
.hit-target {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
  font-family: var(--font-mono); font-size: 10px;
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.hit-target.too-small {
  width: 30px; height: 30px;
  border-color: color-mix(in srgb, var(--chaud) 60%, transparent);
  color: var(--chaud);
}
.hit-target.cosy { width: 48px; height: 48px; }
.hit-target.large { width: 56px; height: 56px; }

/* ════════════════════════════════════════════════════════════════════
   COMPONENTS — buttons, inputs, etc.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Button base ─── */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 44px; min-width: 44px; padding: 0 18px;
  font-family: var(--font); font-size: 15px; font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-instant) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.m-btn:active { transform: scale(.97); }
.m-btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
.m-btn.lg { height: 52px; padding: 0 22px; font-size: 16px; }
.m-btn.icon { padding: 0; width: 44px; }
.m-btn.icon.sm { width: 36px; }
.m-btn.icon.lg { width: 52px; }
.m-btn.full { width: 100%; }

/* Primary — fond = text (PAS d'accent plein, JAMAIS d'ombre) */
.m-btn.primary {
  background: var(--text); color: var(--bg);
}
.m-btn.primary:hover { background: var(--text-dim); }
.m-btn.primary.pressed { background: var(--text-dim); transform: scale(.97); }
.m-btn.primary.focused { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* Secondary */
.m-btn.secondary {
  background: var(--s2); color: var(--text); border-color: var(--border);
}
.m-btn.secondary:hover { background: var(--s3); }
.m-btn.secondary.pressed { background: var(--s3); transform: scale(.97); }
.m-btn.secondary.focused { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); }

/* Ghost */
.m-btn.ghost {
  background: transparent; color: var(--text-dim);
}
.m-btn.ghost:hover { background: var(--s2); color: var(--text); }
.m-btn.ghost.pressed { background: var(--s3); color: var(--text); transform: scale(.97); }
.m-btn.ghost.focused { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* Danger — fond rouge dilué */
.m-btn.danger {
  background: color-mix(in srgb, var(--chaud) 12%, transparent);
  color: var(--chaud);
  border-color: color-mix(in srgb, var(--chaud) 30%, transparent);
}
.m-btn.danger:hover { background: color-mix(in srgb, var(--chaud) 18%, transparent); }
.m-btn.danger.solid {
  background: var(--chaud); color: #fff; border-color: var(--chaud);
}

/* States */
.m-btn:disabled, .m-btn.disabled { opacity: .4; cursor: not-allowed; }
.m-btn.disabled:active { transform: none; }
.m-btn.loading { color: transparent !important; pointer-events: none; position: relative; }
.m-btn.loading::after {
  content: ''; position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  color: var(--bg);
  animation: spin .6s linear infinite;
}
.m-btn.primary.loading::after { color: var(--bg); }
.m-btn.secondary.loading::after, .m-btn.ghost.loading::after { color: var(--text); }
.m-btn.danger.loading::after { color: var(--chaud); }
.m-btn.success {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.m-btn.error {
  background: color-mix(in srgb, var(--chaud) 12%, transparent);
  color: var(--chaud);
  border-color: color-mix(in srgb, var(--chaud) 30%, transparent);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── States matrix ─── */
.states-grid {
  display: grid;
  grid-template-columns: 90px repeat(7, 1fr);
  gap: 12px 14px; align-items: center;
  width: 100%;
}
.states-grid .state-head {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; opacity: .55;
  text-align: center; padding-bottom: 4px;
}
.states-grid .state-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  opacity: .7; letter-spacing: .3px;
}
.states-grid .state-cell {
  display: flex; align-items: center; justify-content: center;
}

/* ─── Input ─── */
.m-field {
  width: 100%; max-width: 320px;
  display: flex; flex-direction: column; gap: 6px;
}
.m-field .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: var(--text-dim);
}
.m-input {
  width: 100%;
  height: 44px; padding: 0 14px;
  font-family: var(--font); font-size: 15px;
  background: var(--s2); border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.m-input::placeholder { color: var(--muted); }
.m-input:focus { border-color: var(--accent); background: var(--surface); }
.m-input.focused { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.m-input.error { border-color: var(--chaud); }
.m-input.success { border-color: var(--green); }
.m-input.disabled, .m-input:disabled { opacity: .4; cursor: not-allowed; }
.m-input.with-icon { padding-left: 40px; }
.m-input-wrap { position: relative; }
.m-input-wrap .leading-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.m-input-wrap .trailing-icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); cursor: pointer;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: var(--radius-sm);
}
.m-input-wrap .trailing-icon:hover { background: var(--s3); color: var(--text); }
.m-helper {
  font-size: 11px; color: var(--muted); line-height: 1.4;
}
.m-helper.error { color: var(--chaud); }
.m-helper.success { color: var(--green); }
.m-textarea {
  min-height: 96px; padding: 12px 14px; resize: vertical;
}

/* Floating label */
.m-float {
  position: relative; width: 100%; max-width: 320px;
}
.m-float .m-input { padding-top: 18px; padding-bottom: 6px; height: 56px; font-size: 15px; }
.m-float .float-lbl {
  position: absolute; left: 14px; top: 18px;
  font-size: 15px; color: var(--muted); pointer-events: none;
  transition: all var(--dur-fast) var(--ease);
}
.m-float .m-input:focus ~ .float-lbl,
.m-float .m-input:not(:placeholder-shown) ~ .float-lbl,
.m-float.filled .float-lbl,
.m-float.focused .float-lbl {
  top: 7px; font-size: 10px; font-weight: 600;
  color: var(--accent); letter-spacing: .4px; text-transform: uppercase;
}

/* ─── Toggle / Switch ─── */
.m-toggle {
  width: 52px; height: 32px; border-radius: 999px;
  background: var(--s3); border: 1px solid var(--border);
  position: relative; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.m-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--e1);
  transition: transform var(--dur-fast) var(--ease);
}
.m-toggle.on { background: var(--text); border-color: var(--text); }
.m-toggle.on::after { transform: translateX(20px); background: var(--bg); }
.m-toggle.disabled { opacity: .4; cursor: not-allowed; }

/* Checkbox */
.m-check {
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-hi);
  background: var(--surface);
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease);
}
.m-check.checked { background: var(--text); border-color: var(--text); }
.m-check.checked::after {
  content: ''; position: absolute;
  left: 6px; top: 2px; width: 6px; height: 12px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.m-check.indeterminate { background: var(--text); border-color: var(--text); }
.m-check.indeterminate::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 9px; height: 2px; background: var(--bg);
}
.m-check.focused { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.m-check.disabled { opacity: .4; cursor: not-allowed; }
.m-check.error { border-color: var(--chaud); }

/* Radio */
.m-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--border-hi);
  background: var(--surface);
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease);
}
.m-radio.checked { border-color: var(--text); }
.m-radio.checked::after {
  content: ''; position: absolute; inset: 4px;
  border-radius: 50%; background: var(--text);
}
.m-radio.focused { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.m-radio.disabled { opacity: .4; cursor: not-allowed; }

/* Stepper */
.m-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.m-stepper button {
  width: 44px; height: 44px; background: transparent; border: 0;
  font-size: 18px; color: var(--text); cursor: pointer;
}
.m-stepper button:hover { background: var(--s2); }
.m-stepper .val {
  min-width: 56px; height: 44px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* Segmented control */
.m-segmented {
  display: inline-flex; padding: 3px;
  background: var(--s2); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.m-segmented button {
  height: 36px; padding: 0 16px; background: transparent; border: 0;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  border-radius: calc(var(--radius) - 2px); cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.m-segmented button.on {
  background: var(--surface); color: var(--text); box-shadow: var(--e1);
}

/* Slider */
.m-slider {
  width: 100%; max-width: 280px;
  height: 4px; background: var(--s3); border-radius: 999px;
  position: relative; cursor: pointer;
}
.m-slider .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text); border-radius: 999px; }
.m-slider .thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--text);
  box-shadow: var(--e1);
}

/* ─── Chip ─── */
.m-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  background: var(--s2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.m-chip:hover { background: var(--s3); }
.m-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.m-chip.accent {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.m-chip.removable .x {
  display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 11px;
}

/* ─── Badge ─── */
.m-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: .1px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.m-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.m-badge.chaud { background: color-mix(in srgb, var(--chaud) 14%, transparent); color: var(--chaud); border-color: color-mix(in srgb, var(--chaud) 28%, transparent); }
.m-badge.tiede { background: color-mix(in srgb, var(--tiede) 14%, transparent); color: var(--tiede); border-color: color-mix(in srgb, var(--tiede) 28%, transparent); }
.m-badge.froid { background: color-mix(in srgb, var(--froid) 14%, transparent); color: var(--froid); border-color: color-mix(in srgb, var(--froid) 28%, transparent); }
.m-badge.green { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 28%, transparent); }
.m-badge.muted { background: var(--s2); color: var(--muted); border-color: var(--border); }
.m-badge-count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--chaud); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.m-badge-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chaud);
  outline: 2px solid var(--surface);
}

/* ─── Avatar ─── */
.m-avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.m-avatar img { width: 100%; height: 100%; object-fit: cover; }
.m-avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.m-avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.m-avatar.square { border-radius: var(--radius); }
.m-avatar-presence::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--surface);
}
.mds-demo .card-pane.noir .m-avatar-presence::after { border-color: #000; }

/* ─── Card ─── */
.m-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  width: 100%; max-width: 320px;
}
.m-card.elevated { box-shadow: var(--e2); border-color: transparent; }
.m-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.m-card-head h4 { font-size: 14px; font-weight: 700; flex: 1; }
.m-card-body { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.m-card-foot { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ─── ListItem (le composant le plus utilisé) ─── */
.m-list { width: 100%; }
.m-li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 60px; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease);
}
.m-li:last-child { border-bottom: 0; }
.m-li:hover, .m-li.pressed { background: var(--s2); }
.m-li-leading { display: flex; }
.m-li-main { min-width: 0; }
.m-li-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 8px;
}
.m-li-sub {
  font-size: 13px; color: var(--text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-li-trailing { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.m-li-chev { color: var(--muted); }

/* Swipe revealed actions (visual representation) */
.m-li-swipe {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.m-li-swipe .m-li { border-bottom: 0; transform: translateX(-128px); background: var(--surface); }
.m-li-swipe-actions {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex;
}
.m-li-swipe-actions button {
  width: 64px; border: 0; cursor: pointer;
  font-size: 11px; font-weight: 700; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.m-li-swipe-actions .archive { background: var(--froid); }
.m-li-swipe-actions .delete { background: var(--chaud); }

/* ─── Skeleton ─── */
.m-skeleton {
  background: linear-gradient(90deg,
    color-mix(in srgb, currentColor 6%, transparent) 0%,
    color-mix(in srgb, currentColor 12%, transparent) 50%,
    color-mix(in srgb, currentColor 6%, transparent) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-line { height: 12px; border-radius: 999px; }
.sk-circle { border-radius: 50%; }

/* ─── Empty / Error states ─── */
.m-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 24px; text-align: center; gap: 14px;
  width: 100%;
}
.m-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--s2); display: grid; place-items: center;
  color: var(--muted);
}
.m-empty h4 { font-size: 16px; font-weight: 700; }
.m-empty p { font-size: 13px; color: var(--text-dim); max-width: 240px; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════
   SURFACES — bottomsheet, modal, toast, tooltip
   ════════════════════════════════════════════════════════════════════ */

/* Mini-frame for surfaces (with body chrome) */
.m-frame {
  position: relative;
  width: 100%; max-width: 280px; aspect-ratio: 9 / 16;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}
.m-frame.lg { max-width: 320px; aspect-ratio: 9 / 18.5; }
.mds-demo .card-pane.light .m-frame { background: #f7f8fa; }
.mds-demo .card-pane.noir  .m-frame { background: #000; border-color: #1f1f27; }
.m-frame-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}

/* Status bar */
.m-statusbar {
  height: 36px; padding: 14px 18px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.m-statusbar .right { display: flex; gap: 4px; align-items: center; }

/* Bottom sheet */
.m-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
}
.m-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  padding: 8px 16px 24px;
  box-shadow: var(--e4);
}
.m-sheet-handle {
  width: 36px; height: 4px; border-radius: 999px;
  background: var(--border-hi);
  margin: 6px auto 14px;
}
.m-sheet h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.m-sheet p { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
.m-sheet .actions { display: flex; gap: 8px; }

/* Modal */
.m-modal {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  padding: 24px;
}
.m-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%;
  box-shadow: var(--e5);
  text-align: center;
}
.m-modal-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.m-modal-card p { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
.m-modal-card .actions { display: flex; gap: 8px; }
.m-modal-card .actions .m-btn { flex: 1; height: 40px; font-size: 13px; }

/* Toast */
.m-toast {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px;
  background: var(--text); color: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--e3);
  font-size: 13px; font-weight: 500;
  max-width: 360px;
}
.m-toast .undo {
  padding: 4px 10px;
  background: color-mix(in srgb, var(--bg) 20%, transparent);
  color: var(--accent);
  border: 0; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.mds-demo .card-pane.light .m-toast .undo { color: #a89dff; }
.mds-demo .card-pane.noir  .m-toast .undo { color: var(--accent-hi); }

/* Tooltip */
.m-tooltip {
  display: inline-block;
  padding: 6px 10px;
  background: var(--text); color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 500;
  position: relative;
}
.m-tooltip::after {
  content: ''; position: absolute;
  bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--text);
}

/* Spinner */
.m-spinner {
  width: 24px; height: 24px;
  border: 2.5px solid color-mix(in srgb, currentColor 18%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.m-spinner.sm { width: 16px; height: 16px; border-width: 2px; }
.m-spinner.lg { width: 32px; height: 32px; border-width: 3px; }

/* Progress bar */
.m-progress {
  width: 100%; max-width: 240px;
  height: 4px; background: var(--s3); border-radius: 999px;
  overflow: hidden;
}
.m-progress .bar {
  height: 100%; background: var(--text); border-radius: 999px;
  transition: width var(--dur-medium) var(--ease);
}
.m-progress.indeterminate .bar {
  width: 30%;
  animation: indeterminate 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Pull-to-refresh */
.m-ptr {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 12px; color: var(--muted);
  padding: 14px; width: 100%;
}

/* ════════════════════════════════════════════════════════════════════
   NAVIGATION — bottomnav, topbar, tabbar, searchbar, fab
   ════════════════════════════════════════════════════════════════════ */

/* TopBar */
.m-topbar {
  height: 52px; padding: 0 8px 0 4px;
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.m-topbar-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--text); cursor: pointer;
  border-radius: var(--radius);
}
.m-topbar-icon:hover { background: var(--s2); }
.m-topbar-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-topbar-actions { display: flex; }

.m-topbar.large {
  height: auto; padding: 8px 18px 14px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.m-topbar.large .top { width: 100%; display: flex; justify-content: space-between; align-items: center; height: 44px; }
.m-topbar.large h1 {
  font-family: var(--font-display); font-size: 28px; font-weight: 800;
  letter-spacing: -.5px; margin-top: 6px;
}

/* SearchBar */
.m-searchbar {
  height: 40px; padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
  background: var(--s2);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 15px;
  margin: 8px 14px 6px;
}
.m-searchbar.focused { background: var(--surface); border: 1px solid var(--border-hi); color: var(--text); }
.m-searchbar .cancel {
  margin-left: 4px; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer;
}

/* TabBar secondaire (segmented) */
.m-tabbar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 14px;
}
.m-tabbar button {
  background: transparent; border: 0; cursor: pointer;
  padding: 12px 4px; margin-right: 18px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  position: relative;
}
.m-tabbar button.on { color: var(--text); }
.m-tabbar button.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--text); border-radius: 1px;
}

/* BottomNav — 4 tabs + FAB donna centré */
.m-bottomnav {
  height: 66px; padding-bottom: 6px;
  display: grid; grid-template-columns: 1fr 1fr 86px 1fr 1fr;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  position: relative;
}
.m-bottomnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding-top: 6px;
}
.m-bottomnav-item svg { width: 24px; height: 24px; }
.m-bottomnav-item.on { color: var(--text); }
.m-bottomnav-item .badge {
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chaud);
  transform: translate(8px, -10px);
}
.m-fab-slot { position: relative; }
.m-fab-donna {
  position: absolute;
  left: 50%; top: -18px;
  transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #000;
  border: 1px solid var(--accent);
  box-shadow: 0 8px 22px rgba(107,92,245,.30);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.m-fab-donna:active { transform: translateX(-50%) scale(.94); }
.m-fab-donna svg { width: 28px; height: 28px; }

/* FAB générique */
.m-fab {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--text); color: var(--bg);
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--e3);
}
.m-fab.extended {
  width: auto; height: 48px; border-radius: 999px;
  padding: 0 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   MÉTIER — donna components
   ════════════════════════════════════════════════════════════════════ */

/* Pill rail donna */
.m-pill-rail {
  display: flex; gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
}
.m-pill-rail::-webkit-scrollbar { display: none; }
.m-pill-donna {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-pill-donna .icon {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  font-size: 10px; font-weight: 800;
}
.m-pill-donna.priority { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.m-pill-donna.priority .icon { background: var(--accent); color: #fff; }
.m-pill-donna .count {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  padding: 1px 5px; background: var(--s2); border-radius: var(--radius-sm);
}

/* Action card donna */
.m-action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%; max-width: 340px;
  box-shadow: var(--e2);
}
.m-action-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.m-action-mono {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: #000;
  border: 1px solid var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.m-action-mono svg { width: 18px; height: 18px; }
.m-action-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--accent); text-transform: uppercase;
}
.m-action-title { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 1px; }
.m-action-body { padding: 14px; font-size: 13px; color: var(--text); line-height: 1.55; }
.m-action-body .quote {
  background: var(--s2);
  border-left: 2px solid var(--accent);
  padding: 8px 10px;
  font-size: 12px; color: var(--text-dim); margin-top: 10px;
}
.m-action-foot {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--s2);
}
.m-action-foot .m-btn { flex: 1; height: 36px; font-size: 13px; }
.m-action-foot .undo {
  background: transparent; color: var(--text-dim);
  border: 0; padding: 0 8px; font-size: 12px; cursor: pointer;
}

/* Pipeline étapes dossier */
.m-pipeline {
  display: flex; align-items: center; gap: 4px;
  width: 100%; padding: 6px 0;
}
.m-pipe-step {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.m-pipe-step .node {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--muted);
}
.m-pipe-step.done .node { background: var(--green); border-color: var(--green); color: #fff; }
.m-pipe-step.done .node::after { content: '✓'; font-size: 11px; }
.m-pipe-step.done .node .num { display: none; }
.m-pipe-step.current .node { background: var(--text); border-color: var(--text); color: var(--bg); }
.m-pipe-step .lbl {
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px;
}
.m-pipe-step.done .lbl, .m-pipe-step.current .lbl { color: var(--text); }
.m-pipe-step::after {
  content: ''; position: absolute;
  top: 11px; left: calc(50% + 14px); right: calc(-50% + 14px);
  height: 1.5px; background: var(--border);
}
.m-pipe-step:last-child::after { display: none; }
.m-pipe-step.done::after, .m-pipe-step.current.has-prev::after { background: var(--green); }

/* Pipeline vertical */
.m-pipeline-v {
  display: flex; flex-direction: column; width: 100%; max-width: 200px;
}
.m-pipe-v-step {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  padding-bottom: 14px;
  position: relative;
}
.m-pipe-v-step::before {
  content: ''; position: absolute;
  left: 10px; top: 22px; bottom: 0;
  width: 1.5px; background: var(--border);
}
.m-pipe-v-step:last-child::before { display: none; }
.m-pipe-v-step.done::before { background: var(--green); }
.m-pipe-v-step .node {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--muted);
}
.m-pipe-v-step.done .node { background: var(--green); border-color: var(--green); color: #fff; }
.m-pipe-v-step.done .node::after { content: '✓'; font-size: 11px; }
.m-pipe-v-step.current .node { background: var(--text); border-color: var(--text); color: var(--bg); }
.m-pipe-v-step .main { padding-top: 1px; }
.m-pipe-v-step .lbl { font-size: 13px; font-weight: 600; color: var(--text); }
.m-pipe-v-step .meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.m-pipe-v-step.future .lbl { color: var(--muted); font-weight: 500; }

/* Fiche client header */
.m-client-header {
  padding: 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.m-client-top {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
}
.m-client-top .m-avatar { width: 52px; height: 52px; font-size: 16px; }
.m-client-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.m-client-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-client-actions {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 14px;
}
.m-client-action {
  height: 52px;
  border: 1px solid var(--border);
  background: var(--s2);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  color: var(--text); font-size: 10px; font-weight: 600;
}
.m-client-action svg { width: 18px; height: 18px; }

/* Fiche bien header — carrousel */
.m-bien-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.m-bien-photos {
  position: relative;
  aspect-ratio: 16 / 11;
  background: linear-gradient(135deg, #c9d4e2, #8aa1bd);
  overflow: hidden;
}
.mds-demo .card-pane.noir .m-bien-photos { background: linear-gradient(135deg, #1a2235, #0c1422); }
.m-bien-photos .ph-frame {
  position: absolute; inset: 0;
  background-image: linear-gradient(135deg, #e2c9a0 0%, #b08966 60%, #6e4a30 100%);
}
.m-bien-photos .ph-windows {
  position: absolute; bottom: 14%; left: 14%; right: 14%; height: 40%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.18)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, transparent 1px 22%);
  border: 1px solid rgba(0,0,0,.2);
}
.m-bien-photos .ph-counter {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
}
.m-bien-photos .ph-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
}
.m-bien-photos .ph-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.5);
}
.m-bien-photos .ph-dots span.on { background: #fff; }
.m-bien-photos .ph-status {
  position: absolute; top: 10px; left: 10px;
}
.m-bien-photos .ph-fav {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
  display: grid; place-items: center; color: #fff;
  cursor: pointer;
}
.m-bien-info { padding: 14px; }
.m-bien-price { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.m-bien-price .ppm { font-size: 11px; font-weight: 500; color: var(--text-dim); margin-left: 8px; letter-spacing: 0; }
.m-bien-addr { font-size: 13px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.m-bien-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════
   TWEAKS — minimal toggle Light/Noir focus
   ════════════════════════════════════════════════════════════════════ */
.tweaks {
  position: fixed; right: 18px; bottom: 18px;
  display: flex; gap: 4px; padding: 4px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 100;
  backdrop-filter: blur(14px);
  box-shadow: var(--e2);
}
.tweaks button {
  padding: 8px 12px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
}
.tweaks button.on { background: var(--text); color: var(--bg); }


/* ══════════════════════════════════════════════════════════════════
   [v1206] FICHE CLIENT — overrides Margot V1
   Force le look .m-client-header sur la fiche client existante.
   Aucune modification HTML/JS requise.
   ══════════════════════════════════════════════════════════════════ */

/* HERO : container + structure */
.pwa-root .client-hero {
  padding: 14px 14px 16px !important;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pwa-root .client-hero .top {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

/* Avatar : style .m-avatar.lg (52px au lieu de 60px, plus aéré dans la grille) */
.pwa-root .client-hero .big-av {
  width: 52px !important;
  height: 52px !important;
  font-size: 16px !important;
  border-radius: var(--radius-full, 999px) !important;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.5px;
  flex-shrink: 0;
}

/* Nom : style .m-client-name */
.pwa-root .client-hero h2 {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  line-height: 1.2;
}

/* Tagline : style .m-client-meta */
.pwa-root .client-hero .tagline {
  font-size: 12px !important;
  color: var(--text-dim);
  margin-top: 2px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Tagline children : forcer les badges/pills à utiliser le style .m-badge */
.pwa-root .client-hero .tagline > span:not(.m-badge) {
  /* Wrapping automatique style .m-badge pour les span enfants legacy */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Bouton relance flottant : intégré dans la grille en colonne 3 (auto) */
.pwa-root .client-hero .hero-cta-relance {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--s2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast, .15s) var(--ease, ease-out);
  flex-shrink: 0;
}
.pwa-root .client-hero .hero-cta-relance:active {
  background: var(--s3);
}

/* QUICK ACTIONS : adopter le style .m-client-actions / .m-client-action
   [v1208] Passage de 5 à 6 colonnes pour accueillir WhatsApp en plus.
   Gap réduit 8→6px pour préserver lisibilité sur écrans étroits. */
.pwa-root .quick-actions {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
  margin-top: 14px !important;
}

.pwa-root .qa {
  height: 52px !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  background: var(--s2) !important;
  border-radius: var(--radius) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: var(--text) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast, .15s) var(--ease, ease-out);
  min-width: 0;
}

.pwa-root .qa svg {
  width: 18px !important;
  height: 18px !important;
  opacity: 1 !important;
}

.pwa-root .qa:active {
  background: var(--s3) !important;
}

/* Bouton donna Analyser conserve sa variante violette mais aligné avec le nouveau style */
.pwa-root .qa.qa-donna {
  background: var(--accent-dim) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
  color: var(--accent) !important;
}

html[data-theme="noir"] .pwa-root .qa.qa-donna {
  background: rgba(139, 123, 255, 0.16) !important;
  border-color: rgba(139, 123, 255, 0.40) !important;
  color: #a89dff !important;
}

.pwa-root .qa.qa-donna svg {
  opacity: 1 !important;
}

.pwa-root .qa.qa-donna:active {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface)) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1207] BOTTOMNAV — overrides Margot V1
   Force le look .m-bottomnav + .m-fab-donna sur la tabbar PWA.
   Aucune modification HTML/JS requise.
   
   Différences vs l'ancien :
   - FAB central 52→56px AVEC shadow violette accent (glow donna)
   - Border accent autour du FAB (au lieu de juste fond noir)
   - FAB qui dépasse au-dessus de la bar (top: -8px relatif au slot)
   - Backdrop blur + transparence sur la bar (glassmorphism iOS)
   - Hauteur du slot central élargie 72→86px
   ══════════════════════════════════════════════════════════════════ */

/* Container tabbar : glassmorphism */
.pwa-root .tabbar,
#__pwa_tabbar_host .tabbar {
  /* Glassmorphism — backdrop-filter blur 14px sur fond semi-transparent */
  background: color-mix(in srgb, var(--surface, #ffffff) 94%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  /* Slot central plus large pour accueillir un FAB de 56px qui dépasse */
  grid-template-columns: 1fr 1fr 86px 1fr 1fr !important;
  /* On garde border-top var(--border) du legacy */
}

html[data-theme="noir"] .pwa-root .tabbar,
html[data-theme="noir"] #__pwa_tabbar_host .tabbar {
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
}

/* Tabs (Aujourd'hui, Clients, Agenda, Plus) — icônes plus généreuses */
.pwa-root .tab svg,
#__pwa_tabbar_host .tab svg {
  width: 22px !important;
  height: 22px !important;
}

/* FAB central donna — c'est LE changement visuel principal */
/* [v1254] Anthony screen 17 mai : FAB violet plein, sparkle blanc, halo glow */
.pwa-root .tab-plus,
#__pwa_tabbar_host .tab-plus {
  /* Tailles Margot V1 */
  width: 56px !important;
  height: 56px !important;
  /* Position : dépasse de 8px au-dessus de la bar pour effet "FAB floating" */
  align-self: start !important;
  margin-top: -8px !important;
  /* Pas de bordure : fond violet plein */
  border: 0 !important;
  /* Shadow violette glow + halo cercle clair autour */
  box-shadow:
    0 8px 28px rgba(107, 92, 245, 0.50),
    0 2px 8px rgba(107, 92, 245, 0.30),
    0 0 0 6px rgba(107, 92, 245, 0.12) !important;
  /* Fond violet plein (accent) */
  background: var(--accent, #6b5cf5) !important;
  /* Le sparkle stroke devient blanc */
  color: #fff !important;
}

html[data-theme="noir"] .pwa-root .tab-plus,
html[data-theme="noir"] #__pwa_tabbar_host .tab-plus {
  /* En dark, accent un peu plus clair + halo plus fort */
  background: var(--accent, #8b7bff) !important;
  box-shadow:
    0 8px 28px rgba(139, 123, 255, 0.55),
    0 2px 8px rgba(139, 123, 255, 0.35),
    0 0 0 6px rgba(139, 123, 255, 0.15) !important;
}

.pwa-root .tab-plus:active,
#__pwa_tabbar_host .tab-plus:active {
  transform: scale(.92) !important;
  /* Shadow réduite au press pour effet enfoncé */
  box-shadow:
    0 4px 12px rgba(107, 92, 245, 0.35),
    0 1px 3px rgba(107, 92, 245, 0.15) !important;
}

/* Icône + à l'intérieur du FAB — plus grosse et plus visible */
.pwa-root .tab-plus svg,
#__pwa_tabbar_host .tab-plus svg {
  width: 26px !important;
  height: 26px !important;
}

/* Anim "+→X" préservée (sheet-open rotation 45deg) */
.pwa-root .tab-plus.sheet-open svg,
#__pwa_tabbar_host .tab-plus.sheet-open svg {
  transform: rotate(45deg);
}


/* [v1208] Bouton WhatsApp — variante verte (couleur signature WA) */
.pwa-root .qa.qa-wa {
  background: color-mix(in srgb, var(--green) 12%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--green) 35%, transparent) !important;
  color: var(--green) !important;
}
html[data-theme="noir"] .pwa-root .qa.qa-wa {
  background: rgba(34, 160, 107, 0.14) !important;
  border-color: rgba(79, 212, 154, 0.40) !important;
  color: var(--green) !important;
}
.pwa-root .qa.qa-wa svg { opacity: 1 !important; }
.pwa-root .qa.qa-wa:active {
  background: color-mix(in srgb, var(--green) 22%, var(--surface)) !important;
}

/* [v1208] Tagline avec .m-badge — réajuster spacing dans le contexte fiche */
.pwa-root .client-hero .tagline .m-badge {
  font-size: 11px;
  height: 22px;
  padding: 0 8px;
}


/* ══════════════════════════════════════════════════════════════════
   [v1209] POLISH NATIF iOS — c'est ce qui fait qu'on dit
   "c'est une vraie app" au lieu de "c'est une PWA".
   
   Pattern strangler fig : ajouté en fin de file, override le legacy.
   Aucune modification HTML/JS structurelle.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. TAP HIGHLIGHTS : suppression totale du gris iOS Safari ── */
.pwa-root,
.pwa-root *,
#__pwa_tabbar_host,
#__pwa_tabbar_host *,
#__pwa_sheet_host,
#__pwa_sheet_host * {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

/* ── 2. OVERSCROLL : bloque pull-to-refresh navigateur ── */
.pwa-root,
.pwa-root .scroll {
  overscroll-behavior: none;
  overscroll-behavior-y: contain;
}

/* ── 3. TOUCH-ACTION : pas de zoom double-tap, scroll Y vertical pur ── */
.pwa-root button,
.pwa-root .tab,
.pwa-root .tab-plus,
.pwa-root .qa,
.pwa-root .m-li,
.pwa-root .seg button,
.pwa-root .chip,
.pwa-root .m-bottomnav-item,
#__pwa_tabbar_host .tab,
#__pwa_tabbar_host .tab-plus {
  touch-action: manipulation;
}

/* ── 4. ACTIVE STATES : remplace le tap highlight par un scale-down spring ── */
/* Tous les éléments tappables ont maintenant un feedback subtil et premium */
.pwa-root button:active,
.pwa-root .m-li:active,
.pwa-root .qa:active,
.pwa-root .tab:active,
.pwa-root .seg button:active,
.pwa-root .chip:active,
.pwa-root .sheet-item:active,
#__pwa_tabbar_host .tab:active {
  transition: transform 80ms cubic-bezier(.4, 0, .2, 1);
  transform: scale(.97);
}

/* Le FAB donna a son propre active (cf v1207) avec scale .92 */
.pwa-root .tab-plus:active,
#__pwa_tabbar_host .tab-plus:active {
  transition: transform 80ms cubic-bezier(.4, 0, .2, 1) !important;
}

/* ── 5. TYPO : font-feature-settings pour nombres tabulaires + ligatures ── */
.pwa-root {
  font-feature-settings: 'cv11', 'ss03', 'cv02', 'tnum' off;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Nombres tabulaires (alignement vertical des chiffres) sur tous les badges/scores/prix */
.pwa-root .m-badge,
.pwa-root .m-li-trailing,
.pwa-root .score-strip .big,
.pwa-root .cr-score,
.pwa-root .br-price,
.pwa-root .quick-actions .qa span,
.pwa-root .seg button .op-5,
.pwa-root .seg button [id*="count"],
.pwa-root .chip .count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on, 'cv11' on;
}

/* ── 6. TRANSITIONS DE VUE : slide horizontal au navigate() ── */
/* Anim douce quand .view passe de inactive → active.
   Note : on garde display:none/flex pour la perf (vs visibility), mais on
   ajoute une transform + opacity sur l'apparition. Le legacy fait display:flex
   direct, on enrichit ça avec une mini-animation slide-in.
*/
@keyframes pwa-view-enter-r {
  from { opacity: 0; transform: translateX(8%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pwa-view-enter-l {
  from { opacity: 0; transform: translateX(-8%); }
  to   { opacity: 1; transform: translateX(0); }
}
.pwa-root .view.active {
  animation: pwa-view-enter-r 240ms cubic-bezier(.32, .72, 0, 1);
}
/* Pour la nav back (clients ← client), il faudrait detecter la direction.
   Pour V1 : on a la même anim dans les 2 sens, c'est déjà beaucoup mieux qu'avant. */

/* ── 7. SCROLL : momentum iOS + caché barre + smooth ── */
.pwa-root .scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── 8. BOUTONS : transition cohérente partout ── */
.pwa-root button,
.pwa-root .tab,
.pwa-root .m-li,
.pwa-root .qa,
.pwa-root .chip {
  transition:
    background 150ms ease-out,
    color 150ms ease-out,
    border-color 150ms ease-out,
    transform 100ms cubic-bezier(.4, 0, .2, 1),
    box-shadow 150ms ease-out;
}

/* ── 9. SAFE AREA INSETS : padding systématique sur les rails latéraux ── */
.pwa-root .view {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* ── 10. INPUT ZOOM : empêche le zoom auto iOS quand on focus un input (font-size ≥16px) ── */
.pwa-root input,
.pwa-root textarea,
.pwa-root select {
  font-size: 16px !important;
}

/* Pour les inputs explicitement plus petits, garder le 16px en min pour l'UX */

/* ── 11. SCROLLBAR : ultra-minimaliste partout ── */
.pwa-root *::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pwa-root * { scrollbar-width: none; }

/* ── 12. SHEET BACKDROP : blur + transition douce ── */
.pwa-root .sheet-backdrop,
#__pwa_sheet_host .sheet-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.32);
  transition: opacity 240ms ease-out;
}

html[data-theme="noir"] .pwa-root .sheet-backdrop,
html[data-theme="noir"] #__pwa_sheet_host .sheet-backdrop {
  background: rgba(0, 0, 0, 0.56);
}

/* ── 13. SHEET : drag-handle plus visible + spring open ── */
.pwa-root .sheet,
#__pwa_sheet_host .sheet {
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
}

.pwa-root .sheet .grabber,
#__pwa_sheet_host .sheet .grabber {
  width: 36px; height: 4px;
  background: var(--border-hi);
  border-radius: 999px;
  margin: 10px auto 12px;
  opacity: .8;
}

/* ── 14. LINKS : pas de double-tap highlight ── */
.pwa-root a {
  -webkit-touch-callout: none;
  text-decoration: none;
  color: inherit;
}

/* ── 15. FOCUS : pas d'outline laid sur le tap ── */
.pwa-root *:focus { outline: none; }
.pwa-root button:focus-visible,
.pwa-root .m-li:focus-visible,
.pwa-root input:focus-visible,
.pwa-root textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── 16. CURSOR : pas de "pointer" sur mobile (qui peut causer des bugs hover) ── */
@media (hover: none) {
  .pwa-root button,
  .pwa-root .m-li,
  .pwa-root .tab,
  .pwa-root .chip { cursor: default; }
}


/* ══════════════════════════════════════════════════════════════════
   [v1210] FICHE BIEN — refonte style Margot V2 (CSS-only)
   
   Objectif : passer de "fiche immobilier classique" à "fiche premium
   style Airbnb / SeLoger Pro / Gens de confiance".
   
   - Galerie photos : aspect-ratio 16/11 (au lieu de hauteur fixe)
   - Badges floating sur la photo (top-left)
   - Prix en overlay floating sur la photo (top-right, gros, bg blur)
   - Hero allégé sous la photo (titre + adresse seulement, prix dans overlay)
   - Cards de caractéristiques plus arrondies + ombre subtile
   - Section matches acquéreurs avec score visible
   - Quick actions hauteur uniforme 60px (au lieu de variable)
   ══════════════════════════════════════════════════════════════════ */

/* GALERIE : aspect-ratio Margot 16:11 (plus généreux et cinéma) */
.pwa-root .fb-gallery {
  aspect-ratio: 16 / 11 !important;
  height: auto !important;
  max-height: 60vh;
  width: 100% !important;
  position: relative;
  background: linear-gradient(135deg, #c9d4e2, #8aa1bd);
}

html[data-theme="noir"] .pwa-root .fb-gallery {
  background: linear-gradient(135deg, #1a2235, #0c1422);
}

/* Overlay gradient sous la photo : plus subtil */
.pwa-root .fb-gallery .g-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.15) 25%,
    transparent 45%,
    transparent 60%,
    rgba(0,0,0,.55) 100%
  ) !important;
}

/* Back button : plus visible, mieux positionné (top respecte safe-area) */
.pwa-root .fb-gallery .g-back {
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  left: 12px !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.pwa-root .fb-gallery .g-actions {
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  right: 12px !important;
}

.pwa-root .fb-gallery .g-actions .g-act {
  width: 40px !important;
  height: 40px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* PRIX EN OVERLAY sur la photo : signature Margot V2 / Airbnb */
.pwa-root .fb-gallery::after {
  /* Réservé pour des injections JS futures */
}

/* BADGES floating sur la photo (en bas à gauche) */
.pwa-root .fb-hero .h-badges {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  margin: 0 !important;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: calc(100% - 32px);
}

/* Badges qui transitent par .h-badges deviennent .m-badge sur fond sombre */
.pwa-root .fb-hero .h-badges .badge,
.pwa-root .fb-hero .h-badges .m-badge {
  background: rgba(20, 22, 31, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  font-weight: 600;
  font-size: 11px;
  height: 24px;
  padding: 0 10px;
}

/* HERO : plus aéré, sans bordure inférieure (les sections la donnent) */
.pwa-root .fb-hero {
  position: relative;
  padding: 18px 20px 18px !important;
  border-bottom: 0 !important;
}

/* Titre principal : un peu plus poli */
.pwa-root .fb-hero h1 {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}

/* Adresse : plus discret mais avec icône pin colorée */
.pwa-root .fb-hero .h-addr {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  display: flex;
  align-items: center;
  gap: 6px !important;
}

.pwa-root .fb-hero .h-addr svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Prix : taille augmentée, padding-top supprimé (moins de margin top) */
.pwa-root .fb-hero .h-price-row {
  margin-top: 16px !important;
  align-items: baseline !important;
  gap: 12px !important;
}

.pwa-root .fb-hero .h-price {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -.8px !important;
  color: var(--text) !important;
}

.pwa-root .fb-hero .h-ppm {
  font-size: 13px !important;
  font-family: var(--font);
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 500;
}

/* QUICK ACTIONS : alignement Margot V1 (hauteur fixe 56px, gap 8px) */
.pwa-root .fb-actions {
  padding: 4px 16px 16px !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--border) !important;
}

.pwa-root .fb-qa {
  height: 56px !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  background: var(--s2) !important;
  border-radius: var(--radius) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.pwa-root .fb-qa svg {
  width: 20px !important;
  height: 20px !important;
}

.pwa-root .fb-qa.accent {
  background: var(--accent-dim) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
  color: var(--accent) !important;
}

html[data-theme="noir"] .pwa-root .fb-qa.accent {
  background: rgba(139, 123, 255, 0.16) !important;
  border-color: rgba(139, 123, 255, 0.40) !important;
  color: #a89dff !important;
}

/* SECTION HEADERS : style Margot uniforme (eyebrow mono caps) */
.pwa-root .fb-sec .lbl {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* INFOS CARDS : plus premium (radius arrondi, fond surface, ombre subtile) */
.pwa-root .fb-infos {
  padding: 0 16px 8px !important;
  gap: 10px !important;
}

.pwa-root .fb-info {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md, 6px) !important;
  padding: 14px 16px !important;
  box-shadow: var(--e1, 0 1px 2px rgba(20,22,31,.05));
}

.pwa-root .fb-info .v {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.pwa-root .fb-info .k {
  font-size: 10.5px !important;
  letter-spacing: 1.3px !important;
}

/* TAGS / Équipements : pills plus polish */
.pwa-root .fb-tags {
  padding: 0 16px 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.pwa-root .fb-tags .tag,
.pwa-root .fb-tags .m-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full, 999px);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

/* MATCHES section : cards d'acquéreurs scorés */
.pwa-root .fb-matches {
  padding: 0 16px 16px !important;
  gap: 10px !important;
}

/* Si la section matches contient des .m-li (réutilisation du composant client),
   les styliser comme des cards plus distinctives ici */
.pwa-root #pwa-fb-matches-list > * {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  padding: 12px 14px;
  box-shadow: var(--e1, 0 1px 2px rgba(20,22,31,.05));
}

/* STICKY HEADER au scroll : plus polish */
.pwa-root .fb-sticky {
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 10px !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.pwa-root .fb-sticky .back {
  width: 36px !important;
  height: 36px !important;
}

.pwa-root .fb-sticky .s-addr {
  font-size: 14px !important;
  font-weight: 700 !important;
}

.pwa-root .fb-sticky .s-price {
  font-size: 14px !important;
  font-weight: 700 !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1211] BUG FIX + REFONTE TYPO + FICHE CLIENT POLISH
   
   1. FIX : badge Exclusif n'est plus position:absolute mauvais placement
            → retour en flux normal au-dessus du titre (pattern Margot V2)
   
   2. TYPO Apple system par défaut :
      - Body, boutons, badges, chiffres → -apple-system (SF Pro natif iOS)
      - Inter réservé aux GROS titres uniquement (h1 28+px)
      - Effet "vraie app iOS" immédiat
   
   3. FICHE CLIENT : timeline + score + tabs polish Margot
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. FIX BADGE EXCLUSIF qui chevauchait le prix ── */
.pwa-root .fb-hero .h-badges {
  position: static !important;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px !important;
  left: auto;
  bottom: auto;
}

/* Badges dans .fb-hero retrouvent leur style normal (pas le sombre blur de la photo) */
.pwa-root .fb-hero .h-badges .badge,
.pwa-root .fb-hero .h-badges .m-badge {
  background: var(--s2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  height: 22px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius);
}

/* Variantes colorées des badges hero (exclusif = vert/accent) */
.pwa-root .fb-hero .h-badges .badge.match,
.pwa-root .fb-hero .h-badges .badge.green {
  background: color-mix(in srgb, var(--green) 12%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--green) 35%, transparent) !important;
  color: var(--green) !important;
}

.pwa-root .fb-hero .h-badges .badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}


/* ══════════════════════════════════════════════════════════════════
   2. TYPO Apple system PARTOUT — sauf h1 gros titres
   
   Override surgical : on remplace --font-display par var(--font) sur
   tout SAUF les h1 30+px et les très gros affichages (prix fiche bien).
   ══════════════════════════════════════════════════════════════════ */

/* Body global : --font (Apple system) reste, c'est déjà le cas */
.pwa-root, .pwa-root *,
#__pwa_tabbar_host, #__pwa_tabbar_host *,
#__pwa_sheet_host, #__pwa_sheet_host * {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Forçage Apple system sur les composants UI quotidiens
   (avant ils étaient en display via --font-display — police display supprimée du DS) */
.pwa-root .m-li-title,
.pwa-root .m-li-sub,
.pwa-root .m-li-trailing,
.pwa-root .m-badge,
.pwa-root .m-chip,
.pwa-root .m-btn,
.pwa-root .m-client-name,
.pwa-root .seg button,
.pwa-root .chip,
.pwa-root .qa,
.pwa-root .qa span,
.pwa-root .fb-qa,
.pwa-root .client-hero h2,
.pwa-root .client-hero .tagline,
.pwa-root .cr-name,
.pwa-root .cr-sub,
.pwa-root .cr-score,
.pwa-root .br-addr,
.pwa-root .br-sub,
.pwa-root .br-price,
.pwa-root .fb-info .v,
.pwa-root .fb-sticky .s-addr,
.pwa-root .fb-sticky .s-price,
.pwa-root .tab,
#__pwa_tabbar_host .tab {
  font-family: var(--font) !important;
}

/* Les vraies h1 grosses restent en Inter — plus aucune police display dédiée */
.pwa-root .hdr h1,
.pwa-root .m-topbar.large h1,
.pwa-root .fb-hero h1,
.pwa-root .fiche-client-name-hero {
  font-family: var(--font-display) !important;
}

/* Le prix gros (30px) sur fiche bien aussi (chiffre de display) */
.pwa-root .fb-hero .h-price {
  font-family: var(--font-display) !important;
}

/* Score IA dans la fiche : on peut le garder display ou natif, on choisit natif pour cohérence */
.pwa-root .score-strip .big {
  font-family: var(--font) !important;
  font-weight: 800 !important;
}

/* Eyebrows (mono caps) gardent leur mono */
.pwa-root .eyebrow,
.pwa-root .fb-sec .lbl,
.pwa-root .fb-info .k,
.pwa-root .h-ppm,
.pwa-root .cr-eyebrow {
  font-family: var(--mono) !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. FICHE CLIENT polish (équivalent v1210 pour fiche client)
   ══════════════════════════════════════════════════════════════════ */

/* Back-hdr : style sticky Margot avec blur (cohérence avec fb-sticky) */
.pwa-root [data-view="client"] .back-hdr {
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 10px !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.pwa-root [data-view="client"] .back-hdr .back {
  width: 36px !important;
  height: 36px !important;
  background: var(--s2);
  border-radius: 50%;
}

.pwa-root [data-view="client"] .back-hdr .ttl {
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.1px;
}

.pwa-root [data-view="client"] .back-hdr .sub {
  font-family: var(--font) !important;
  font-size: 12px !important;
  color: var(--text-dim);
}

/* Score strip : look card premium */
.pwa-root .score-strip {
  border-radius: var(--radius-md, 6px) !important;
  box-shadow: var(--e1, 0 1px 2px rgba(20,22,31,.05));
}

.pwa-root .score-strip .big {
  font-size: 32px !important;
  letter-spacing: -.8px !important;
  font-variant-numeric: tabular-nums;
}

.pwa-root .score-strip .lbl {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 1.4px;
}

.pwa-root .score-strip .explain {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
  margin-top: 4px;
}

.pwa-root .score-strip .explain em {
  font-style: normal;
  color: var(--text);
}

/* Tabs Timeline / Critères / Matches : style Margot V1 segmented */
.pwa-root .view[data-view="client"] .seg {
  background: var(--s2);
  border-radius: var(--radius);
  padding: 3px;
  display: flex;
  gap: 0;
}

.pwa-root .view[data-view="client"] .seg button {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 0;
  font-size: 13px !important;
  font-weight: 600;
  color: var(--muted);
  border-radius: 4px;
  transition: all 150ms ease-out;
  cursor: pointer;
}

.pwa-root .view[data-view="client"] .seg button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--e1, 0 1px 3px rgba(20,22,31,.08));
}

/* TIMELINE items : style card premium */
.pwa-root .tl-item {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 12px !important;
  padding: 14px !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  margin-bottom: 8px;
  align-items: start;
}

.pwa-root .tl-item .tl-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s2);
  color: var(--muted);
}

.pwa-root .tl-item .tl-icon.call { background: color-mix(in srgb, var(--chaud) 14%, transparent); color: var(--chaud); }
.pwa-root .tl-item .tl-icon.mail { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pwa-root .tl-item .tl-icon.visit { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.pwa-root .tl-item .tl-icon.note { background: color-mix(in srgb, var(--tiede) 14%, transparent); color: var(--tiede); }

.pwa-root .tl-item .tl-title {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: -.1px;
  margin-bottom: 2px;
}

.pwa-root .tl-item .tl-body {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
}

.pwa-root .tl-item .tl-time {
  font-family: var(--mono) !important;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .3px;
  white-space: nowrap;
  align-self: start;
  margin-top: 2px;
}

/* CRIT-GRID : cards de critères style premium */
.pwa-root .crit-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pwa-root .crit-grid .crit {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  padding: 12px 14px;
  box-shadow: var(--e1, 0 1px 2px rgba(20,22,31,.05));
}

.pwa-root .crit-grid .crit.full {
  grid-column: 1 / -1;
}

.pwa-root .crit-grid .crit .k {
  font-family: var(--mono) !important;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.pwa-root .crit-grid .crit .v {
  font-family: var(--font) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.1px;
  color: var(--text);
}

/* Avatar fiche client : grosse taille pour effet hero */
.pwa-root .client-hero .big-av {
  width: 56px !important;
  height: 56px !important;
  font-size: 18px !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1213] FICHE CLIENT REFONTE Margot V2
   Nouvelles classes .fc-* pour la fiche client refondue.
   ══════════════════════════════════════════════════════════════════ */

/* Header minimal : back + nom + more */
.pwa-root .fc-hdr {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.pwa-root .fc-back,
.pwa-root .fc-hdr-more {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
}

.pwa-root .fc-back:active,
.pwa-root .fc-hdr-more:active {
  background: var(--s2);
}

.pwa-root .fc-hdr-name {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Hero : avatar + nom + badges + meta + bell relance */
.pwa-root .fc-hero {
  padding: 18px 16px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pwa-root .fc-hero-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}

.pwa-root .fc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.5px;
  flex-shrink: 0;
}

.pwa-root .fc-hero-id {
  min-width: 0;
}

.pwa-root .fc-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
  line-height: 1.2;
  margin: 0 0 6px;
}

.pwa-root .fc-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.pwa-root .fc-meta {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font);
}

.pwa-root .fc-bell {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--s2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.pwa-root .fc-bell:active {
  background: var(--s3);
}

/* Quick actions : 5 tiles uniformes */
.pwa-root .fc-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.pwa-root .fc-action {
  height: 60px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--s2);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.pwa-root .fc-action svg {
  width: 20px;
  height: 20px;
  opacity: .9;
}

.pwa-root .fc-action:active {
  background: var(--s3);
}

/* Variante WhatsApp (verte) */
.pwa-root .fc-action.fc-wa {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  color: var(--green);
}

html[data-theme="noir"] .pwa-root .fc-action.fc-wa {
  background: rgba(34, 160, 107, 0.14);
  border-color: rgba(79, 212, 154, 0.40);
  color: var(--green);
}

.pwa-root .fc-action.fc-wa:active {
  background: color-mix(in srgb, var(--green) 22%, var(--surface));
}

.pwa-root .fc-action.fc-wa svg {
  opacity: 1;
}

/* Score wrap (au-dessus des tabs) */
.pwa-root .fc-score-wrap {
  padding: 14px 16px 4px;
  background: var(--surface);
}

/* Tabs underline Margot V2 */
.pwa-root .fc-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  background: var(--surface);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}

.pwa-root .fc-tabs::-webkit-scrollbar { display: none; }

.pwa-root .fc-tab {
  flex-shrink: 0;
  padding: 12px 14px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease-out, border-color 150ms ease-out;
  margin-bottom: -1px;
}

.pwa-root .fc-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}

.pwa-root .fc-tab-count {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Tab body container */
.pwa-root .fc-tab-body {
  padding: 14px 16px 24px;
  background: var(--bg);
  min-height: 200px;
}

/* Rows key-value style Margot V2 (style tableau iOS native) */
.pwa-root .fc-rows {
  background: var(--surface);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  border: 1px solid var(--border);
}

.pwa-root .fc-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.pwa-root .fc-row:last-child {
  border-bottom: 0;
}

.pwa-root .fc-row-k {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}

.pwa-root .fc-row-v {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pwa-root .fc-row-v a {
  color: var(--accent);
  font-weight: 500;
}

/* Empty state */
.pwa-root .fc-empty {
  padding: 50px 24px;
  text-align: center;
  color: var(--text-dim);
}

.pwa-root .fc-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: .6;
}

.pwa-root .fc-empty-title {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.pwa-root .fc-empty-sub {
  font-size: 13px;
  color: var(--text-dim);
}

/* Timeline activité */
.pwa-root .fc-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pwa-root .fc-tl-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  align-items: start;
}

.pwa-root .fc-tl-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s2);
  color: var(--muted);
  flex-shrink: 0;
}

.pwa-root .fc-tl-icon.call { background: color-mix(in srgb, var(--chaud) 14%, transparent); color: var(--chaud); }
.pwa-root .fc-tl-icon.mail { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pwa-root .fc-tl-icon.visit { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.pwa-root .fc-tl-icon.note { background: color-mix(in srgb, var(--tiede) 14%, transparent); color: var(--tiede); }

.pwa-root .fc-tl-main {
  min-width: 0;
}

.pwa-root .fc-tl-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  margin-bottom: 2px;
}

.pwa-root .fc-tl-body {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
}

.pwa-root .fc-tl-time {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .3px;
  white-space: nowrap;
  text-align: right;
  align-self: start;
  margin-top: 2px;
}

/* Banner bien lié (tab Dossier) */
.pwa-root .fc-bien-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 14px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-md, 6px);
  align-items: center;
  cursor: pointer;
  margin-bottom: 16px;
}

.pwa-root .fc-bien-banner:active {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.pwa-root .fc-bien-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
}

.pwa-root .fc-bien-banner-lbl {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.pwa-root .fc-bien-banner-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Pipeline étapes dossier */
.pwa-root .fc-pipeline-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  padding: 14px;
}

.pwa-root .fc-pipeline-lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.pwa-root .fc-pipeline {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pwa-root .fc-pipeline-step {
  padding: 5px 10px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}

.pwa-root .fc-pipeline-step.done {
  background: var(--s3);
  color: var(--text-dim);
}

.pwa-root .fc-pipeline-step.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* On masque l'ancienne UI fiche client (la coexistence créerait un doublon visuel) */
.pwa-root [data-view="client"] .back-hdr,
.pwa-root [data-view="client"] .client-hero,
.pwa-root [data-view="client"] .seg,
.pwa-root [data-view="client"] [data-tab-content] {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════
   [v1214] FICHE CLIENT V2 — onglets Matching + Notes
   ══════════════════════════════════════════════════════════════════ */

/* === MATCHING === */
.pwa-root .fc-matches {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-root .fc-match-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  align-items: center;
  cursor: pointer;
  box-shadow: var(--e1, 0 1px 2px rgba(20,22,31,.04));
}

.pwa-root .fc-match-card:active {
  background: var(--s2);
}

.pwa-root .fc-match-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm, 4px);
  background: linear-gradient(135deg, #c9d4e2, #8aa1bd);
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

html[data-theme="noir"] .pwa-root .fc-match-thumb {
  background: linear-gradient(135deg, #1a2235, #0c1422);
}

.pwa-root .fc-match-thumb svg {
  z-index: 1;
}

.pwa-root .fc-match-img {
  position: absolute;
  inset: 0;
}

.pwa-root .fc-match-main {
  min-width: 0;
}

.pwa-root .fc-match-addr {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.pwa-root .fc-match-sub {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.pwa-root .fc-match-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pwa-root .fc-match-price {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pwa-root .fc-match-score {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .3px;
  border: 1px solid currentColor;
}

.pwa-root .fc-match-score.hi {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
}

.pwa-root .fc-match-score.mid {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.pwa-root .fc-match-score.lo {
  color: var(--tiede);
  background: color-mix(in srgb, var(--tiede) 8%, transparent);
}

.pwa-root .fc-match-chev {
  color: var(--muted);
  flex-shrink: 0;
}

/* === NOTES === */
.pwa-root .fc-notes-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-bottom: 14px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md, 6px);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -.1px;
}

.pwa-root .fc-notes-cta:active {
  background: color-mix(in srgb, var(--accent) 88%, #000);
}

.pwa-root .fc-notes-feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pwa-root .fc-notes-day-lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  padding: 0 4px;
}

.pwa-root .fc-notes-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pwa-root .fc-note {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
}

.pwa-root .fc-note-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.pwa-root .fc-note-time {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .3px;
}

.pwa-root .fc-note-agent {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  padding: 2px 8px;
  background: var(--s2);
  border-radius: 999px;
}

.pwa-root .fc-note-body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}


/* ══════════════════════════════════════════════════════════════════
   [v1215] FICHE CLIENT V2 — onglets Documents + Biens liés
   ══════════════════════════════════════════════════════════════════ */

/* === DOCUMENTS === */
.pwa-root .fc-docs-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-bottom: 14px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md, 6px);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -.1px;
}

.pwa-root .fc-docs-cta:active {
  background: color-mix(in srgb, var(--accent) 88%, #000);
}

.pwa-root .fc-docs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pwa-root .fc-doc-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  align-items: center;
  cursor: pointer;
}

.pwa-root .fc-doc-card:active {
  background: var(--s2);
}

.pwa-root .fc-doc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 4px);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pwa-root .fc-doc-main {
  min-width: 0;
}

.pwa-root .fc-doc-name {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.pwa-root .fc-doc-meta {
  font-size: 11.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.pwa-root .fc-doc-ext {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--muted);
  padding: 3px 8px;
  background: var(--s2);
  border-radius: 4px;
}

/* === BIENS LIÉS === */
.pwa-root .fc-biens-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-root .fc-bien-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  align-items: center;
  cursor: pointer;
  box-shadow: var(--e1, 0 1px 2px rgba(20,22,31,.04));
}

.pwa-root .fc-bien-card:active {
  background: var(--s2);
}

.pwa-root .fc-bien-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm, 4px);
  background: linear-gradient(135deg, #c9d4e2, #8aa1bd);
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

html[data-theme="noir"] .pwa-root .fc-bien-thumb {
  background: linear-gradient(135deg, #1a2235, #0c1422);
}

.pwa-root .fc-bien-img {
  position: absolute;
  inset: 0;
}

.pwa-root .fc-bien-thumb svg {
  z-index: 1;
}

.pwa-root .fc-bien-main {
  min-width: 0;
}

.pwa-root .fc-bien-addr {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.pwa-root .fc-bien-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root .fc-bien-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pwa-root .fc-bien-price {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pwa-root .fc-bien-etape {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  letter-spacing: .3px;
}

.pwa-root .fc-bien-chev {
  color: var(--muted);
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════
   [v1216] FICHE CLIENT FIX UI : 
   1. Suppression .fc-hdr doublon — back + more intégrés au hero
   2. Hero devient sticky + plus de header noir séparé
   3. Card donna · Instinct compacte (inline) + bottom sheet expandable
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. ANCIEN .fc-hdr SUPPRIMÉ : on cache aussi le bouton ⋮ s'il reste un orphelin ── */
.pwa-root .fc-hdr {
  display: none !important;
}

/* ── 2. HERO devient sticky en haut + nouvelle toprow back/more ── */
.pwa-root .fc-hero {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 16px 16px;
}

.pwa-root .fc-hero-toprow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.pwa-root .fc-hero-toprow .fc-back,
.pwa-root .fc-hero-toprow .fc-hdr-more {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root .fc-hero-toprow .fc-back:active,
.pwa-root .fc-hero-toprow .fc-hdr-more:active {
  background: var(--s2);
}

/* ── 3. CARD DONNA INSTINCT COMPACTE (au-dessus des tabs) ── */
.pwa-root .fc-instinct-wrap {
  padding: 12px 16px 8px;
  background: var(--surface);
  --fci-accent: var(--accent);
}

.pwa-root .fc-instinct-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  box-shadow: var(--e1, 0 1px 2px rgba(20,22,31,.04));
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.pwa-root .fc-instinct-card::before {
  /* Barre verticale violette à gauche */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--fci-accent);
}

.pwa-root .fc-instinct-card:active {
  background: var(--s2);
}

/* Header de la card : icône + label + badge suggestions + chevron */
.pwa-root .fci-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pwa-root .fci-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pwa-root .fci-icon .fci-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--surface);
}

.pwa-root .fci-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--text-dim);
  flex: 1;
}

.pwa-root .fci-badge {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--s2);
  color: var(--text-dim);
  letter-spacing: -.1px;
}

.pwa-root .fci-chev {
  color: var(--muted);
  flex-shrink: 0;
}

/* Score row : gros chiffre + bar + statut */
.pwa-root .fci-score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.pwa-root .fci-score-num {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--fci-accent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 44px;
}

.pwa-root .fci-score-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pwa-root .fci-score-status {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--text-dim);
  text-align: right;
}

.pwa-root .fci-score-bar {
  height: 4px;
  background: var(--s2);
  border-radius: 2px;
  overflow: hidden;
}

.pwa-root .fci-score-fill {
  height: 100%;
  background: var(--fci-accent);
  border-radius: 2px;
  transition: width 400ms cubic-bezier(.4, 0, .2, 1);
}

/* Résumé 1 ligne tronquée */
.pwa-root .fci-resume {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -.1px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 4. BOTTOM SHEET donna instinct expand ── */
.pwa-root .fc-instinct-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(.32, .72, 0, 1);
}

.pwa-root .fc-instinct-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.pwa-root .fc-instinct-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(.32, .72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pwa-root .fc-instinct-sheet.open {
  transform: translateY(0);
}

.pwa-root .fc-instinct-sheet-grabber {
  width: 36px;
  height: 4px;
  background: var(--border-hi, var(--border));
  border-radius: 999px;
  margin: 10px auto 4px;
  opacity: .8;
}

.pwa-root .fc-instinct-sheet-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.pwa-root .fc-instinct-sheet-label {
  flex: 1;
  min-width: 0;
}

.pwa-root .fci-ago {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .8px;
  color: var(--muted);
  margin-top: 2px;
}

.pwa-root .fc-instinct-sheet-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--s2);
  border: none;
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
}

.pwa-root .fc-instinct-sheet-close:active {
  background: var(--s3);
}

.pwa-root .fc-instinct-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  -webkit-overflow-scrolling: touch;
}

/* Score block dans le sheet (plus généreux) */
.pwa-root .fci-sheet-score {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.pwa-root .fci-sheet-score-num {
  font-family: var(--font);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 80px;
}

.pwa-root .fci-sheet-score-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pwa-root .fci-sheet-score-status {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--text-dim);
  text-align: right;
}

.pwa-root .fci-sheet-score-bar {
  height: 6px;
  background: var(--s2);
  border-radius: 3px;
  overflow: hidden;
}

.pwa-root .fci-sheet-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 500ms cubic-bezier(.32, .72, 0, 1);
}

/* Résumé complet */
.pwa-root .fci-sheet-resume {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 16px;
}

.pwa-root .fci-sheet-sugs-count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Liste des suggestions avec barre verticale colorée */
.pwa-root .fci-sheet-sugs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-root .fci-sug {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.pwa-root .fci-sug::before {
  /* Barre verticale colorée à gauche */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--fci-sug-color, var(--accent));
}

.pwa-root .fci-sug-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm, 4px);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pwa-root .fci-sug-main {
  min-width: 0;
}

.pwa-root .fci-sug-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  margin-bottom: 3px;
}

.pwa-root .fci-sug-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

.pwa-root .fci-sug-chev {
  color: var(--muted);
  flex-shrink: 0;
}

/* Footer du sheet : refresh + Demander à donna */
.pwa-root .fc-instinct-sheet-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.pwa-root .fci-foot-refresh {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 6px);
  background: var(--s2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.pwa-root .fci-foot-refresh:active {
  background: var(--s3);
}

.pwa-root .fci-foot-ask {
  flex: 1;
  height: 44px;
  border-radius: var(--radius-md, 6px);
  background: var(--text);
  color: var(--bg);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
}

.pwa-root .fci-foot-ask:active {
  background: var(--text-dim, #4a5169);
}


/* ══════════════════════════════════════════════════════════════════
   [v1217] 3 FIXES SUITE FEEDBACK ANTHONY
   
   1. Gap blanc en haut du hero RÉDUIT au minimum (safe-area + 4px
      au lieu de safe-area + 6px + padding inutile)
   2. Bottom sheet : marge bottom pour pas être caché par BottomNav
      (le bas de la dernière card "Vérifier matching" était coupé)
   3. Quick actions : style iOS natif premium (fond très léger, border
      quasi invisible, icônes plus contrastées, padding affiné)
   4. Grid passe de 5 → 4 colonnes (Note supprimé, l'onglet Notes le fait)
   ══════════════════════════════════════════════════════════════════ */

/* === FIX 1 : Réduction du gap blanc en haut du hero === */
.pwa-root .fc-hero {
  /* AVANT : padding-top: calc(env(safe-area-inset-top, 0px) + 6px)
     APRÈS : safe-area + 2px (économie ~30px de vide) */
  padding: calc(env(safe-area-inset-top, 0px) + 2px) 16px 14px !important;
}

.pwa-root .fc-hero-toprow {
  /* AVANT : margin-bottom: 10px → APRÈS : 4px */
  margin-bottom: 4px !important;
}

/* === FIX 2 : Bottom sheet ne doit pas être caché par la BottomNav === */
/* Le sheet a `max-height: 86vh` mais le body interne scrolle. Le problème
   c'est qu'on ne voyait pas le bas car le footer (refresh + bouton donna)
   était caché derrière la BottomNav (76px de haut + safe-area). On ajoute
   un padding-bottom dans le body pour que le scroll s'arrête au-dessus
   du footer, qui lui-même a son safe-area-inset-bottom déjà. */

.pwa-root .fc-instinct-sheet {
  /* Garantir que le sheet ne dépasse pas au-dessus du tabbar */
  bottom: 0 !important;
  /* Le footer du sheet sera lui-même au-dessus de la safe-area iOS */
}

.pwa-root .fc-instinct-sheet-body {
  /* Avant : padding: 18px → APRÈS : 18px haut/G/D + 100px bas
     pour que les cards ne soient pas coupées par le footer fixe ni par
     l'aperçu du tabbar transparent en-dessous */
  padding: 18px 18px 24px !important;
}

.pwa-root .fc-instinct-sheet-foot {
  /* Le foot reste dans le flux, mais on s'assure que la safe-area iOS
     est bien ajoutée. Sur iPhone X+, env(safe-area-inset-bottom) ≈ 34px */
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

/* En plus, on relève la max-height du sheet : 86vh → 80vh pour laisser
   visible un peu de fiche derrière (UX iOS : voir où on était).
   Et on rend la zone scroll plus généreuse en cas de longues suggestions */
.pwa-root .fc-instinct-sheet {
  max-height: 82vh !important;
}

/* === FIX 3 : Quick actions style iOS natif premium === */
/* Le problème actuel : fond gris uni "--s2" + border gris uni → ça fait
   "boutons Bootstrap" plutôt qu'app iOS native.
   
   Solution iOS native : 
   - Fond TRÈS subtil (5% accent au lieu de 100% gris)
   - Border quasi invisible 
   - Icônes saturées en couleur thématique (vert pour appel, bleu pour SMS, etc.)
   - Coins plus arrondis (Apple HIG = 12px en standard)
   - Ombre interne très subtile pour profondeur
*/

.pwa-root .fc-action {
  /* Coins arrondis style iOS (Apple HIG = 12-13px) */
  border-radius: 14px !important;
  /* Fond très léger gris pâle, presque blanc */
  background: color-mix(in srgb, var(--text) 4%, var(--surface)) !important;
  /* Border quasi invisible (ou nulle en dark) */
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent) !important;
  /* Padding plus généreux */
  height: 64px !important;
  /* Label plus discret, plus iOS */
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: -.05px !important;
  gap: 5px !important;
}

html[data-theme="noir"] .pwa-root .fc-action {
  background: color-mix(in srgb, #fff 5%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 7%, transparent) !important;
}

.pwa-root .fc-action svg {
  width: 22px !important;
  height: 22px !important;
  opacity: 1 !important;
}

.pwa-root .fc-action:active {
  background: color-mix(in srgb, var(--text) 8%, var(--surface)) !important;
  transform: scale(.97);
}

/* Icônes colorées par fonction (iOS messaging app style) */
/* Appel = vert iOS (phone) */
.pwa-root .fc-action#pwa-fiche-call svg {
  color: #22a06b;
}
.pwa-root .fc-action#pwa-fiche-call .fc-action-label,
.pwa-root .fc-action#pwa-fiche-call span {
  color: var(--text);
}

/* SMS = bleu iOS */
.pwa-root .fc-action#pwa-fiche-sms svg {
  color: #007aff;
}

/* WhatsApp = vert WA (préservé du v1208) */
.pwa-root .fc-action.fc-wa {
  background: color-mix(in srgb, #25d366 8%, var(--surface)) !important;
  border-color: color-mix(in srgb, #25d366 18%, transparent) !important;
}

.pwa-root .fc-action.fc-wa svg {
  color: #25d366;
}

html[data-theme="noir"] .pwa-root .fc-action.fc-wa {
  background: color-mix(in srgb, #25d366 14%, transparent) !important;
}

/* E-mail = bleu/gris iOS */
.pwa-root .fc-action#pwa-fiche-mail svg {
  color: #5856d6;
}

/* Le label en dessous reste en couleur texte normale */
.pwa-root .fc-action span {
  color: var(--text);
  font-weight: 500;
}

/* === FIX 4 : grid 5 cols → 4 cols (Note supprimé) === */
.pwa-root .fc-actions {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

/* === BONUS : ajustement vertical fc-instinct-wrap pour éviter trop d'espace === */
.pwa-root .fc-instinct-wrap {
  /* Avant : padding: 12px 16px 8px → APRÈS : 10px 16px 6px (compact) */
  padding: 10px 16px 6px !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1218] FIX FINAL fiche client : gap + sheet
   
   1. Gap blanc en HAUT du hero : encore trop d'espace.
      Vrai problème = le wrapper .scroll a un padding-top hérité.
      → Force padding-top: 0 sur .scroll quand on est sur la fiche.
      → Hero passe à safe-area + 0px (collé en haut).
   
   2. Bottom sheet : bouton "Demander à donna" toujours coupé par BottomNav.
      Vrai problème = la BottomNav est en position:fixed avec z-index élevé,
      donc même si le sheet a un padding-bottom safe-area, le contenu 
      du sheet est physiquement caché par la barre.
      → Le sheet doit s'étendre AU-DESSUS de la BottomNav, pas sous.
      → margin-bottom du sheet = hauteur BottomNav (~90px sur iPhone).
   ══════════════════════════════════════════════════════════════════ */

/* === FIX 1 : padding-top à zéro absolu sur le hero === */
.pwa-root [data-view="client"] .scroll {
  padding-top: 0 !important;
}

.pwa-root .fc-hero {
  padding-top: calc(env(safe-area-inset-top, 0px) + 0px) !important;
}

/* fc-hero-toprow : encore réduire margin-bottom */
.pwa-root .fc-hero-toprow {
  margin-bottom: 0 !important;
  /* Et padding-top zéro pour bien plaquer en haut */
  margin-top: -2px !important;
}

/* === FIX 2 : Sheet ne passe plus sous la BottomNav === */
/* La BottomNav a hauteur ~66px + safe-area-inset-bottom (~34px iPhone X+)
   = ~100px au total. Le sheet doit s'arrêter AU-DESSUS de cette zone.
   
   Solution : on remonte le bottom du sheet de la hauteur exacte de la
   BottomNav, comme ça le footer (refresh + Demander à donna) est 
   100% visible. */

.pwa-root .fc-instinct-sheet {
  /* Le sheet s'arrête à 90px du bas (au-dessus de la BottomNav) */
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  /* Et la max-height augmente puisqu'on a plus de place au-dessus */
  max-height: calc(100vh - 76px - env(safe-area-inset-bottom, 0px) - 40px) !important;
  /* On retire le padding-bottom safe-area qu'on avait avant
     puisque maintenant la BottomNav est en dessous, pas derrière */
  padding-bottom: 0 !important;
}

/* Le backdrop par contre couvre TOUT y compris derrière la BottomNav */
.pwa-root .fc-instinct-sheet-backdrop {
  /* Inchangé : inset: 0 */
}

/* Footer du sheet : padding normal (plus besoin de safe-area car
   le sheet entier est au-dessus de la zone iPhone home indicator) */
.pwa-root .fc-instinct-sheet-foot {
  padding: 14px 18px !important;
}

/* Body du sheet : padding réduit au bas (footer juste en dessous) */
.pwa-root .fc-instinct-sheet-body {
  padding: 18px 18px 18px !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1219] LISTE CLIENTS — refonte vers mockup Margot V2
   
   Ajouts :
   1. Search bar inline en haut (au lieu de derrière icône loupe)
   2. Banner "À rappeler aujourd'hui · N" violet pâle, cliquable
   3. Section labels "CHAUDS · 22" en mono caps avec dot coloré
   4. Finition rows (Margot V2 plus structuré)
   ══════════════════════════════════════════════════════════════════ */

/* === 1. Toolbar (search + banner rappel) === */
.pwa-root .cl-toolbar {
  padding: 8px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
}

/* Search bar inline iOS native style */
.pwa-root .cl-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
}

html[data-theme="noir"] .pwa-root .cl-search {
  background: color-mix(in srgb, #fff 6%, transparent);
  border-color: color-mix(in srgb, #fff 4%, transparent);
}

.pwa-root .cl-search svg {
  color: var(--muted);
  flex-shrink: 0;
}

.pwa-root .cl-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: -.1px;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}

.pwa-root .cl-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Banner "À rappeler aujourd'hui" — violet pâle iOS style */
.pwa-root .cl-rappel-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease-out;
}

html[data-theme="noir"] .pwa-root .cl-rappel-banner {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.pwa-root .cl-rappel-banner:active {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.pwa-root .cl-rappel-banner.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pwa-root .cl-rappel-banner.active .cl-rappel-icon,
.pwa-root .cl-rappel-banner.active .cl-rappel-lbl,
.pwa-root .cl-rappel-banner.active .cl-rappel-count {
  color: #fff;
}

.pwa-root .cl-rappel-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}

.pwa-root .cl-rappel-lbl {
  flex: 1;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -.1px;
  text-align: left;
}

.pwa-root .cl-rappel-count {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: right;
}

/* === 2. Section labels Margot V2 (CHAUDS · 22) === */
.pwa-root .cl-sec-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0 !important;
}

.pwa-root .cl-sec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.pwa-root .cl-sec-dot.chaud { background: var(--chaud); }
.pwa-root .cl-sec-dot.tiede { background: var(--tiede); }
.pwa-root .cl-sec-dot.froid { background: var(--froid); }

.pwa-root .cl-sec-lbl-text {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--text-dim);
  flex: 1;
}

.pwa-root .cl-sec-lbl-count {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* On masque l'ancien .sec-lbl (legacy) */
.pwa-root .sec-lbl:not(.cl-sec-lbl) {
  display: none !important;
}

/* === 3. Padding réduit pour la liste === */
.pwa-root #pwa-clients-list {
  padding: 0;
}

/* Padding du wrapper de la liste — réduit pour gagner de la place */
.pwa-root [data-view="clients"] .scroll > div[style*="padding"] {
  padding: 0 16px 24px !important;
}

/* === 4. Finition rows (refinements du ListItem) === */
.pwa-root .m-li {
  /* Padding plus généreux pour respirer */
  padding: 12px 4px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}

.pwa-root .m-li:active {
  background: var(--s2) !important;
}

.pwa-root .m-li:last-child {
  border-bottom: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1220] FIX FINAL gap top + Card Instinct sticky devant BottomNav
   
   PROBLÈME 1 (Anthony : gap visible iPhone, pas Chrome)
   = DOUBLE SAFE-AREA. Le legacy pwa-mobile.css ligne 1851 fait :
     body.is-mobile.pwa-active { padding-top: env(safe-area-inset-top) !important }
   Et j'avais ajouté en v1216/v1218 :
     .fc-hero { padding-top: env(safe-area-inset-top) + 0 !important }
   → Sur iPhone (dynamic island ~50px) : 50 + 50 = 100px de vide en haut
   → Sur Chrome (safe-area = 0) : 0 + 0 = 0 → invisible
   
   FIX : retirer le safe-area du fc-hero puisque le body le fait déjà.
   
   PROBLÈME 2 (Anthony : card instinct doit passer devant la navbar)
   → La card .fc-instinct-card devient sticky en bas, AU-DESSUS de la
     BottomNav (z-index > tabbar). Quand l'user scrolle, elle reste 
     visible en permanence en bas de l'écran. Tap → ouvre le sheet.
   ══════════════════════════════════════════════════════════════════ */

/* === FIX 1 : éliminer le double safe-area === */
.pwa-root .fc-hero {
  /* AVANT : padding: calc(env(safe-area-inset-top) + 0px) 16px 14px !important
     APRÈS : 8px 16px 14px — le body parent applique déjà le safe-area */
  padding: 8px 16px 14px !important;
}

/* Garder le scroll padding-top à 0 sur la fiche */
.pwa-root [data-view="client"] .scroll {
  padding-top: 0 !important;
}

/* === FIX 2 : Card donna Instinct sticky en bas devant la BottomNav === */

/* [v1222 ANNULÉ] La card revient INLINE en haut comme demandé par Anthony.
   Seul le SHEET (au tap) reste fixed en bottom. */
.pwa-root .fc-instinct-wrap {
  position: static !important;
  background: var(--surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 0 !important;
  box-shadow: none !important;
  padding: 12px 16px 8px !important;
}

/* Annule la compensation scroll padding-bottom (plus besoin) */
.pwa-root [data-view="client"] .scroll {
  padding-bottom: 0 !important;
}

html[data-theme="noir"] .pwa-root .fc-instinct-wrap {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.24);
}

/* La card elle-même : plus compacte car devient un bandeau */
.pwa-root .fc-instinct-card {
  padding: 10px 12px !important;
  box-shadow: none !important;  /* L'ombre est sur le wrapper sticky */
  background: var(--surface) !important;
}

/* Header de la card plus compact en mode sticky */
.pwa-root .fc-instinct-card .fci-head {
  margin-bottom: 6px !important;
}

/* Score row plus compact */
.pwa-root .fc-instinct-card .fci-score-row {
  margin-bottom: 6px !important;
}

.pwa-root .fc-instinct-card .fci-score-num {
  font-size: 26px !important;  /* AVANT 32px */
  min-width: 38px !important;
}

/* Résumé : on garde le truncate à 1 ligne, taille un poil plus petite */
.pwa-root .fc-instinct-card .fci-resume {
  font-size: 12.5px !important;
}

/* Le sheet passe maintenant AU-DESSUS de la card sticky elle-même */
.pwa-root .fc-instinct-sheet {
  /* AVANT v1218 : bottom: calc(76px + safe-area)
     APRÈS : bottom: 0 — le sheet recouvre TOUT (card sticky + bottomnav)
     car son z-index est plus haut que les deux */
  bottom: 0 !important;
  /* z-index élevé : doit être au-dessus de la BottomNav (9998) ET de la
     card sticky (9999). On met 100000 pour être sûr. */
  z-index: 100000 !important;
  padding-bottom: 0 !important;
  max-height: 86vh !important;
}

.pwa-root .fc-instinct-sheet-backdrop {
  /* Le backdrop aussi doit être au-dessus de la BottomNav */
  z-index: 99999 !important;
}

.pwa-root .fc-instinct-sheet-foot {
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

.pwa-root .fc-instinct-sheet-body {
  /* Garde un padding-bottom raisonnable pour pas que le contenu soit collé
     au footer (au-dessus de la safe-area) */
  padding: 18px 18px 18px !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1221] LISTE CLIENTS — header 3 boutons + 2 sheets (search + filter)
   ══════════════════════════════════════════════════════════════════ */

/* === Header : 3 boutons d'action (loupe / filtre / +) === */

/* Sub-header sous "Clients" (Mes clients · 47 · 12 chauds) */
.pwa-root [data-view="clients"] .hdr .hdr-sub {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: -.1px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Boutons d'action header */
.pwa-root [data-view="clients"] .hdr .actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.pwa-root [data-view="clients"] .hdr-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root [data-view="clients"] .hdr-btn:active {
  background: var(--s2);
}

/* Pastille violette sur le bouton filtre si filtres actifs */
.pwa-root .hdr-btn-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}

/* === Search Sheet (full-screen avec input focus auto) === */

.pwa-root .cl-search-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(.32, .72, 0, 1);
}

.pwa-root .cl-search-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.pwa-root .cl-search-sheet {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 280ms cubic-bezier(.32, .72, 0, 1);
}

.pwa-root .cl-search-sheet.open {
  transform: translateY(0);
}

.pwa-root .cl-search-sheet-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pwa-root .cl-search-sheet-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  border-radius: 12px;
}

html[data-theme="noir"] .pwa-root .cl-search-sheet-input-wrap {
  background: color-mix(in srgb, #fff 6%, transparent);
}

.pwa-root .cl-search-sheet-input-wrap svg {
  color: var(--muted);
  flex-shrink: 0;
}

.pwa-root .cl-search-sheet-input-wrap input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;  /* 16px = pas de zoom Safari */
  letter-spacing: -.1px;
}

.pwa-root .cl-search-sheet-input-wrap input::placeholder {
  color: var(--muted);
}

.pwa-root .cl-search-sheet-clear {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: var(--muted);
  color: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.pwa-root .cl-search-sheet-cancel {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 4px;
  letter-spacing: -.1px;
}

.pwa-root .cl-search-sheet-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 16px;
}

.pwa-root .cl-search-sheet-empty {
  padding: 60px 24px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* === Filter Sheet (bottom sheet) === */

.pwa-root .cl-filter-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(.32, .72, 0, 1);
}

.pwa-root .cl-filter-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.pwa-root .cl-filter-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
}

.pwa-root .cl-filter-sheet.open {
  transform: translateY(0);
}

.pwa-root .cl-filter-sheet-grabber {
  width: 36px;
  height: 4px;
  background: var(--border-hi, var(--border));
  border-radius: 999px;
  margin: 10px auto 4px;
  opacity: .8;
}

.pwa-root .cl-filter-sheet-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.pwa-root .cl-filter-sheet-title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text);
  margin: 0;
}

.pwa-root .cl-filter-sheet-reset {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 4px;
  letter-spacing: -.1px;
}

.pwa-root .cl-filter-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
}

.pwa-root .cl-filter-section {
  margin-bottom: 22px;
}

.pwa-root .cl-filter-section:last-child {
  margin-bottom: 0;
}

.pwa-root .cl-filter-section-lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.pwa-root .cl-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pwa-root .cl-filter-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--text) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  letter-spacing: -.1px;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

html[data-theme="noir"] .pwa-root .cl-filter-opt {
  background: color-mix(in srgb, #fff 5%, transparent);
  border-color: color-mix(in srgb, #fff 8%, transparent);
}

.pwa-root .cl-filter-opt:active {
  background: color-mix(in srgb, var(--text) 10%, var(--surface));
}

.pwa-root .cl-filter-opt.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.pwa-root .cl-filter-opt .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.pwa-root .cl-filter-opt.active .dot {
  background: rgba(255, 255, 255, 0.9) !important;
}

.pwa-root .cl-filter-sheet-foot {
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}

.pwa-root .cl-filter-sheet-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
}

.pwa-root .cl-filter-sheet-apply:active {
  background: var(--text-dim);
}

.pwa-root .cl-filter-sheet-count {
  background: rgba(255, 255, 255, 0.18);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
}

/* === Cleanup : on cache aussi la toolbar cl-search inline (déplacée dans sheet) === */
.pwa-root .cl-toolbar .cl-search {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════
   [v1222] 4 FIXES
   
   1. Card donna · Instinct revient inline (cf bloc précédent réécrit)
   2. Barre des onglets fixe verticalement (scroll horizontal autorisé seulement)
   3. Liste Matching utilise .m-li (réutilise renderBienRow style)
   4. Avatars liste clients : initiales noires sur fond pastel hashé
   ══════════════════════════════════════════════════════════════════ */

/* === FIX 2 : Tabs scrollable horizontal SEULEMENT ===
   Le bug : sur iOS le conteneur .fc-tabs en overflow-x:auto laissait quand
   même le bounce vertical du scroll body remonter dans la zone tabs.
   Solution : forcer touch-action: pan-x (autorise seulement le pan horizontal),
   overflow-y: hidden, et un overscroll-behavior: contain pour bloquer le
   chaining vers le parent. */
.pwa-root .fc-tabs {
  overflow-y: hidden !important;
  overflow-x: auto !important;
  touch-action: pan-x !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  /* Empêche le wrap des tabs (sinon ça déborde verticalement aussi) */
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Hide scrollbar visuel pour rester clean (iOS already hides it) */
.pwa-root .fc-tabs::-webkit-scrollbar {
  display: none;
}

.pwa-root .fc-tabs {
  scrollbar-width: none;
}

/* Chaque .fc-tab ne wrap pas */
.pwa-root .fc-tab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}


/* === FIX 4 : Avatars hashés style mockup Margot ===
   Initiales en couleur texte normale (noire), fond pastel dérivé du nom.
   La couleur du fond vient d'une CSS custom property --m-avatar-bg que
   le JS calcule via un hash modulo 8 sur le nom. */
.pwa-root [data-view="clients"] .m-avatar,
.pwa-root .cl-search-sheet-results .m-avatar {
  /* Override : on retire le style="background:..." inline en passant
     par une CSS var. Le JS pose --m-avatar-bg, on fallback sur s2 */
  background: var(--m-avatar-bg, var(--s2)) !important;
  color: var(--m-avatar-fg, var(--text)) !important;
  font-weight: 600;
  letter-spacing: -.2px;
  font-size: 13.5px;
}

html[data-theme="noir"] .pwa-root [data-view="clients"] .m-avatar,
html[data-theme="noir"] .pwa-root .cl-search-sheet-results .m-avatar {
  /* En dark mode on garde les fonds pastel mais à 18% pour ne pas griller */
  background: var(--m-avatar-bg, var(--s2)) !important;
  color: var(--m-avatar-fg, var(--text)) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1223] 6 FIXES suite feedback
   
   1. Avatars carrés coins arrondis style iOS app icon (border-radius 28%)
   2. Score à droite dans la liste clients (pas à côté du nom)
   3. Sheet donna Instinct DEVANT la BottomNav (était bloqué à 76px du bas)
   4. Status bar zone fond BLANC au lieu de gris clair
   5. Bouton retour fiche client wiré (cf JS)
   6. Avatar fiche client aussi carré arrondi
   ══════════════════════════════════════════════════════════════════ */

/* === FIX 1 + 6 : Avatars carrés coins arrondis (style iOS app icon) === */
/* Override le .m-avatar circulaire (border-radius:50%) du Margot V1.
   28% donne un look continuous-corners proche du standard Apple HIG. */
.pwa-root .m-avatar:not(.square) {
  border-radius: 28% !important;
}

/* Avatar de la fiche client (.fc-avatar) : même traitement carré arrondi */
.pwa-root .fc-avatar {
  border-radius: 28% !important;
}

/* === FIX 2 : Score à droite dans la liste clients ===
   Avant : le badge "✦ 72" était à côté du nom DANS le m-li-title.
   Maintenant : on cache ce badge inline et le score s'affiche dans
   .m-li-trailing (qui existe déjà avec le silence en jours).
   Le rendu JS de v1202 le faisait déjà : aiScore en priorité dans trailing.
   Mais le badge ✦ doublonait. On le cache via CSS quand c'est dans la liste. */
.pwa-root [data-view="clients"] .m-li-title .m-badge.green,
.pwa-root .cl-search-sheet-results .m-li-title .m-badge.green {
  display: none !important;
}

/* Le trailing prend le score IA en gras (déjà fait par le JS), on s'assure
   juste de bien aligner et donner une taille lisible */
.pwa-root [data-view="clients"] .m-li-trailing {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

/* === FIX 3 : Sheet donna Instinct DEVANT la BottomNav ===
   v1218 avait mis bottom: 76px + safe-area pour que le sheet "s'arrête"
   au-dessus de la nav, mais Anthony veut maintenant l'inverse : le sheet
   doit recouvrir la nav (modal classique iOS). Z-index 100000 > 9998 nav. */
.pwa-root .fc-instinct-sheet {
  bottom: 0 !important;
  max-height: 86vh !important;
  /* z-index supérieur à la BottomNav (#__pwa_tabbar_host z-index:9998) */
  z-index: 100000 !important;
  padding-bottom: 0 !important;
}

.pwa-root .fc-instinct-sheet-backdrop {
  z-index: 99999 !important;
}

/* Le footer du sheet doit gérer la safe-area iOS car le sheet va jusqu'en bas */
.pwa-root .fc-instinct-sheet-foot {
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

.pwa-root .fc-instinct-sheet-body {
  padding: 18px 18px 18px !important;
}

/* === FIX 4 : Zone status bar (safe-area top) en BLANC ===
   Sur iPhone PWA, la zone derrière les "ears" iOS (heure, signal, batterie)
   utilise le background du body.is-mobile.pwa-active qui est --bg gris clair.
   Anthony veut blanc.
   
   Solution propre : un overlay coloré qui couvre uniquement la safe-area top
   en blanc. Note : ça concerne uniquement la fiche client pour rester safe. */
.pwa-root [data-view="client"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface);  /* blanc en clair, noir en mode noir */
  z-index: 99;  /* en-dessous du sheet (100000) mais au-dessus du contenu */
  pointer-events: none;
}

/* Dark mode : la zone safe-area reste noire (cohérent) */
html[data-theme="noir"] .pwa-root [data-view="client"]::before {
  background: var(--bg);
}

/* Et pour bien matcher : le hero lui-même doit aussi être en surface blanc */
.pwa-root .fc-hero {
  background: var(--surface) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1226] FIX RÉGRESSIONS v1224
   
   PROBLÈMES (causés par v1224 qui déplaçait le sheet en dehors de
   .pwa-root, créant 2 bugs) :
   
   (a) DESKTOP : le sheet apparaissait sur desktop (visuel cassé en
       haut-gauche "DONNA · INSTINCT / ✕ / Demander à donna >")
       car il était dans body direct sans condition d'affichage.
   
   (b) MOBILE : le sheet ne s'ouvrait plus visuellement car toutes
       les règles CSS étaient préfixées .pwa-root et il était dehors.
   
   SOLUTION :
   - Le sheet est REMIS dans [data-view="client"] (enfant de .pwa-root)
     → règles CSS .pwa-root marchent + visible que en mode PWA
   - Au moment de l'ouverture, JS hoist le sheet dans #__pwa_sheet_host
     via _ensureFciSheetHoisted() (pattern officiel donna)
   - Les règles CSS sont REDUPLIQUÉES sans préfixe .pwa-root pour aussi
     marcher quand le sheet est dans #__pwa_sheet_host.
   ══════════════════════════════════════════════════════════════════ */

/* Sécurité : si jamais le sheet se retrouve dans body direct (hors PWA),
   on le cache. Il ne doit s'afficher QUE quand body.is-mobile.pwa-active */
body:not(.pwa-active) > .fc-instinct-sheet,
body:not(.pwa-active) > .fc-instinct-sheet-backdrop,
body:not(.is-mobile) > .fc-instinct-sheet,
body:not(.is-mobile) > .fc-instinct-sheet-backdrop {
  display: none !important;
}

/* Règles dupliquées pour quand le sheet est hoisté dans #__pwa_sheet_host
   (les règles initiales .pwa-root .* ne s'appliquent plus dans ce cas) */
#__pwa_sheet_host .fc-instinct-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(.32, .72, 0, 1);
}

#__pwa_sheet_host .fc-instinct-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

#__pwa_sheet_host .fc-instinct-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background: var(--surface, #fff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(.32, .72, 0, 1);
  padding-bottom: 0;
  /* Couleurs basiques pour quand le sheet est hors .pwa-root */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  color: var(--text, #14161f);
}

#__pwa_sheet_host .fc-instinct-sheet.open {
  transform: translateY(0);
}

#__pwa_sheet_host .fc-instinct-sheet-grabber {
  width: 36px;
  height: 4px;
  background: var(--border-hi, var(--border, rgba(0,0,0,.1)));
  border-radius: 999px;
  margin: 10px auto 4px;
  opacity: .8;
}

#__pwa_sheet_host .fc-instinct-sheet-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 14px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}

#__pwa_sheet_host .fc-instinct-sheet-label {
  flex: 1;
  min-width: 0;
}

#__pwa_sheet_host .fci-icon {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent, #7c6af7);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

#__pwa_sheet_host .fci-icon .fci-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #22a06b);
  border: 2px solid var(--surface, #fff);
}

#__pwa_sheet_host .fci-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--text-dim, #5c6480);
}

#__pwa_sheet_host .fci-ago {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .8px;
  color: var(--muted, #888);
  margin-top: 2px;
}

#__pwa_sheet_host .fc-instinct-sheet-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--s2, #f0f1f5);
  border: none;
  display: grid;
  place-items: center;
  color: var(--text, #14161f);
  cursor: pointer;
}

#__pwa_sheet_host .fc-instinct-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
}

#__pwa_sheet_host .fci-sheet-score {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

#__pwa_sheet_host .fci-sheet-score-num {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 80px;
}

#__pwa_sheet_host .fci-sheet-score-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#__pwa_sheet_host .fci-sheet-score-status {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--text-dim, #5c6480);
  text-align: right;
}

#__pwa_sheet_host .fci-sheet-score-bar {
  height: 6px;
  background: var(--s2, #f0f1f5);
  border-radius: 3px;
  overflow: hidden;
}

#__pwa_sheet_host .fci-sheet-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 500ms cubic-bezier(.32, .72, 0, 1);
}

#__pwa_sheet_host .fci-sheet-resume {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text, #14161f);
  margin-bottom: 16px;
}

#__pwa_sheet_host .fci-sheet-sugs-count {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: var(--muted, #888);
  margin-bottom: 10px;
}

#__pwa_sheet_host .fci-sheet-sugs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#__pwa_sheet_host .fci-sug {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 6px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

#__pwa_sheet_host .fci-sug::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--fci-sug-color, var(--accent, #7c6af7));
}

#__pwa_sheet_host .fci-sug-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

#__pwa_sheet_host .fci-sug-main {
  min-width: 0;
}

#__pwa_sheet_host .fci-sug-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #14161f);
  letter-spacing: -.1px;
  margin-bottom: 3px;
}

#__pwa_sheet_host .fci-sug-sub {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-dim, #5c6480);
  line-height: 1.4;
}

#__pwa_sheet_host .fci-sug-chev {
  color: var(--muted, #888);
  flex-shrink: 0;
}

#__pwa_sheet_host .fc-instinct-sheet-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
  background: var(--surface, #fff);
}

#__pwa_sheet_host .fci-foot-refresh {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--s2, #f0f1f5);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  display: grid;
  place-items: center;
  color: var(--text, #14161f);
  cursor: pointer;
  flex-shrink: 0;
}

#__pwa_sheet_host .fci-foot-ask {
  flex: 1;
  height: 44px;
  border-radius: 6px;
  background: var(--text, #14161f);
  color: var(--bg, #fff);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
}


/* ══════════════════════════════════════════════════════════════════
   [v1227] FICHE BIEN — refonte Margot V2
   
   Structure :
   1. Galerie photo hero (existant, ajustements)
   2. Hero info Margot V2 (prix + €/m² + adresse + tags pills)
   3. Tabbar 6 onglets
   4. Tab body avec sections (.fb-section / .fb-info-row)
   5. Sticky bottom : Modifier · Partager PDF · ⋮
   ══════════════════════════════════════════════════════════════════ */

/* === Galerie photo : badge status overlay top-right (Margot V2) === */
.pwa-root .fb-gallery .g-status {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
}

.pwa-root .fb-status-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: #22a06b;
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.1px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Bouton back rond blanc translucide (style iOS native) */
.pwa-root .fb-gallery .g-back {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  color: #14161f;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.pwa-root .fb-gallery .g-actions {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.pwa-root .fb-gallery .g-act {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  color: #14161f;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* === Hero info Margot V2 === */
.pwa-root .fb-hero-v2 {
  padding: 16px 16px 12px;
  background: var(--surface);
}

.pwa-root .fb-hero-v2 .h-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pwa-root .fb-hero-v2 .h-price {
  font-family: var(--font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.8px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pwa-root .fb-hero-v2 .h-ppm {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: -.1px;
}

.pwa-root .fb-hero-v2 .h-ppm:not(:empty)::before {
  content: '· ';
  color: var(--muted);
}

.pwa-root .fb-hero-v2 .h-addr {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  font-size: 13.5px;
  letter-spacing: -.1px;
  margin-bottom: 10px;
}

.pwa-root .fb-hero-v2 .h-addr svg {
  color: var(--muted);
  flex-shrink: 0;
}

.pwa-root .fb-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pwa-root .fb-tag-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.1px;
}

html[data-theme="noir"] .pwa-root .fb-tag-pill {
  background: color-mix(in srgb, #fff 6%, transparent);
  border-color: color-mix(in srgb, #fff 8%, transparent);
}

/* === Tabbar 6 onglets Margot V2 === */
.pwa-root .fb-tabs {
  display: flex;
  gap: 0;
  padding: 4px 12px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  overscroll-behavior: contain !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  scrollbar-width: none;
}

.pwa-root .fb-tabs::-webkit-scrollbar {
  display: none;
}

.pwa-root .fb-tab {
  flex-shrink: 0;
  padding: 12px 14px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease-out, border-color 150ms ease-out;
  margin-bottom: -1px;
  letter-spacing: -.1px;
}

.pwa-root .fb-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}

.pwa-root .fb-tab-count {
  margin-left: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pwa-root .fb-tab-count:empty {
  display: none;
}

/* === Tab body : sections + info-row Margot V2 === */
.pwa-root .fb-tab-body {
  padding: 0;
  background: var(--surface);
}

.pwa-root .fb-section {
  padding: 14px 16px 8px;
}

.pwa-root .fb-section + .fb-section {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

.pwa-root .fb-section-lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.pwa-root .fb-info-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.pwa-root .fb-info-row:last-child {
  border-bottom: 0;
}

.pwa-root .fb-info-row .lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 1px;
}

.pwa-root .fb-info-row .val {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  letter-spacing: -.1px;
  line-height: 1.45;
}

.pwa-root .fb-info-row .val.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.pwa-root .fb-info-row .val.strong {
  font-weight: 600;
}

.pwa-root .fb-info-row.is-desc .val {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

/* === Empty state === */
.pwa-root .fb-empty {
  padding: 50px 24px;
  text-align: center;
  color: var(--text-dim);
}

.pwa-root .fb-empty-icon {
  font-size: 38px;
  opacity: .4;
  margin-bottom: 10px;
}

.pwa-root .fb-empty-title {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.pwa-root .fb-empty-sub {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: -.1px;
}

/* === Tab Vendeur : card vendeur === */
.pwa-root .fb-vendeur-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 14px;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root .fb-vendeur-card:active {
  background: var(--s2);
}

.pwa-root .fb-vendeur-main {
  flex: 1;
  min-width: 0;
}

.pwa-root .fb-vendeur-name {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  margin-bottom: 2px;
}

.pwa-root .fb-vendeur-sub {
  font-size: 12.5px;
  color: var(--text-dim);
}

/* === Tab Visites : rows === */
.pwa-root .fb-visite-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.pwa-root .fb-visite-row:last-child {
  border-bottom: 0;
}

.pwa-root .fb-visite-row.past {
  opacity: .6;
}

.pwa-root .fb-visite-date .day {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.pwa-root .fb-visite-date .time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.pwa-root .fb-visite-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}

.pwa-root .fb-visite-sub {
  font-size: 12px;
  color: var(--text-dim);
}

/* === Tab Suivi : timeline === */
.pwa-root .fb-timeline-row {
  display: grid;
  grid-template-columns: 50px 16px 1fr;
  gap: 10px;
  padding: 10px 0;
  align-items: start;
}

.pwa-root .fb-timeline-date {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  text-align: right;
  padding-top: 4px;
}

.pwa-root .fb-timeline-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin: 8px auto 0;
}

.pwa-root .fb-timeline-row:not(:last-child) .fb-timeline-dot::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 24px;
  background: var(--border);
}

.pwa-root .fb-timeline-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.pwa-root .fb-timeline-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* === Tab Pipeline : étapes === */
.pwa-root .fb-pipeline {
  display: flex;
  align-items: center;
  padding: 8px 0 16px;
  gap: 0;
}

.pwa-root .fb-pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pwa-root .fb-pipeline-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--s2);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 14px;
  border: 2px solid var(--border);
}

.pwa-root .fb-pipeline-step.done .fb-pipeline-icon {
  background: var(--green, #22a06b);
  color: #fff;
  border-color: var(--green, #22a06b);
}

.pwa-root .fb-pipeline-step.current .fb-pipeline-icon {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.pwa-root .fb-pipeline-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.pwa-root .fb-pipeline-step.done .fb-pipeline-label,
.pwa-root .fb-pipeline-step.current .fb-pipeline-label {
  color: var(--text);
}

.pwa-root .fb-pipeline-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: -22px 2px 0;
  min-width: 8px;
}

.pwa-root .fb-pipeline-connector.done {
  background: var(--green, #22a06b);
}

/* === Sticky bottom bar Margot V2 === */
.pwa-root .fb-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  gap: 8px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
}

.pwa-root .fb-bb-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root .fb-bb-btn.secondary {
  background: color-mix(in srgb, var(--text) 5%, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}

html[data-theme="noir"] .pwa-root .fb-bb-btn.secondary {
  background: color-mix(in srgb, #fff 5%, transparent);
  border-color: color-mix(in srgb, #fff 8%, transparent);
}

.pwa-root .fb-bb-btn.secondary:active {
  background: color-mix(in srgb, var(--text) 10%, var(--surface));
}

.pwa-root .fb-bb-btn.primary {
  background: var(--text);
  color: var(--bg);
  border: 0;
}

.pwa-root .fb-bb-btn.primary:active {
  background: var(--text-dim);
}

.pwa-root .fb-bb-btn.icon-only {
  flex: 0 0 44px;
  width: 44px;
  background: color-mix(in srgb, var(--text) 5%, var(--surface));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}

html[data-theme="noir"] .pwa-root .fb-bb-btn.icon-only {
  background: color-mix(in srgb, #fff 5%, transparent);
  border-color: color-mix(in srgb, #fff 8%, transparent);
}

/* === Cleanup : cacher fb-sec et fb-actions legacy === */
.pwa-root .fb-sec,
.pwa-root #pwa-fb-overlay .fb-actions {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1228] Fiche bien : 4 fixes ciblés
   
   (1) Description pleine largeur (sans colonne label à gauche)
   (2) Padding bottom réduit (sticky bar collée au bas)
   (3) Onglet "Mandat" : info-row uniquement (pipeline visuel retiré JS)
   (4) Galerie : back haut-gauche + status badge + favoris haut-droite
       Favoris en blanc translucide (comme le back), pas gris
   ══════════════════════════════════════════════════════════════════ */

/* (1) Description pleine largeur : label mono caps gris au-dessus, value en-dessous */
.pwa-root .fb-info-desc {
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border);
}

.pwa-root .fb-info-desc:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pwa-root .fb-info-desc .lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.pwa-root .fb-info-desc .val {
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  letter-spacing: -.05px;
}

/* (2) Sticky bottom : padding très resserré (4px haut, 6px bas + safe-area) */
.pwa-root .fb-bottom-bar {
  padding: 6px 14px calc(4px + env(safe-area-inset-bottom, 0px));
  /* Override la règle v1227 (12px haut, 12px bas) */
}

/* (4) Galerie : group top-right (status badge + favoris côte à côte) */
.pwa-root .fb-gallery .g-topright {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

/* Status badge dans le flow flex (plus en position:absolute, override v1227) */
.pwa-root .fb-gallery .g-topright .g-status {
  position: static;
  top: auto;
  right: auto;
}

/* Bouton favoris : style iOS native blanc translucide (comme le back) */
.pwa-root .fb-gallery .g-topright .g-fav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 0;
  color: #14161f;  /* icône foncée sur fond blanc */
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  -webkit-tap-highlight-color: transparent;
}

.pwa-root .fb-gallery .g-topright .g-fav:active {
  background: rgba(255, 255, 255, 1);
  transform: scale(0.96);
}

/* Quand le bouton favoris est "favori actif", coeur rouge plein */
.pwa-root .fb-gallery .g-topright .g-fav.is-fav {
  color: #ff3b30;
}

.pwa-root .fb-gallery .g-topright .g-fav.is-fav svg {
  fill: #ff3b30;
}


/* ══════════════════════════════════════════════════════════════════
   [v1229] PAGE AUJOURD'HUI — refonte Margot V2
   
   Structure :
   1. Topbar : avatar à gauche + cloche + roue à droite
                 dessous : "Bonjour Aldo," + "Vendredi 16 mai" (26px)
   2. Brief donna hero card (avec bordure accent)
   3. KPIs strip (3 colonnes : Tâches / RDV / Chauds)
   4. Sections existantes (RDV / Tâches / Hot) avec nouveaux titres
      td-section-title et marquage agd-event Margot V2
   ══════════════════════════════════════════════════════════════════ */

/* === Topbar === */
.pwa-root [data-view="aujourdhui"] .td-topbar {
  padding: 16px 14px 12px;
  background: var(--surface);
}

.pwa-root [data-view="aujourdhui"] .td-topbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.pwa-root [data-view="aujourdhui"] .td-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -.3px;
}

.pwa-root [data-view="aujourdhui"] .td-avatar-btn:active {
  transform: scale(0.96);
}

.pwa-root [data-view="aujourdhui"] .td-topbar-actions {
  display: flex;
  gap: 4px;
}

.pwa-root [data-view="aujourdhui"] .td-topbar-actions .hdr-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 5%, var(--surface));
  border: 0;
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html[data-theme="noir"] .pwa-root [data-view="aujourdhui"] .td-topbar-actions .hdr-btn {
  background: color-mix(in srgb, #fff 6%, transparent);
}

.pwa-root [data-view="aujourdhui"] .td-topbar-actions .hdr-btn:active {
  background: color-mix(in srgb, var(--text) 10%, var(--surface));
}

.pwa-root [data-view="aujourdhui"] .td-bell-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chaud, #ff4d6d);
  border: 1.5px solid var(--surface);
}

.pwa-root [data-view="aujourdhui"] .td-greeting {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  margin-top: 2px;
}

.pwa-root [data-view="aujourdhui"] .td-date-big {
  font-family: var(--font);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.6px;
  color: var(--text);
  margin: 2px 0 0;
}

/* === Brief donna hero card === */
.pwa-root [data-view="aujourdhui"] .td-brief {
  margin: 12px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.pwa-root [data-view="aujourdhui"] .td-brief::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

.pwa-root [data-view="aujourdhui"] .td-brief-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  position: relative;
}

.pwa-root [data-view="aujourdhui"] .td-brief-logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #14161f;
  border: 1px solid var(--accent);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pwa-root [data-view="aujourdhui"] .td-brief-eyebrow {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--accent);
  text-transform: uppercase;
}

.pwa-root [data-view="aujourdhui"] .td-brief-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.pwa-root [data-view="aujourdhui"] .td-brief-play {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root [data-view="aujourdhui"] .td-brief-play:active {
  transform: scale(0.94);
}

.pwa-root [data-view="aujourdhui"] .td-brief-body {
  padding: 12px 14px 14px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  position: relative;
  letter-spacing: -.05px;
}

.pwa-root [data-view="aujourdhui"] .td-brief-body p {
  margin: 0 0 6px;
}

.pwa-root [data-view="aujourdhui"] .td-brief-body p:last-child {
  margin-bottom: 0;
}

.pwa-root [data-view="aujourdhui"] .td-brief-body b {
  color: var(--text);
  font-weight: 700;
}

/* === KPIs strip === */
.pwa-root [data-view="aujourdhui"] .td-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 14px 16px;
}

.pwa-root [data-view="aujourdhui"] .td-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root [data-view="aujourdhui"] .td-kpi:active {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}

.pwa-root [data-view="aujourdhui"] .td-kpi-val {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}

.pwa-root [data-view="aujourdhui"] .td-kpi-lbl {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}

.pwa-root [data-view="aujourdhui"] .td-kpi-meta {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: -.05px;
  min-height: 14px;
}

/* === Section titles Margot V2 === */
.pwa-root [data-view="aujourdhui"] .td-section-title {
  padding: 4px 0 10px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pwa-root [data-view="aujourdhui"] .td-section-title svg {
  color: var(--muted);
  flex-shrink: 0;
}

.pwa-root [data-view="aujourdhui"] .td-section-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0;
}

.pwa-root [data-view="aujourdhui"] .td-section-link {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
  padding: 0;
  text-transform: none;
}

.pwa-root [data-view="aujourdhui"] .td-section-link:active {
  color: var(--text);
}

.pwa-root [data-view="aujourdhui"] .td-section-iconbtn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.pwa-root [data-view="aujourdhui"] .td-section-iconbtn + .td-section-link {
  margin-left: 6px;
}

/* === agd-event (Margot V2 layout pour RDV) === */
.pwa-root [data-view="aujourdhui"] .agd-event {
  display: grid;
  grid-template-columns: 56px 1fr;
  padding: 10px 0;
  gap: 12px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root [data-view="aujourdhui"] .agd-event:last-child {
  border-bottom: 0;
}

.pwa-root [data-view="aujourdhui"] .agd-event:active {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.pwa-root [data-view="aujourdhui"] .agd-event .time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.pwa-root [data-view="aujourdhui"] .agd-event .time .end {
  color: var(--muted);
  font-weight: 500;
}

.pwa-root [data-view="aujourdhui"] .agd-event .body {
  border-left: 3px solid var(--accent);
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pwa-root [data-view="aujourdhui"] .agd-event .body .title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="aujourdhui"] .agd-event .body .sub {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: -.05px;
}

/* Couleurs par type d'événement — aligné avec CAT_COLOR desktop */
.pwa-root [data-view="aujourdhui"] .agd-event.t-libre .body { border-left-color: var(--muted, #8a93ab); }
.pwa-root [data-view="aujourdhui"] .agd-event.t-visite .body { border-left-color: var(--tiede, #c08a2e); }
.pwa-root [data-view="aujourdhui"] .agd-event.t-r1 .body { border-left-color: var(--green, #22a06b); }
.pwa-root [data-view="aujourdhui"] .agd-event.t-r2 .body { border-left-color: var(--froid, #3d7fc2); }
.pwa-root [data-view="aujourdhui"] .agd-event.t-compromis .body { border-left-color: var(--chaud, #d64560); }
.pwa-root [data-view="aujourdhui"] .agd-event.t-acte .body { border-left-color: var(--mauve, #8257e5); }
.pwa-root [data-view="aujourdhui"] .agd-event.t-rdv .body { border-left-color: var(--accent, #6b5cf5); }
.pwa-root [data-view="aujourdhui"] .agd-event.t-signature .body { border-left-color: var(--chaud, #d64560); }
.pwa-root [data-view="aujourdhui"] .agd-event.t-autre .body { border-left-color: var(--muted, #8a93ab); }

/* === Cache l'ancien .hdr / .sec-lbl pour cette vue === */
.pwa-root [data-view="aujourdhui"] > .scroll > .hdr {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1230] PAGE AUJOURD'HUI — polish complet style natif iOS
   
   Refonte de toutes les sections (donna propose / RDV / tâches /
   À rappeler / Activité récente) pour cohérence Margot V2.
   
   Pattern : sections groupées en "cards" iOS native (fond surface,
   bordure subtile, radius 14px, ombre douce) plutôt qu'en listes nues.
   Titres de section : caps gris + count mono + lien "Tout voir →" à droite.
   ══════════════════════════════════════════════════════════════════ */

/* === Body container === */
.pwa-root [data-view="aujourdhui"] .td-body {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* === Sections === */
.pwa-root [data-view="aujourdhui"] .td-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pwa-root [data-view="aujourdhui"] .td-sec-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
}

.pwa-root [data-view="aujourdhui"] .td-sec-title svg {
  color: var(--muted);
  flex-shrink: 0;
}

.pwa-root [data-view="aujourdhui"] .td-sec-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.pwa-root [data-view="aujourdhui"] .td-sec-link {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.1px;
  cursor: pointer;
  padding: 0;
  text-transform: none;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root [data-view="aujourdhui"] .td-sec-link:active {
  color: var(--text);
}

.pwa-root [data-view="aujourdhui"] .td-sec-iconbtn {
  margin-left: auto;
  background: color-mix(in srgb, var(--text) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 7px;
  color: var(--text-dim);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

html[data-theme="noir"] .pwa-root [data-view="aujourdhui"] .td-sec-iconbtn {
  background: color-mix(in srgb, #fff 6%, transparent);
  border-color: color-mix(in srgb, #fff 8%, transparent);
}

.pwa-root [data-view="aujourdhui"] .td-sec-iconbtn + .td-sec-link {
  margin-left: 8px;
}

/* === Card iOS native (utilisé pour RDV, Tâches, Activité) === */
.pwa-root [data-view="aujourdhui"] .td-sec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

/* === Stack non-cardé (donna propose) === */
.pwa-root [data-view="aujourdhui"] .td-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* === Section "donna propose" : action cards === */
.pwa-root [data-view="aujourdhui"] .td-propose-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out;
}

.pwa-root [data-view="aujourdhui"] .td-propose-card:active {
  transform: scale(0.98);
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
}

.pwa-root [data-view="aujourdhui"] .td-propose-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pwa-root [data-view="aujourdhui"] .td-propose-icon.green {
  background: color-mix(in srgb, var(--green, #22a06b) 14%, transparent);
  color: var(--green, #22a06b);
}

.pwa-root [data-view="aujourdhui"] .td-propose-icon.tiede {
  background: color-mix(in srgb, var(--tiede, #f7c948) 14%, transparent);
  color: var(--tiede, #f7c948);
}

.pwa-root [data-view="aujourdhui"] .td-propose-icon.chaud {
  background: color-mix(in srgb, var(--chaud, #ff4d6d) 14%, transparent);
  color: var(--chaud, #ff4d6d);
}

.pwa-root [data-view="aujourdhui"] .td-propose-icon.accent {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.pwa-root [data-view="aujourdhui"] .td-propose-main {
  min-width: 0;
}

.pwa-root [data-view="aujourdhui"] .td-propose-title {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.3;
}

.pwa-root [data-view="aujourdhui"] .td-propose-sub {
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 3px;
  letter-spacing: -.05px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === RDV list dans card iOS === */
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event {
  display: grid;
  grid-template-columns: 60px 1fr;
  padding: 12px 14px;
  gap: 12px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms ease-out;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event:last-child {
  border-bottom: 0;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event:active {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  letter-spacing: -.2px;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .time .end {
  color: var(--muted);
  font-weight: 500;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .body {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .body .title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .body .sub {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: -.05px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-visite .body { border-left-color: var(--accent); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-rdv .body { border-left-color: var(--froid, #4da6ff); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-r1 .body { border-left-color: var(--tiede, #f7c948); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-signature .body { border-left-color: var(--green, #22a06b); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-autre .body { border-left-color: var(--muted); }

/* === Tasks list dans card iOS === */
/* Override le .tsk pour qu'il s'intègre proprement dans la td-sec-card */
.pwa-root [data-view="aujourdhui"] .td-sec-card .tsk {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  margin: 0;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .tsk:last-child {
  border-bottom: 0;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .tsk:active {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .tsk-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.1px;
}

/* Empty state (tasks ou autre) dans card */
.pwa-root [data-view="aujourdhui"] .td-sec-card > div[style*="text-align:center"] {
  padding: 24px 16px !important;
  text-align: center !important;
  color: var(--muted) !important;
  font-family: var(--font);
  font-size: 13px;
  border: 0 !important;
  background: transparent !important;
}

/* === À rappeler · chauds (td-hot-row) === */
.pwa-root [data-view="aujourdhui"] .td-hot-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out;
  margin-bottom: 8px;
  position: relative;
}

.pwa-root [data-view="aujourdhui"] .td-hot-row:last-child {
  margin-bottom: 0;
}

.pwa-root [data-view="aujourdhui"] .td-hot-row:active {
  transform: scale(0.98);
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
}

.pwa-root [data-view="aujourdhui"] .td-hot-row.is-priority {
  border-color: color-mix(in srgb, var(--chaud, #ff4d6d) 50%, var(--border));
}

.pwa-root [data-view="aujourdhui"] .td-hot-row.is-priority::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--chaud, #ff4d6d);
  border-radius: 0 2px 2px 0;
}

.pwa-root [data-view="aujourdhui"] .td-hot-row .m-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  background: var(--m-avatar-bg, var(--s2));
  color: var(--m-avatar-fg, var(--text));
  display: grid;
  place-items: center;
  font-family: var(--font);
  letter-spacing: -.3px;
  flex-shrink: 0;
}

.pwa-root [data-view="aujourdhui"] .td-hot-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pwa-root [data-view="aujourdhui"] .td-hot-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.pwa-root [data-view="aujourdhui"] .td-hot-name {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="aujourdhui"] .td-hot-score {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
  flex-shrink: 0;
}

.pwa-root [data-view="aujourdhui"] .td-hot-sub {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: -.05px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="aujourdhui"] .td-hot-why {
  font-family: var(--font);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: -.05px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Activité récente === */
.pwa-root [data-view="aujourdhui"] .td-act-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms ease-out;
}

.pwa-root [data-view="aujourdhui"] .td-act-row:last-child {
  border-bottom: 0;
}

.pwa-root [data-view="aujourdhui"] .td-act-row:active {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.pwa-root [data-view="aujourdhui"] .td-act-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}

.pwa-root [data-view="aujourdhui"] .td-act-main {
  min-width: 0;
}

.pwa-root [data-view="aujourdhui"] .td-act-title {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -.1px;
}

.pwa-root [data-view="aujourdhui"] .td-act-title b {
  font-weight: 600;
}

.pwa-root [data-view="aujourdhui"] .td-act-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* === Cache les anciens styles td-section-* (remplacés par td-sec-*) === */
.pwa-root [data-view="aujourdhui"] .td-section-title,
.pwa-root [data-view="aujourdhui"] .td-section-count,
.pwa-root [data-view="aujourdhui"] .td-section-link,
.pwa-root [data-view="aujourdhui"] .td-section-iconbtn {
  /* Pas appliqué — les anciens styles n'apparaîtront plus mais on garde les
     CSS au cas où des anciens HTML les utiliseraient encore */
}

/* === Cache hot-card legacy === */
.pwa-root [data-view="aujourdhui"] .hot-card {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════
   [v1231] SIDE DRAWER style Twitter/X
   
   Architecture :
   - drawer = panel fixe à gauche, 85vw max, slide in depuis -100%
   - backdrop = overlay sombre semi-transparent + blur
   - z-index très haut pour passer au-dessus de tout (BottomNav, sheets, etc)
   - Hoist dans body direct (échappement stacking context)
   
   Ouverture :
   - Tap avatar header Aujourd'hui
   - Swipe-right depuis edge gauche (≤24px) avec seuil 80px ou velocity 0.4
   - navigate('plus') redirige aussi vers le drawer (rétrocompat)
   ══════════════════════════════════════════════════════════════════ */

.td-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 99996;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(.32, .72, 0, 1);
}

.td-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.td-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 85vw;
  max-width: 320px;
  background: var(--surface, #fff);
  z-index: 99997;
  transform: translateX(-100%);
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 24px rgba(0, 0, 0, 0.12);
  /* Affichage uniquement en mode PWA */
}

.td-drawer.open {
  transform: translateX(0);
}

/* Safety : ne pas afficher sur desktop si jamais le drawer se retrouve injecté */
body:not(.pwa-active) > .td-drawer,
body:not(.pwa-active) > .td-drawer-backdrop,
body:not(.is-mobile) > .td-drawer,
body:not(.is-mobile) > .td-drawer-backdrop {
  display: none !important;
}

.td-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* === Header profil === */
.td-drawer-profile {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.td-drawer-profile:active {
  background: color-mix(in srgb, var(--text, #14161f) 3%, transparent);
}

.td-drawer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font, -apple-system, sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.4px;
  background: var(--m-avatar-bg);
  color: var(--m-avatar-fg);
  margin-bottom: 12px;
}

.td-drawer-prof-name {
  font-family: var(--font, -apple-system, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #14161f);
  letter-spacing: -.3px;
  line-height: 1.2;
}

.td-drawer-prof-sub {
  font-family: var(--font, -apple-system, sans-serif);
  font-size: 13px;
  color: var(--text-dim, #5c6480);
  margin-top: 2px;
  letter-spacing: -.1px;
}

.td-drawer-prof-stats {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}

.td-drawer-stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.td-drawer-stat .num {
  font-family: var(--font, -apple-system, sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #14161f);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
}

.td-drawer-stat .lbl {
  font-family: var(--font, -apple-system, sans-serif);
  font-size: 12.5px;
  color: var(--text-dim, #5c6480);
  letter-spacing: -.05px;
}

/* === Liste de navigation === */
.td-drawer-nav {
  flex: 1;
  padding: 8px 0;
  min-height: 0;
}

.td-drawer-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  background: transparent;
  border: 0;
  color: var(--text, #14161f);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  font-family: var(--font, -apple-system, sans-serif);
}

.td-drawer-item:active {
  background: color-mix(in srgb, var(--text, #14161f) 4%, transparent);
}

.td-drawer-item svg {
  flex-shrink: 0;
  color: var(--text, #14161f);
}

.td-drawer-item .lbl {
  flex: 1;
  font-family: var(--font, -apple-system, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #14161f);
  letter-spacing: -.3px;
}

.td-drawer-item .count {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #888);
  background: color-mix(in srgb, var(--text, #14161f) 5%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

.td-drawer-item .count:empty {
  display: none;
}

/* Variante small (footer) */
.td-drawer-item.small {
  padding: 12px 20px;
  gap: 16px;
}

.td-drawer-item.small .lbl {
  font-size: 15px;
  font-weight: 500;
}

.td-drawer-item.small svg {
  color: var(--text-dim, #5c6480);
}

/* === Footer === */
.td-drawer-footer {
  padding: 8px 0 12px;
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
}

.td-drawer-logout {
  color: var(--chaud, #ff3b30) !important;
}

.td-drawer-logout svg {
  color: var(--chaud, #ff3b30) !important;
}

.td-drawer-logout .lbl {
  color: var(--chaud, #ff3b30) !important;
}

/* Dark mode */
html[data-theme="noir"] .td-drawer {
  background: var(--bg);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="noir"] .td-drawer-profile {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="noir"] .td-drawer-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="noir"] .td-drawer-item .count {
  background: rgba(255, 255, 255, 0.08);
}

/* === Hide la page Plus puisqu'on ne navigue plus dessus === */
.pwa-root [data-view="plus"] {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1232] PAGE AUJOURD'HUI — polish final
   
   (1) Status bar fond blanc (apple-mobile-web-app-status-bar-style: default)
       + body background blanc pour cohérence
   (2) RDV polish exact comme le screenshot Anthony
   (3) Tasks rendu identique aux RDV (.agd-task-row)
   (4) Couleurs border-left par priorité (haute=rouge, normale=violet, basse=gris)
   ══════════════════════════════════════════════════════════════════ */

/* (1) Body et safe-area en blanc sur mobile PWA */
body.is-mobile.pwa-active {
  background: var(--surface, #fff) !important;
}

html[data-theme="noir"] body.is-mobile.pwa-active {
  background: var(--bg) !important;
}

/* Force le ::before de la zone safe-area-top à être blanc aussi */
.pwa-root [data-view="aujourdhui"]::before,
.pwa-root [data-view="clients"]::before,
.pwa-root [data-view="biens"]::before,
.pwa-root [data-view="agenda"]::before,
.pwa-root [data-view="dossiers"]::before,
.pwa-root [data-view="dossier-detail"]::before,
.pwa-root [data-view="client"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] .pwa-root [data-view="aujourdhui"]::before,
html[data-theme="noir"] .pwa-root [data-view="clients"]::before,
html[data-theme="noir"] .pwa-root [data-view="biens"]::before,
html[data-theme="noir"] .pwa-root [data-view="agenda"]::before,
html[data-theme="noir"] .pwa-root [data-view="dossiers"]::before,
html[data-theme="noir"] .pwa-root [data-view="dossier-detail"]::before,
html[data-theme="noir"] .pwa-root [data-view="client"]::before {
  background: var(--bg);
}

/* (2) RDV polish exact comme screenshot Anthony
   Time mono noir gras à gauche (heure début) + heure fin sous en gris
   Body : border-left 3px coloré par type (RDV=violet, visite=violet, etc.)
         title 14.5px bold + sub 12.5px text-dim
   Items séparés par 1px hairline */
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event {
  display: grid;
  grid-template-columns: 56px 1fr;
  padding: 14px 14px;
  gap: 12px;
  background: transparent;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms ease-out;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event:last-child {
  border-bottom: 0;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event:active {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .time {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--text, #14161f);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  letter-spacing: -.2px;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .time .end {
  color: var(--muted, #888);
  font-weight: 500;
  font-size: 12.5px;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .body {
  border-left: 3px solid var(--accent);
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  align-self: stretch;
  justify-content: center;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .body .title {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text, #14161f);
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event .body .sub {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-dim, #5c6480);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Couleurs border-left par type d'événement (cohérent screenshot) */
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-libre .body { border-left-color: var(--muted, #8a93ab); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-visite .body { border-left-color: var(--tiede, #c08a2e); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-r1 .body { border-left-color: var(--green, #22a06b); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-r2 .body { border-left-color: var(--froid, #3d7fc2); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-compromis .body { border-left-color: var(--chaud, #d64560); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-acte .body { border-left-color: var(--mauve, #8257e5); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-rdv .body { border-left-color: var(--accent, #6b5cf5); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-signature .body { border-left-color: var(--chaud, #d64560); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-event.t-autre .body { border-left-color: var(--muted, #8a93ab); }

/* (3) Tasks rendu identique aux RDV — .agd-task-row */
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row {
  display: grid;
  grid-template-columns: 32px 38px 1fr;
  padding: 14px 14px;
  gap: 8px;
  background: transparent;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms ease-out;
  align-items: center;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row:last-child {
  border-bottom: 0;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row:active {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* Check button — taille tap target large */
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-check {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted, #888);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  flex-shrink: 0;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row.is-done .agd-task-check {
  color: var(--accent);
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row.is-overdue .agd-task-check {
  color: var(--chaud, #ff3b30);
}

/* Time mono à gauche, comme les RDV */
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row .time {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text, #14161f);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
  line-height: 1.3;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row.is-overdue .time {
  color: var(--chaud, #ff3b30);
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row .body {
  border-left: 3px solid var(--muted);
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  align-self: stretch;
  justify-content: center;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row .body .title {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text, #14161f);
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row.is-done .body .title {
  text-decoration: line-through;
  color: var(--text-dim, #5c6480);
}

.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row .body .sub {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-dim, #5c6480);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Couleurs border-left par priorité — exactement comme RDV par type */
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row.t-haute .body { border-left-color: var(--chaud, #ff3b30); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row.t-normale .body { border-left-color: var(--accent, #7c6af7); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row.t-basse .body { border-left-color: var(--muted, #888); }
.pwa-root [data-view="aujourdhui"] .td-sec-card .agd-task-row.is-overdue .body { border-left-color: var(--chaud, #ff3b30); }

/* Empty state Margot V2 propre (remplace l'ancien dashed border) */
.pwa-root [data-view="aujourdhui"] .td-sec-card .td-empty,
.pwa-root [data-view="aujourdhui"] .td-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted, #888);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -.1px;
}

/* Override : si on a un .tsk legacy, on le cache (remplacé par .agd-task-row) */
.pwa-root [data-view="aujourdhui"] .td-sec-card .tsk {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1237] SIDE DRAWER style Twitter/X — effet "écran qui glisse"
   
   Anthony : "j'aimerais qu'il soit comme sur l'app X, comme si il 
   venait de derriere, avec les coins arrondis style ecran de la page 
   sur laquelle le menu est activé au slide"
   
   Architecture :
   - Drawer en background fixed plein-écran (z-index BAS)
   - pwa-root reste au-dessus normalement
   - Quand drawer ouvert : pwa-root reçoit transform translateX + scale 
     + border-radius + box-shadow → glisse à droite et révèle le drawer 
     derrière (effet "carte qu'on enlève")
   - Pas de backdrop sombre : la portion visible de pwa-root sert pour 
     le tap-to-close
   ══════════════════════════════════════════════════════════════════ */

/* Drawer = panneau fixé À GAUCHE, prend toute la hauteur, derrière pwa-root */
/* [v1286] Scoped à body.is-mobile EXCLUSIVEMENT. Les anciens selectors `body > #pwa-drawer`
   et `html body #pwa-drawer` matchaient sur desktop ET mobile, avec spécificité ID (0,1,0,2)
   qui battait toutes les rules safety class-based des v1262-v1285. Le drawer = PWA mobile only,
   donc 100% des selectors qui le stylent doivent passer par .is-mobile. Aucun ! important
   class-based ne bat un ID-based !important, c'était mathématiquement perdu. */
body.is-mobile > #pwa-drawer,
body.is-mobile.pwa-active > #pwa-drawer,
html body.is-mobile #pwa-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 75vw !important;
  max-width: 300px !important;
  height: 100vh !important;
  background: #f7f8fa !important;  /* fond plus clair pour distinguer du pwa-root */
  color: #14161f !important;
  z-index: 1 !important;  /* DERRIÈRE pwa-root (qui est z-index auto/0 mais sera positionné au-dessus via transform) */
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: auto !important;
  /* Petit fade-in du drawer lui-même au tout début pour smooth */
  transition: opacity 200ms ease-out !important;
}

/* Dark mode */
html[data-theme="noir"] body #pwa-drawer,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-drawer {
  background: var(--bg) !important;
  color: #f2f3f7 !important;
}

/* pwa-root au-dessus du drawer, avec transition pour l'animation slide */
body.is-mobile.pwa-active > #pwa-root,
html body #pwa-root {
  position: relative;
  z-index: 2;
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1),
              border-radius 320ms cubic-bezier(.32, .72, 0, 1),
              box-shadow 320ms cubic-bezier(.32, .72, 0, 1);
  transform-origin: center center;
  background: var(--bg, #f7f8fa);
  min-height: 100vh;
  will-change: transform;
}

html[data-theme="noir"] body.is-mobile.pwa-active > #pwa-root {
  background: var(--bg);
}

/* État OUVERT : pwa-root glisse à droite + scale + border-radius + shadow */
body.is-mobile.pwa-active.drawer-open > #pwa-root,
body.drawer-open > #pwa-root,
html body #pwa-root.drawer-open {
  transform: translateX(75vw) scale(0.88) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25),
              -2px 0 8px rgba(0, 0, 0, 0.08) !important;
  pointer-events: auto;
}

/* Sur écran plus large, max le translate */
@media (min-width: 360px) {
  html body #pwa-root.drawer-open {
    transform: translateX(min(75vw, 300px)) scale(0.88) !important;
  }
}

/* La portion visible de pwa-root devient cliquable pour fermer le drawer */
body.drawer-open > #pwa-root::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 100000;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
}

/* Backdrop : on le cache (pas nécessaire dans le pattern Twitter) */
body > #pwa-drawer-backdrop,
html body #pwa-drawer-backdrop {
  display: none !important;
}

/* Force le drawer inner à fonctionner correctement */
html body #pwa-drawer .td-drawer-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  visibility: visible !important;
}

/* Cache anciennes règles qui pourraient interférer */
body:not(.pwa-active) > .td-drawer,
body:not(.is-mobile) > .td-drawer {
  display: none !important;
}

/* [v1258] CSS FAB donna supprimé — le FAB n'existe plus dans le HTML, donc plus besoin de le masquer */


/* ══════════════════════════════════════════════════════════════════
   [v1236] PAGE AGENDA — refonte Margot V2 iOS native
   
   Structure :
   1. Header pattern Clients/Biens : 3 boutons action (search/filter/+)
      + eyebrow + h1 + sub avec compteur événements
   2. Sub-header navigation : prev/next + titre central + bouton "Auj."
      + segmented control (Liste/Jour/Semaine/Mois)
   3. Body adapté à la vue (liste = agd-event Margot V2, autres = legacy)
   4. Sheets search (fullscreen) + filter (bottom)
   ══════════════════════════════════════════════════════════════════ */

/* Status bar fond blanc safe-area pour cette vue (déjà inclus en v1232 via ::before) */

/* === Sub-header navigation === */
.pwa-root [data-view="agenda"] .agd-subhdr {
  padding: 0 14px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-root [data-view="agenda"] .agd-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.pwa-root [data-view="agenda"] .agd-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 5%, var(--surface));
  border: 0;
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  flex-shrink: 0;
}

html[data-theme="noir"] .pwa-root [data-view="agenda"] .agd-nav-btn {
  background: color-mix(in srgb, #fff 6%, transparent);
}

.pwa-root [data-view="agenda"] .agd-nav-btn:active {
  background: color-mix(in srgb, var(--text) 10%, var(--surface));
}

.pwa-root [data-view="agenda"] .agd-title-mid {
  flex: 1;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  letter-spacing: -.2px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="agenda"] .agd-title-mid .year {
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}

.pwa-root [data-view="agenda"] .agd-today-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: 0;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.pwa-root [data-view="agenda"] .agd-today-btn:active {
  transform: scale(0.96);
  background: var(--accent-hi, var(--accent));
}

/* === Segmented control iOS === */
.pwa-root [data-view="agenda"] .agd-seg {
  display: flex;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}

html[data-theme="noir"] .pwa-root [data-view="agenda"] .agd-seg {
  background: color-mix(in srgb, #fff 8%, transparent);
}

.pwa-root [data-view="agenda"] .agd-seg button {
  flex: 1;
  height: 30px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 7px;
  padding: 0;
  transition: all 200ms ease-out;
}

.pwa-root [data-view="agenda"] .agd-seg button[data-active="true"],
.pwa-root [data-view="agenda"] .agd-seg button.on {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

html[data-theme="noir"] .pwa-root [data-view="agenda"] .agd-seg button[data-active="true"],
html[data-theme="noir"] .pwa-root [data-view="agenda"] .agd-seg button.on {
  background: color-mix(in srgb, #fff 14%, transparent);
}

/* === Header sub avec dot coloré === */
.pwa-root [data-view="agenda"] .agd-sub-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.pwa-root [data-view="agenda"] .agd-sub-dot.accent { background: var(--accent); }
.pwa-root [data-view="agenda"] .agd-sub-dot.green { background: var(--green); }
.pwa-root [data-view="agenda"] .agd-sub-dot.tiede { background: var(--tiede); }

/* === Liste body : agd-event Margot V2 === */
.pwa-root [data-view="agenda"] #agenda-liste {
  background: var(--bg, #f7f8fa);
  padding: 14px;
}

html[data-theme="noir"] .pwa-root [data-view="agenda"] #agenda-liste {
  background: var(--surface);
}

.pwa-root [data-view="agenda"] #pwa-agenda-liste-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Divider style Margot V2 pour la vue liste */
.pwa-root [data-view="agenda"] .agd-divider {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 4px 8px;
}

/* agd-event style cohérent avec page Aujourd'hui */
.pwa-root [data-view="agenda"] .agd-event {
  display: grid;
  grid-template-columns: 56px 1fr;
  padding: 12px 14px;
  gap: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms ease-out;
}

.pwa-root [data-view="agenda"] .agd-event:first-of-type {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.pwa-root [data-view="agenda"] .agd-event:last-of-type {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  border-bottom: 1px solid var(--border);
}

.pwa-root [data-view="agenda"] .agd-event + .agd-event {
  border-top: 0;
}

.pwa-root [data-view="agenda"] .agd-event:active {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}

.pwa-root [data-view="agenda"] .agd-event .time {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  letter-spacing: -.2px;
}

.pwa-root [data-view="agenda"] .agd-event .time .end {
  color: var(--muted);
  font-weight: 500;
  font-size: 12.5px;
}

.pwa-root [data-view="agenda"] .agd-event .body {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  align-self: stretch;
  justify-content: center;
}

.pwa-root [data-view="agenda"] .agd-event .body .title {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="agenda"] .agd-event .body .sub {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: -.1px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Couleurs border-left par type (CAT_COLOR desktop) */
.pwa-root [data-view="agenda"] .agd-event.t-libre .body { border-left-color: var(--muted, #8a93ab); }
.pwa-root [data-view="agenda"] .agd-event.t-visite .body { border-left-color: var(--tiede, #c08a2e); }
.pwa-root [data-view="agenda"] .agd-event.t-r1 .body { border-left-color: var(--green, #22a06b); }
.pwa-root [data-view="agenda"] .agd-event.t-r2 .body { border-left-color: var(--froid, #3d7fc2); }
.pwa-root [data-view="agenda"] .agd-event.t-compromis .body { border-left-color: var(--chaud, #d64560); }
.pwa-root [data-view="agenda"] .agd-event.t-acte .body { border-left-color: var(--mauve, #8257e5); }
.pwa-root [data-view="agenda"] .agd-event.t-rdv .body { border-left-color: var(--accent, #6b5cf5); }
.pwa-root [data-view="agenda"] .agd-event.t-signature .body { border-left-color: var(--chaud, #d64560); }
.pwa-root [data-view="agenda"] .agd-event.t-autre .body { border-left-color: var(--muted, #8a93ab); }

/* Group dans la liste : sépare les jours par un container card iOS */
.pwa-root [data-view="agenda"] .agd-list-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.pwa-root [data-view="agenda"] .agd-list-group .agd-event {
  border-radius: 0;
  background: transparent;
}

.pwa-root [data-view="agenda"] .agd-list-group .agd-event:last-of-type {
  border-bottom: 0;
}

.pwa-root [data-view="agenda"] .agd-list-day {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 4px 8px;
}

/* === Search sheet rows === */
.cl-search-sheet-results .agd-search-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cl-search-sheet-results .agd-search-row:active {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.cl-search-sheet-results .agd-search-row .bar {
  width: 3px;
  align-self: stretch;
  background: var(--accent);
  border-radius: 2px;
}

.cl-search-sheet-results .agd-search-row.t-libre .bar { background: var(--muted, #8a93ab); }
.cl-search-sheet-results .agd-search-row.t-visite .bar { background: var(--tiede, #c08a2e); }
.cl-search-sheet-results .agd-search-row.t-r1 .bar { background: var(--green, #22a06b); }
.cl-search-sheet-results .agd-search-row.t-r2 .bar { background: var(--froid, #3d7fc2); }
.cl-search-sheet-results .agd-search-row.t-compromis .bar { background: var(--chaud, #d64560); }
.cl-search-sheet-results .agd-search-row.t-acte .bar { background: var(--mauve, #8257e5); }
.cl-search-sheet-results .agd-search-row.t-rdv .bar { background: var(--accent); }

.cl-search-sheet-results .agd-search-row .main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cl-search-sheet-results .agd-search-row .title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-search-sheet-results .agd-search-row .meta {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: -.05px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-search-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13.5px;
}

/* === Filter sheet : dot coloré dans les options === */
.cl-filter-opt .ag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* Cache l'ancien layout de l'agenda */
.pwa-root [data-view="agenda"] .back-hdr,
.pwa-root [data-view="agenda"] .cal-top,
.pwa-root [data-view="agenda"] .mv-bar {
  display: none !important;
}


/* [v1236] Liste agenda — group day wrap */
.pwa-root [data-view="agenda"] .agd-list-day-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pwa-root [data-view="agenda"] .agd-list-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13.5px;
  letter-spacing: -.1px;
}


/* ══════════════════════════════════════════════════════════════════
   [v1238] FIXES Anthony 17 mai
   
   1. h1 Agenda fixe (déjà fait en JS)
   2. Police iOS native partout dans l'agenda (pas de police display)
   3. Bouton "Aujourd'hui" noir/blanc carré arrondi
   4. Vue semaine : lignes plus fines, heures plus compactes
   5. Filter sheet polish
   6. Headers Aujourd'hui/Clients/Biens fond blanc (pas gris)
   ══════════════════════════════════════════════════════════════════ */

/* ── (2) Police iOS native PARTOUT dans la page agenda ── */
.pwa-root [data-view="agenda"],
.pwa-root [data-view="agenda"] * {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif) !important;
}

/* Exception : la police mono reste mono (heures, scores, etc.) */
.pwa-root [data-view="agenda"] .time,
.pwa-root [data-view="agenda"] .time *,
.pwa-root [data-view="agenda"] [class*="mono"],
.pwa-root [data-view="agenda"] .agd-event .time,
.pwa-root [data-view="agenda"] .agd-task-row .time {
  font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace) !important;
}

/* Le h1 et l'eyebrow utilisent la police par défaut (donc iOS native) */
.pwa-root [data-view="agenda"] .hdr h1,
.pwa-root [data-view="agenda"] .hdr .eyebrow,
.pwa-root [data-view="agenda"] .hdr .hdr-sub {
  font-family: var(--font, -apple-system, sans-serif) !important;
}

/* ── (3) Bouton "Aujourd'hui" : noir / blanc, carré arrondi ── */
.pwa-root [data-view="agenda"] .agd-today-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;        /* carré arrondi, pas capsule */
  background: var(--text, #14161f);
  color: var(--surface, #fff);
  border: 0;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

html[data-theme="noir"] .pwa-root [data-view="agenda"] .agd-today-btn {
  background: var(--surface, #fff);
  color: var(--text, #14161f);
}

.pwa-root [data-view="agenda"] .agd-today-btn:active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* ── (4) Vue semaine : lignes plus fines + cells plus compactes ── */

/* Header semaine (jours) : plus subtle */
.pwa-root [data-view="agenda"] .wk-head,
.pwa-root [data-view="agenda"] .agd-week-head {
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent) !important;
}

.pwa-root [data-view="agenda"] .wk-head .d,
.pwa-root [data-view="agenda"] .agd-week-head .d {
  border-right: 1px solid color-mix(in srgb, var(--text) 4%, transparent) !important;
  font-family: var(--font) !important;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Grid semaine : cells beaucoup plus fines */
.pwa-root [data-view="agenda"] .wk-grid {
  /* Réduire la hauteur des slots horaires */
}

.pwa-root [data-view="agenda"] .wk-grid > * {
  border-color: color-mix(in srgb, var(--text) 4%, transparent) !important;
}

/* Hauteur des slots horaires : 40px → 28px */
.pwa-root [data-view="agenda"] .wk-grid .h,
.pwa-root [data-view="agenda"] .wk-grid .cell,
.pwa-root [data-view="agenda"] .agd-week-grid .h,
.pwa-root [data-view="agenda"] .agd-week-grid .cell {
  min-height: 28px !important;
  height: 28px !important;
  border-top: 1px solid color-mix(in srgb, var(--text) 4%, transparent) !important;
  border-right: 1px solid color-mix(in srgb, var(--text) 4%, transparent) !important;
}

/* Label heure (gauche) : plus discret */
.pwa-root [data-view="agenda"] .wk-grid .h,
.pwa-root [data-view="agenda"] .agd-week-grid .h {
  font-family: var(--mono) !important;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding-right: 6px;
  text-align: right;
}

/* Numéros de jour dans le header semaine */
.pwa-root [data-view="agenda"] .wk-head .d .num,
.pwa-root [data-view="agenda"] .agd-week-head .d .num,
.pwa-root [data-view="agenda"] .wk-head .d > span,
.pwa-root [data-view="agenda"] .agd-week-head .d > span {
  font-family: var(--font) !important;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
}

/* Today badge : plus discret */
.pwa-root [data-view="agenda"] .wk-head .d.today,
.pwa-root [data-view="agenda"] .agd-week-head .d.today {
  color: var(--accent);
}

.pwa-root [data-view="agenda"] .wk-head .d.today .num,
.pwa-root [data-view="agenda"] .agd-week-head .d.today .num,
.pwa-root [data-view="agenda"] .wk-head .d.today > span,
.pwa-root [data-view="agenda"] .agd-week-head .d.today > span {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 2px 8px;
  display: inline-block;
}

/* Events dans la grille semaine */
.pwa-root [data-view="agenda"] .wk-grid .ev,
.pwa-root [data-view="agenda"] .agd-week-grid .ev {
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 4px;
  font-family: var(--font) !important;
}

/* ── (5) Filter sheet polish ── */
.cl-filter-sheet-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.cl-filter-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  letter-spacing: -.1px;
  flex-shrink: 0;
}

.cl-filter-opt:active {
  transform: scale(0.96);
}

.cl-filter-opt.on {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
  font-weight: 600;
}

html[data-theme="noir"] .cl-filter-opt.on {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--text);
}

.cl-filter-opt.on .ag-dot {
  /* Le dot reste de sa couleur même quand sélectionné */
}

.cl-filter-opt .ag-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Section labels du filter sheet */
.cl-filter-sheet-section {
  margin-bottom: 16px;
}

.cl-filter-sheet-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 2px;
}

/* Foot du filter sheet (Reset + Apply) — éviter overlap */
.cl-filter-sheet-foot {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.cl-filter-sheet-reset {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 0 12px;
  cursor: pointer;
}

.cl-filter-sheet-apply {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  background: var(--text);
  color: var(--surface);
  border: 0;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -.1px;
}

html[data-theme="noir"] .cl-filter-sheet-apply {
  background: var(--surface);
  color: var(--text);
}

.cl-filter-sheet-count {
  background: color-mix(in srgb, var(--surface) 25%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}

/* ── (6) Headers blanc explicite sur les 4 vues principales ── */
.pwa-root [data-view="aujourdhui"] .td-topbar,
.pwa-root [data-view="clients"] .sticky-top,
.pwa-root [data-view="clients"] .hdr,
.pwa-root [data-view="biens"] .sticky-top,
.pwa-root [data-view="biens"] .hdr,
.pwa-root [data-view="agenda"] .hdr,
.pwa-root [data-view="agenda"] .agd-subhdr {
  background: var(--surface, #ffffff) !important;
}

html[data-theme="noir"] .pwa-root [data-view="aujourdhui"] .td-topbar,
html[data-theme="noir"] .pwa-root [data-view="clients"] .sticky-top,
html[data-theme="noir"] .pwa-root [data-view="clients"] .hdr,
html[data-theme="noir"] .pwa-root [data-view="biens"] .sticky-top,
html[data-theme="noir"] .pwa-root [data-view="biens"] .hdr,
html[data-theme="noir"] .pwa-root [data-view="agenda"] .hdr,
html[data-theme="noir"] .pwa-root [data-view="agenda"] .agd-subhdr {
  background: var(--surface, #0a0a0c) !important;
}

/* Le body global aussi en blanc explicite (override avant que pwa-mobile.css ne mette gris) */
body.is-mobile.pwa-active,
html body.is-mobile.pwa-active {
  background: var(--surface, #ffffff) !important;
}

html[data-theme="noir"] body.is-mobile.pwa-active {
  background: var(--bg) !important;
}

/* pwa-root background blanc aussi (le body est gris derrière sinon) */
body.is-mobile.pwa-active > #pwa-root,
html body #pwa-root {
  background: var(--surface, #ffffff);
}

html[data-theme="noir"] body.is-mobile.pwa-active > #pwa-root {
  background: var(--bg);
}


/* ══════════════════════════════════════════════════════════════════
   [v1239] FIXES drawer Twitter X :
   1. Force visibilité des enfants du drawer (étaient invisibles)
   2. Navbar (#__pwa_tabbar_host) suit le transform de pwa-root
   3. FAB donna suit aussi (au cas où il réapparaît malgré display:none)
   ══════════════════════════════════════════════════════════════════ */

/* ── (1) Force visibilité TOUS les enfants du drawer ── */
html body #pwa-drawer .td-drawer-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-profile,
html body #pwa-drawer .td-drawer-nav,
html body #pwa-drawer .td-drawer-footer {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-prof-stats {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-item {
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-avatar,
html body #pwa-drawer .td-drawer-prof-name,
html body #pwa-drawer .td-drawer-prof-sub,
html body #pwa-drawer .td-drawer-stat,
html body #pwa-drawer .td-drawer-item .lbl,
html body #pwa-drawer .td-drawer-item .count,
html body #pwa-drawer .td-drawer-item svg {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── (2) Navbar suit le transform de pwa-root quand drawer ouvert ── */
#__pwa_tabbar_host,
body > #__pwa_tabbar_host {
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1) !important;
  transform-origin: center center !important;
  will-change: transform;
}

body.drawer-open > #__pwa_tabbar_host,
html body.drawer-open #__pwa_tabbar_host {
  transform: translateX(75vw) scale(0.88) !important;
  pointer-events: none !important;  /* pas cliquable quand caché */
}

@media (min-width: 360px) {
  body.drawer-open > #__pwa_tabbar_host {
    transform: translateX(min(75vw, 300px)) scale(0.88) !important;
  }
}

/* [v1258] FAB donna supprimé — règles de transition retirées */

/* ── Bonus : sheet-host PWA suit aussi ── */
#__pwa_sheet_host {
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
}

body.drawer-open > #__pwa_sheet_host {
  transform: translateX(75vw) scale(0.88);
}

/* ── [v1239] FORCE FINALE : drawer enfants TOUS visibles ── */

/* Sélecteur encore plus large pour capturer TOUT le contenu du drawer */
html body #pwa-drawer > *,
html body #pwa-drawer .td-drawer-inner > *,
html body #pwa-drawer .td-drawer-inner > * > *,
html body #pwa-drawer .td-drawer-inner > * > * > *,
html body #pwa-drawer .td-drawer-inner > * > * > * > * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Sécurité : le drawer-inner doit pouvoir scroller */
html body #pwa-drawer .td-drawer-inner {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Profil card */
html body #pwa-drawer .td-drawer-profile {
  padding: 18px 20px 16px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  display: block !important;  /* override flex pour le layout d'origine */
}

html body #pwa-drawer .td-drawer-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

html body #pwa-drawer .td-drawer-prof-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.3px !important;
}

html body #pwa-drawer .td-drawer-prof-sub {
  font-size: 13px !important;
  margin-top: 2px !important;
}

html body #pwa-drawer .td-drawer-prof-stats {
  display: flex !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

html body #pwa-drawer .td-drawer-nav {
  flex: 1 !important;
  padding: 8px 0 !important;
  min-height: 0 !important;
  display: block !important;  /* override pour le layout original */
}

html body #pwa-drawer .td-drawer-footer {
  padding: 8px 0 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  display: block !important;
}

html body #pwa-drawer .td-drawer-item {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 14px 20px !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
}

html body #pwa-drawer .td-drawer-item.small {
  padding: 12px 20px !important;
  gap: 16px !important;
}

html body #pwa-drawer .td-drawer-item .lbl {
  flex: 1 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.3px !important;
}

html body #pwa-drawer .td-drawer-item.small .lbl {
  font-size: 15px !important;
  font-weight: 500 !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1240] PAGE TÂCHES — refonte Margot V2 iOS native
   
   Anthony : "refonte de la page tache, comme le reste, ui ios native, header etc"
   
   - Header pattern Clients/Biens/Agenda (eyebrow + h1 + sub + 3 boutons)
   - Segmented control [Aujourd'hui/Semaine/À venir/Terminées]
   - Items .tk-item (check + main + time) avec divider .tk-divider colorés
   - Filter sheet (Priorité / Source / Statut)
   ══════════════════════════════════════════════════════════════════ */

/* === Overlay structure === */
#pwa-tasks-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: var(--surface, #fff);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.32, .72, 0, 1);
  display: flex;
  flex-direction: column;
}

#pwa-tasks-overlay.open {
  transform: translateY(0);
}

#pwa-tasks-overlay > .screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#pwa-tasks-overlay .hdr {
  background: var(--surface) !important;
}

/* === Segmented control wrap === */
#pwa-tasks-overlay .tk-seg-wrap {
  padding: 8px 14px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

#pwa-tasks-overlay .tk-seg {
  display: flex;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}

html[data-theme="noir"] #pwa-tasks-overlay .tk-seg {
  background: color-mix(in srgb, #fff 8%, transparent);
}

#pwa-tasks-overlay .tk-seg button {
  flex: 1;
  height: 30px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 7px;
  padding: 0 8px;
  transition: all 180ms ease-out;
  white-space: nowrap;
}

#pwa-tasks-overlay .tk-seg button[data-active="true"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

html[data-theme="noir"] #pwa-tasks-overlay .tk-seg button[data-active="true"] {
  background: color-mix(in srgb, #fff 14%, transparent);
}

/* === Scroll body === */
#pwa-tasks-overlay #pwa-tasks-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg, #f7f8fa);
  padding: 0 0 24px !important;
}

html[data-theme="noir"] #pwa-tasks-overlay #pwa-tasks-scroll {
  background: var(--surface);
}

/* === Divider (séparateur de groupe) === */
#pwa-tasks-overlay .tk-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

#pwa-tasks-overlay .tk-divider .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

#pwa-tasks-overlay .tk-divider .cnt {
  margin-left: auto;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}

html[data-theme="noir"] #pwa-tasks-overlay .tk-divider .cnt {
  background: color-mix(in srgb, #fff 10%, transparent);
}

/* === Task item === */
#pwa-tasks-overlay .tk-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms ease-out;
}

#pwa-tasks-overlay .tk-item:active {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}

#pwa-tasks-overlay .tk-item.done {
  background: color-mix(in srgb, var(--text) 2%, var(--surface));
  opacity: 0.7;
}

#pwa-tasks-overlay .tk-item.done .tk-title-txt {
  text-decoration: line-through;
  color: var(--muted);
}

#pwa-tasks-overlay .tk-item.urgent {
  border-left: 3px solid var(--chaud, #d64560);
}

/* Checkbox */
#pwa-tasks-overlay .tk-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.8px solid color-mix(in srgb, var(--text) 25%, transparent);
  background: transparent;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 150ms ease;
}

#pwa-tasks-overlay .tk-check:active {
  transform: scale(0.92);
}

#pwa-tasks-overlay .tk-check.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

#pwa-tasks-overlay .tk-check svg {
  pointer-events: none;
}

/* Main body */
#pwa-tasks-overlay .tk-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#pwa-tasks-overlay .tk-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.3;
  min-width: 0;
}

#pwa-tasks-overlay .tk-title-txt {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pwa-tasks-overlay .tk-urgent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chaud, #d64560) 14%, transparent);
  color: var(--chaud, #d64560);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

#pwa-tasks-overlay .tk-urgent-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--chaud, #d64560);
}

#pwa-tasks-overlay .tk-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: -.1px;
  line-height: 1.3;
  min-width: 0;
}

#pwa-tasks-overlay .tk-meta > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#pwa-tasks-overlay .tk-link-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

#pwa-tasks-overlay .tk-link-ic {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Time pill à droite */
#pwa-tasks-overlay .tk-time {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

#pwa-tasks-overlay .tk-item.urgent .tk-time {
  color: var(--chaud, #d64560);
}

/* === Empty state === */
#pwa-tasks-overlay .tk-empty {
  padding: 80px 24px;
  text-align: center;
  font-family: var(--font);
  font-size: 14px;
  color: var(--muted);
  letter-spacing: -.1px;
}

/* === Hide legacy stuff === */
#pwa-tasks-overlay .sr-header {
  display: none !important;
}

/* iOS native font everywhere */
#pwa-tasks-overlay,
#pwa-tasks-overlay * {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif) !important;
}

#pwa-tasks-overlay .tk-time,
#pwa-tasks-overlay [class*="mono"] {
  font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1241] FIX FINAL drawer vide
   
   Anthony : drawer toujours vide malgré display flex.
   Force display SPECIFIC sur chaque type d'élément avec spécificité max.
   ══════════════════════════════════════════════════════════════════ */

/* Drawer-inner : column flex */
html body #pwa-drawer .td-drawer-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0 !important;
  overflow-y: auto !important;
}

/* Profile section : block layout */
html body #pwa-drawer .td-drawer-profile,
html body #pwa-drawer .td-drawer-profile.td-drawer-profile {
  display: block !important;
  padding: 18px 20px 16px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* Avatar bubble */
html body #pwa-drawer .td-drawer-avatar {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: var(--m-avatar-bg, #5b3aa0) !important;
  color: var(--m-avatar-fg, #e8e0ff) !important;
  font-family: var(--font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-prof-name {
  display: block !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text, #14161f) !important;
  letter-spacing: -.3px !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 2px !important;
}

html body #pwa-drawer .td-drawer-prof-sub {
  display: block !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--muted, #8a93ab) !important;
  margin-top: 2px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-prof-stats {
  display: flex !important;
  gap: 14px !important;
  margin-top: 14px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-stat {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-stat .num {
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-stat .lbl {
  font-family: var(--font) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 1px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Nav section : block */
html body #pwa-drawer .td-drawer-nav {
  display: block !important;
  flex: 1 !important;
  min-height: 0 !important;
  padding: 8px 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Footer section : block */
html body #pwa-drawer .td-drawer-footer {
  display: block !important;
  padding: 8px 0 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* Items : flex row */
html body #pwa-drawer .td-drawer-item {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 14px 20px !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
  color: var(--text, #14161f) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-item.small {
  padding: 12px 20px !important;
  gap: 16px !important;
}

html body #pwa-drawer .td-drawer-item:active {
  background: color-mix(in srgb, var(--text) 6%, transparent) !important;
}

html body #pwa-drawer .td-drawer-item .lbl {
  flex: 1 !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.3px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-item.small .lbl {
  font-size: 15px !important;
  font-weight: 500 !important;
}

html body #pwa-drawer .td-drawer-item svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--text) !important;
}

html body #pwa-drawer .td-drawer-item.small svg {
  width: 20px !important;
  height: 20px !important;
}

html body #pwa-drawer .td-drawer-item .count {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body #pwa-drawer .td-drawer-item .count:empty {
  display: none !important;
}

/* Logout : couleur rouge */
html body #pwa-drawer .td-drawer-logout {
  color: var(--chaud, #d64560) !important;
}

html body #pwa-drawer .td-drawer-logout svg,
html body #pwa-drawer .td-drawer-logout .lbl {
  color: var(--chaud, #d64560) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1242] Tâches Margot V2 — badges + dots manquants
   ══════════════════════════════════════════════════════════════════ */

/* Badge DONNA à droite de l'item */
#pwa-tasks-overlay .tk-donna-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  align-self: center;
}

#pwa-tasks-overlay .tk-donna-badge svg {
  fill: currentColor;
}

/* Priority dot (à gauche du titre) */
#pwa-tasks-overlay .tk-prio-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 2px;
}

/* Time pill : "Il y a 3j" en rouge si overdue */
#pwa-tasks-overlay .tk-time.overdue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--chaud, #d64560) 14%, transparent);
  color: var(--chaud, #d64560);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0;
  text-transform: none;
}

#pwa-tasks-overlay .tk-time.overdue::before {
  content: '⚠';
  font-size: 10px;
  margin-right: 2px;
}

/* Grid pour les items avec DONNA badge à droite */
#pwa-tasks-overlay .tk-item {
  grid-template-columns: auto 1fr auto auto;  /* check + main + donna-badge + time */
}

#pwa-tasks-overlay .tk-item:not(:has(.tk-donna-badge)) {
  grid-template-columns: auto 1fr auto;  /* check + main + time */
}

/* Fallback pour browsers sans :has — assure que tout reste cohérent */
#pwa-tasks-overlay .tk-item .tk-donna-badge + .tk-time {
  margin-left: 4px;
}


/* ══════════════════════════════════════════════════════════════════
   [v1244] PAGE DOSSIERS — refonte Margot V2 iOS native
   
   - Header pattern Clients/Biens/Agenda/Tâches
   - Segmented control (Par étape / Récents / Archivés)
   - Items dossiers gardent leur rendu existant (dos-sec-block / dossier)
   - Filter sheet avec sections Étape + Priorité
   - Police iOS native + headers blanc
   ══════════════════════════════════════════════════════════════════ */

/* Header style */
.pwa-root [data-view="dossiers"] .hdr {
  background: var(--surface, #fff) !important;
}

/* Segmented control wrap */
.pwa-root [data-view="dossiers"] .dos-seg-wrap {
  padding: 8px 14px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pwa-root [data-view="dossiers"] .dos-seg {
  display: flex;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}

html[data-theme="noir"] .pwa-root [data-view="dossiers"] .dos-seg {
  background: color-mix(in srgb, #fff 8%, transparent);
}

.pwa-root [data-view="dossiers"] .dos-seg button {
  flex: 1;
  height: 30px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 7px;
  padding: 0 8px;
  transition: all 180ms ease-out;
  white-space: nowrap;
}

.pwa-root [data-view="dossiers"] .dos-seg button[data-active="true"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

html[data-theme="noir"] .pwa-root [data-view="dossiers"] .dos-seg button[data-active="true"] {
  background: color-mix(in srgb, #fff 14%, transparent);
}

/* Police iOS native partout dans la vue dossiers */
.pwa-root [data-view="dossiers"],
.pwa-root [data-view="dossiers"] * {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif) !important;
}

.pwa-root [data-view="dossiers"] .time,
.pwa-root [data-view="dossiers"] [class*="mono"],
.pwa-root [data-view="dossiers"] .dossier-price,
.pwa-root [data-view="dossiers"] .dos-price {
  font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace) !important;
}

.pwa-root [data-view="dossiers"] .hdr h1,
.pwa-root [data-view="dossiers"] .hdr .eyebrow,
.pwa-root [data-view="dossiers"] .hdr .hdr-sub {
  font-family: var(--font, -apple-system, sans-serif) !important;
}

/* Section block (groupe d'étape) */
.pwa-root [data-view="dossiers"] .dos-sec-block {
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid var(--border);
}

.pwa-root [data-view="dossiers"] .dos-sec-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 2%, transparent);
}

.pwa-root [data-view="dossiers"] .dos-sec-lbl .count {
  margin-left: auto;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}


/* ══════════════════════════════════════════════════════════════════
   [v1245] Dossiers items Margot V2 + status bar blanc
   
   Anthony : items doivent être comme le mockup :
   - Pipeline 5 nodes à gauche (done/current/empty)
   - Nom + sub adresse + meta étape
   - Prix mono bold à droite
   - Section dos-stage-block avec head coloré
   ══════════════════════════════════════════════════════════════════ */

/* === STATUS BAR safe-area blanc partout === */
.pwa-root [data-view="aujourdhui"]::before,
.pwa-root [data-view="clients"]::before,
.pwa-root [data-view="biens"]::before,
.pwa-root [data-view="agenda"]::before,
.pwa-root [data-view="dossiers"]::before,
.pwa-root [data-view="dossier-detail"]::before {
  background: var(--surface, #ffffff) !important;
}

html[data-theme="noir"] .pwa-root [data-view="aujourdhui"]::before,
html[data-theme="noir"] .pwa-root [data-view="clients"]::before,
html[data-theme="noir"] .pwa-root [data-view="biens"]::before,
html[data-theme="noir"] .pwa-root [data-view="agenda"]::before,
html[data-theme="noir"] .pwa-root [data-view="dossiers"]::before,
html[data-theme="noir"] .pwa-root [data-view="dossier-detail"]::before {
  background: var(--bg) !important;
}

/* Body PWA = surface blanc */
body.is-mobile.pwa-active,
html body.is-mobile.pwa-active {
  background: var(--surface, #ffffff) !important;
}

/* === Pinned banner (3 actions urgentes) === */
.pwa-root [data-view="dossiers"] .lst-pinned-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 12px;
  margin-bottom: 16px;
  color: var(--accent);
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: -.1px;
}

.pwa-root [data-view="dossiers"] .lst-pinned-banner svg {
  flex-shrink: 0;
  color: var(--accent);
}

.pwa-root [data-view="dossiers"] .lst-pinned-banner .count {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

/* === Stage block (group par étape) === */
.pwa-root [data-view="dossiers"] .dos-stage-block {
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.pwa-root [data-view="dossiers"] .dos-stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

.pwa-root [data-view="dossiers"] .dos-stage-head .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pwa-root [data-view="dossiers"] .dos-stage-head .lbl {
  flex: 1;
  color: var(--text);
  font-weight: 700;
}

.pwa-root [data-view="dossiers"] .dos-stage-head .cnt {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* === Dos item Margot V2 === */
.pwa-root [data-view="dossiers"] .dos-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms ease-out;
}

.pwa-root [data-view="dossiers"] .dos-item:active {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}

/* === Pipeline visuel 5 nodes === */
.pwa-root [data-view="dossiers"] .dos-pipe {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pwa-root [data-view="dossiers"] .dos-pipe .node {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: transparent;
  flex-shrink: 0;
}

.pwa-root [data-view="dossiers"] .dos-pipe .node.done {
  background: var(--green, #22a06b);
  border-color: var(--green, #22a06b);
}

.pwa-root [data-view="dossiers"] .dos-pipe .node.current {
  background: var(--text, #14161f);
  border-color: var(--text, #14161f);
  position: relative;
}

/* === Main content === */
.pwa-root [data-view="dossiers"] .dos-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pwa-root [data-view="dossiers"] .dos-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.3;
  min-width: 0;
}

.pwa-root [data-view="dossiers"] .dos-title > :first-child {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="dossiers"] .dos-urgent-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chaud, #d64560) 14%, transparent);
  color: var(--chaud, #d64560);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.pwa-root [data-view="dossiers"] .dos-urgent-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--chaud, #d64560);
}

.pwa-root [data-view="dossiers"] .dos-sub {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: -.1px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="dossiers"] .dos-meta {
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* === Right side (prix + chevron) === */
.pwa-root [data-view="dossiers"] .dos-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.pwa-root [data-view="dossiers"] .dos-price {
  font-family: var(--mono, ui-monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pwa-root [data-view="dossiers"] .dos-chev {
  color: var(--muted);
  flex-shrink: 0;
}

/* Premier item de chaque stage block : pas de border-top (header le couvre) */
.pwa-root [data-view="dossiers"] .dos-stage-block .dos-item:first-of-type {
  border-top: 1px solid var(--border);
}


/* ══════════════════════════════════════════════════════════════════
   [v1245] FICHE DOSSIER détaillée — polish Margot V2
   ══════════════════════════════════════════════════════════════════ */

/* Status bar blanc pour cette vue aussi */
.pwa-root [data-view="dossier-detail"] {
  background: var(--surface) !important;
}

.pwa-root [data-view="dossier-detail"] .back-hdr {
  background: var(--surface) !important;
}

/* Police iOS native */
.pwa-root [data-view="dossier-detail"],
.pwa-root [data-view="dossier-detail"] * {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, sans-serif) !important;
}

.pwa-root [data-view="dossier-detail"] .time,
.pwa-root [data-view="dossier-detail"] [class*="mono"] {
  font-family: var(--mono, ui-monospace, monospace) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1245] FICHE DOSSIER hero Margot V2 — mockup Anthony
   
   - Eyebrow violet "DOSSIER TRANSACTION" + badge URGENT top-right
   - Prix BIG 612 000 €
   - Adresse avec icône MapPin
   - Pills Acquéreur Henri B. · Vendeur Marc D. · Compromis
   - Pipeline gros 5 nodes R1/MANDAT/OFFRE/COMPROMIS/ACTE
   ══════════════════════════════════════════════════════════════════ */

.pwa-root [data-view="dossier-detail"] .dd-hero {
  background: var(--surface);
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--border);
  margin: 0 -16px 16px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Top row : eyebrow + badge URGENT */
.pwa-root [data-view="dossier-detail"] .dd-hero-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 12px;
}

.pwa-root [data-view="dossier-detail"] .dd-hero-eyebrow {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: var(--accent, #6b5cf5);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pwa-root [data-view="dossier-detail"] .dd-hero-eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent, #6b5cf5);
  display: inline-block;
}

.pwa-root [data-view="dossier-detail"] .dd-hero-urgent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chaud, #d64560) 14%, transparent);
  color: var(--chaud, #d64560);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.pwa-root [data-view="dossier-detail"] .dd-hero-urgent .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--chaud, #d64560);
}

/* Prix BIG */
.pwa-root [data-view="dossier-detail"] .dd-hero-price {
  font-family: var(--font, -apple-system, sans-serif);
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.8px;
  line-height: 1.05;
  margin: 4px 0 8px;
  font-variant-numeric: tabular-nums;
}

/* Adresse avec icône */
.pwa-root [data-view="dossier-detail"] .dd-hero-addr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: -.1px;
  margin-bottom: 14px;
}

.pwa-root [data-view="dossier-detail"] .dd-hero-addr svg {
  color: var(--muted);
  flex-shrink: 0;
}

/* Pills row */
.pwa-root [data-view="dossier-detail"] .dd-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.pwa-root [data-view="dossier-detail"] .dd-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.1px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root [data-view="dossier-detail"] .dd-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--muted);
}

.pwa-root [data-view="dossier-detail"] .dd-pill-acq {
  background: color-mix(in srgb, var(--accent, #6b5cf5) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--accent, #6b5cf5) 25%, transparent);
  color: var(--accent, #6b5cf5);
}

.pwa-root [data-view="dossier-detail"] .dd-pill-acq .dot {
  background: var(--accent, #6b5cf5);
}

.pwa-root [data-view="dossier-detail"] .dd-pill-vend {
  background: var(--surface);
  border-color: var(--border);
}

.pwa-root [data-view="dossier-detail"] .dd-pill-vend .dot {
  background: var(--text-dim);
}

.pwa-root [data-view="dossier-detail"] .dd-pill-stage {
  background: color-mix(in srgb, var(--text) 5%, var(--surface));
  cursor: default;
}

/* Pipeline gros */
.pwa-root [data-view="dossier-detail"] .dd-pipe-wrap {
  margin-top: 4px;
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-big {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 4px 0;
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-node {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: var(--surface);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 30%, transparent);
  z-index: 1;
  transition: all 200ms ease-out;
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-step.done .dd-pipe-node {
  background: var(--green, #22a06b);
  border-color: var(--green, #22a06b);
  color: #fff;
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-step.current .dd-pipe-node {
  background: var(--text, #14161f);
  border-color: var(--text, #14161f);
  color: #fff;
  transform: scale(1.05);
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-line {
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  z-index: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-step.done .dd-pipe-line {
  background: var(--green, #22a06b);
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-label {
  margin-top: 8px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-step.current .dd-pipe-label {
  color: var(--text);
  font-weight: 700;
}

.pwa-root [data-view="dossier-detail"] .dd-pipe-step.done .dd-pipe-label {
  color: var(--green, #22a06b);
}

/* Body container surface blanc */
.pwa-root [data-view="dossier-detail"] #pwa-dd-body {
  background: var(--surface) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1246] FICHE DOSSIER — refonte mockup complet
   
   - Instinct card (réutilise fc-instinct-card existant)
   - Tabs Suivi/Pipeline/Documents/Compta/Activité
   - Section Prochaines actions (tâches checkbox)
   - Section Compta Résumé (Net vendeur + Honoraires grid)
   ══════════════════════════════════════════════════════════════════ */

/* Instinct card spécifique dossier (override léger) */
.pwa-root [data-view="dossier-detail"] .dd-instinct-card {
  width: 100%;
  margin-bottom: 18px;
}

/* === TABS underline Margot V2 === */
.pwa-root [data-view="dossier-detail"] .dd-tabs {
  display: flex;
  gap: 22px;
  padding: 0 4px 0;
  margin: 4px 0 14px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pwa-root [data-view="dossier-detail"] .dd-tabs::-webkit-scrollbar {
  display: none;
}

.pwa-root [data-view="dossier-detail"] .dd-tab {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 12px 0 11px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.2px;
  color: var(--text-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pwa-root [data-view="dossier-detail"] .dd-tab .cnt {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: 3px;
}

.pwa-root [data-view="dossier-detail"] .dd-tab.on {
  color: var(--text);
  font-weight: 700;
}

.pwa-root [data-view="dossier-detail"] .dd-tab.on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}

/* === Tab content : show only active === */
.pwa-root [data-view="dossier-detail"] .dd-tab-content {
  display: none;
}

.pwa-root [data-view="dossier-detail"] .dd-tab-content[data-active="true"] {
  display: block;
}

/* === Sections === */
.pwa-root [data-view="dossier-detail"] .dd-sec {
  margin-bottom: 18px;
}

.pwa-root [data-view="dossier-detail"] .dd-sec-lbl {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 2px;
}

/* === Prochaines actions list === */
.pwa-root [data-view="dossier-detail"] .dd-actions-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.pwa-root [data-view="dossier-detail"] .dd-action-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 80ms ease-out;
}

.pwa-root [data-view="dossier-detail"] .dd-action-row:first-child {
  border-top: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-action-row:active {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}

.pwa-root [data-view="dossier-detail"] .dd-action-row.done .dd-action-title {
  text-decoration: line-through;
  color: var(--muted);
}

.pwa-root [data-view="dossier-detail"] .dd-action-row.done .dd-action-meta {
  color: var(--muted);
  text-decoration: line-through;
}

.pwa-root [data-view="dossier-detail"] .dd-action-check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border-strong, color-mix(in srgb, var(--text) 25%, transparent));
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root [data-view="dossier-detail"] .dd-action-check.on {
  background: var(--text);
  border-color: var(--text);
}

.pwa-root [data-view="dossier-detail"] .dd-action-main {
  min-width: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-action-title {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="dossier-detail"] .dd-action-meta {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="dossier-detail"] .dd-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chaud, #d64560) 14%, transparent);
  color: var(--chaud, #d64560);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-action-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--chaud, #d64560);
}

.pwa-root [data-view="dossier-detail"] .dd-action-empty {
  padding: 18px 14px;
  text-align: center;
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* === Compta grid === */
.pwa-root [data-view="dossier-detail"] .dd-compta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 16px;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-card.violet {
  background: color-mix(in srgb, var(--accent, #6b5cf5) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--accent, #6b5cf5) 18%, transparent);
}

.pwa-root [data-view="dossier-detail"] .dd-compta-lbl {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-card.violet .dd-compta-lbl {
  color: color-mix(in srgb, var(--accent, #6b5cf5) 70%, transparent);
}

.pwa-root [data-view="dossier-detail"] .dd-compta-val {
  font-family: var(--mono, ui-monospace);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-card.violet .dd-compta-val {
  color: var(--accent, #6b5cf5);
}

/* === Empty state pour tabs === */
.pwa-root [data-view="dossier-detail"] .dd-empty {
  padding: 60px 20px;
  text-align: center;
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* === Back header structure (déjà existant — juste assurer surface blanc) === */
.pwa-root [data-view="dossier-detail"] .back-hdr {
  background: var(--surface) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pwa-root [data-view="dossier-detail"] .dd-hdr-more {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-hdr-more:active {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}


/* ══════════════════════════════════════════════════════════════════
   [v1247] Fiche dossier — Documents + Activité + Compta détail
   ══════════════════════════════════════════════════════════════════ */

/* CTA button (ajouter doc, nouvelle note) */
.pwa-root [data-view="dossier-detail"] .dd-cta-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  border: 1.5px dashed color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 14px;
  justify-content: center;
  transition: all 120ms ease-out;
}

.pwa-root [data-view="dossier-detail"] .dd-cta-btn:active {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  border-style: solid;
}

/* === Documents list === */
.pwa-root [data-view="dossier-detail"] .dd-docs-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.pwa-root [data-view="dossier-detail"] .dd-doc-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pwa-root [data-view="dossier-detail"] .dd-doc-row:first-child {
  border-top: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-doc-row:active {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}

.pwa-root [data-view="dossier-detail"] .dd-doc-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-radius: 8px;
}

.pwa-root [data-view="dossier-detail"] .dd-doc-main {
  min-width: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-doc-name {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-root [data-view="dossier-detail"] .dd-doc-meta {
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-doc-chev {
  color: var(--muted);
  flex-shrink: 0;
}

/* === Activité feed === */
.pwa-root [data-view="dossier-detail"] .dd-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pwa-root [data-view="dossier-detail"] .dd-activity-day-lbl {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 0 2px;
}

.pwa-root [data-view="dossier-detail"] .dd-activity-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.pwa-root [data-view="dossier-detail"] .dd-activity-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 6px 0;
  align-items: start;
}

.pwa-root [data-view="dossier-detail"] .dd-activity-row + .dd-activity-row {
  border-top: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
  margin-top: 4px;
  padding-top: 10px;
}

.pwa-root [data-view="dossier-detail"] .dd-activity-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-activity-main {
  min-width: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-activity-title {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.1px;
  line-height: 1.4;
  word-break: break-word;
}

.pwa-root [data-view="dossier-detail"] .dd-activity-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--muted);
}

.pwa-root [data-view="dossier-detail"] .dd-activity-time {
  font-family: var(--mono);
}

.pwa-root [data-view="dossier-detail"] .dd-activity-tag {
  display: inline-flex;
  padding: 1px 8px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 500;
}

/* === Compta detail === */
.pwa-root [data-view="dossier-detail"] .dd-compta-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
  font-family: var(--font);
  font-size: 13px;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-detail-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-detail-row .lbl {
  color: var(--text-dim);
  letter-spacing: -.1px;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-detail-row .val {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-detail-row.total {
  border-top: 1.5px solid var(--text);
  margin-top: 4px;
  padding-top: 12px;
  font-weight: 700;
}

.pwa-root [data-view="dossier-detail"] .dd-compta-detail-row.total .lbl,
.pwa-root [data-view="dossier-detail"] .dd-compta-detail-row.total .val {
  color: var(--text);
  font-size: 14px;
}


/* ══════════════════════════════════════════════════════════════════
   [v1247] PAGE LOGIN — Refonte Margot V2 iOS native mobile
   
   Sur mobile : full-screen blanc épuré, brand donna en haut,
   gros titre, inputs ronds, big button noir.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Reset full-screen mobile */
  body.login-page,
  body:has(#auth-screen) {
    background: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  }

  #auth-screen {
    background: #ffffff !important;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: 1fr !important;
  }

  /* Hide animation side completely */
  .login-marketing,
  .login-anim-side,
  .anim-side,
  #auth-screen > aside,
  #auth-screen .anim-v2 {
    display: none !important;
  }

  /* Form side : full-screen, padding ajustés safe-area */
  .login-form-side {
    background: #ffffff !important;
    padding: env(safe-area-inset-top, 16px) 24px env(safe-area-inset-bottom, 24px) !important;
    padding-top: max(env(safe-area-inset-top, 16px), 16px) !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Brand mobile (donna logo wordmark img injecté par injectAuthLogos JS) */
  .login-brand-mobile {
    position: static !important;
    display: flex !important;
    align-items: center;
    padding: 14px 0 8px;
  }

  /* v1248 : pas de ::before, on garde uniquement le <img> wordmark injecté par JS */

  /* Top bar "Pas encore de compte" → en bas (caché ici, repositionné en bottom via order) */
  .login-form-top {
    order: 99;
    position: static !important;
    align-items: center !important;
    text-align: center;
    padding: 16px 0;
    border-top: 1px solid #ebecf0;
    margin-top: 24px;
    flex-direction: row !important;
    justify-content: center;
    gap: 6px !important;
    font-size: 13.5px !important;
    color: #6a7287 !important;
  }

  .login-form-top a {
    font-size: 13.5px !important;
    color: #6b5cf5 !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  /* Form */
  .login-form {
    flex: 1 !important;
    justify-content: flex-start !important;
    padding-top: 32px !important;
    max-width: 100% !important;
  }

  .login-form h2 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -1.2px !important;
    line-height: 1.1;
    margin: 0 0 8px !important;
    color: #14161f !important;
  }

  .login-form .sub {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px !important;
    color: #6a7287 !important;
    margin: 0 0 32px !important;
    line-height: 1.4;
    letter-spacing: -.2px;
  }

  /* Field group */
  .login-form .field {
    margin-bottom: 18px !important;
  }

  .login-form .field label {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #14161f !important;
    margin-bottom: 8px !important;
    letter-spacing: -.1px;
  }

  .login-form .field label a {
    font-size: 13px !important;
    color: #6b5cf5 !important;
    font-weight: 600;
  }

  /* Inputs : style iOS native arrondis */
  .login-form .input {
    height: 52px !important;
    border-radius: 12px !important;
    border: 1.5px solid #ebecf0 !important;
    background: #ffffff !important;
    padding: 0 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important; /* 16px+ évite zoom iOS */
    color: #14161f !important;
    letter-spacing: -.2px;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
  }

  .login-form .input:focus {
    border-color: #6b5cf5 !important;
    box-shadow: 0 0 0 4px rgba(107, 92, 245, 0.12) !important;
  }

  .login-form .input::placeholder {
    color: #a8adbd !important;
  }

  /* Reveal button */
  .login-form .input-wrap {
    position: relative;
  }

  .login-form .input-wrap .reveal {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #8a93ab;
    cursor: pointer;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Remember checkbox */
  .login-form .remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    color: #4a5169 !important;
    margin: 8px 0 24px !important;
    letter-spacing: -.1px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .login-form .remember input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #6b5cf5;
    cursor: pointer;
  }

  /* Button primary : big iOS black */
  .login-form .btn-primary {
    width: 100%;
    height: 54px !important;
    border-radius: 14px !important;
    background: #14161f !important;
    color: #ffffff !important;
    border: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -.2px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 100ms ease-out, opacity 100ms ease-out;
  }

  .login-form .btn-primary:active {
    transform: scale(0.98);
    opacity: 0.92;
  }

  .login-form .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .login-form .btn-secondary {
    width: 100%;
    height: 54px !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #14161f !important;
    border: 1.5px solid #ebecf0 !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 12px !important;
  }

  /* Errors/Success */
  .login-form .err {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: rgba(214, 69, 96, 0.08);
    border-radius: 10px;
    color: #c0394e;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    display: none;
  }

  .login-form .err:not(:empty) {
    display: block;
  }

  .login-form .ok {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: rgba(34, 160, 107, 0.08);
    border-radius: 10px;
    color: #1c855a;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    display: none;
  }

  .login-form .ok:not(:empty) {
    display: block;
  }

  /* Legal */
  .login-form .login-legal {
    margin: 24px 0 0 !important;
    font-size: 11.5px !important;
    color: #8a93ab !important;
    text-align: center;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  }

  .login-form .login-legal a {
    color: #6b5cf5 !important;
    text-decoration: none;
  }

  /* Status bar safe-area blanc */
  body.login-page::before,
  body:has(#auth-screen)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #ffffff;
    z-index: 9999;
  }
}

/* Dark mode mobile login */
@media (max-width: 600px) {
  html[data-theme="noir"] body.login-page,
  html[data-theme="noir"] body:has(#auth-screen),
  html[data-theme="noir"] #auth-screen,
  html[data-theme="noir"] .login-form-side {
    background: var(--bg) !important;
  }
  html[data-theme="noir"] .login-brand-mobile,
  html[data-theme="noir"] .login-brand-mobile::before,
  html[data-theme="noir"] .login-form h2 {
    color: #f2f3f7 !important;
  }
  html[data-theme="noir"] .login-form .sub,
  html[data-theme="noir"] .login-form-top {
    color: #a8adbd !important;
  }
  html[data-theme="noir"] .login-form .input {
    background: #14161f !important;
    border-color: #2a2d3a !important;
    color: #f2f3f7 !important;
  }
  html[data-theme="noir"] .login-form .field label {
    color: #f2f3f7 !important;
  }
  html[data-theme="noir"] .login-form .btn-primary {
    background: #ffffff !important;
    color: #14161f !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   [v1248] PAGE COMPTA — Refonte Margot V2 mockup
   
   - Header pattern (eyebrow + h1 + sub Q2 2026 · 1er avr → 30 juin)
   - Segmented Mois/Trimestre/Année/Tout
   - Hero KPI (Honoraires encaissés gros chiffre + bar progression)
   - 3 KPIs row (En cours / Pipeline / Honor moy)
   - donna proactive insight pill violet
   - Chart 12 mois sparkline
   - Sections À encaisser + Encaissés avec items
   ══════════════════════════════════════════════════════════════════ */

/* === Header === */
#pwa-compta-overlay .ct-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 8px;
  background: var(--surface);
  flex-shrink: 0;
}

#pwa-compta-overlay .ct-hdr-back {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

#pwa-compta-overlay .ct-hdr-back:active {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

#pwa-compta-overlay .ct-hdr-left {
  flex: 1;
  min-width: 0;
}

#pwa-compta-overlay .ct-hdr-eyebrow {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

#pwa-compta-overlay .ct-hdr-title {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
}

#pwa-compta-overlay .ct-hdr-sub {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 3px;
  letter-spacing: -.1px;
}

#pwa-compta-overlay .ct-hdr-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

#pwa-compta-overlay .ct-hdr-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#pwa-compta-overlay .ct-hdr-btn svg {
  pointer-events: none; /* [v1251] le svg ne doit pas absorber le click */
}

#pwa-compta-overlay .ct-hdr-btn:active {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* === Segmented control === */
#pwa-compta-overlay .ct-seg-wrap {
  padding: 8px 14px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#pwa-compta-overlay .ct-seg {
  display: flex;
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}

html[data-theme="noir"] #pwa-compta-overlay .ct-seg {
  background: color-mix(in srgb, #fff 8%, transparent);
}

#pwa-compta-overlay .ct-seg button {
  flex: 1;
  height: 30px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 7px;
  padding: 0 8px;
  transition: all 180ms ease-out;
  white-space: nowrap;
}

#pwa-compta-overlay .ct-seg button[data-active="true"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

html[data-theme="noir"] #pwa-compta-overlay .ct-seg button[data-active="true"] {
  background: color-mix(in srgb, #fff 14%, transparent);
}

/* === Hero KPI === */
#pwa-compta-overlay .ct-hero {
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

#pwa-compta-overlay .ct-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
}

#pwa-compta-overlay .ct-hero-label {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
  text-transform: uppercase;
}

#pwa-compta-overlay .ct-hero-val {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text);
  line-height: 1.05;
}

#pwa-compta-overlay .ct-hero-val .cur {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dim);
}

#pwa-compta-overlay .ct-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

#pwa-compta-overlay .ct-hero-meta .up {
  color: var(--green, #22a06b);
  font-weight: 700;
}

#pwa-compta-overlay .ct-hero-bar {
  position: relative;
  height: 6px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 999px;
  margin-top: 14px;
  overflow: visible;
}

#pwa-compta-overlay .ct-hero-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi, color-mix(in srgb, var(--accent) 80%, white)));
  border-radius: 999px;
  transition: width 400ms ease-out;
}

#pwa-compta-overlay .ct-hero-bar-target {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text);
  border-radius: 1px;
}

#pwa-compta-overlay .ct-hero-bar-target::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -3px;
  width: 8px;
  height: 8px;
  background: var(--text);
  border-radius: 50%;
  border: 2px solid var(--surface);
}

#pwa-compta-overlay .ct-hero-bar-lbl {
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.1px;
}

/* === KPIs row === */
#pwa-compta-overlay .ct-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

#pwa-compta-overlay .ct-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px;
}

#pwa-compta-overlay .ct-kpi-val {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}

#pwa-compta-overlay .ct-kpi-val .cur {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

#pwa-compta-overlay .ct-kpi-lbl {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .9px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 4px;
}

#pwa-compta-overlay .ct-kpi-meta {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* === Section titles === */
#pwa-compta-overlay .ct-section-title {
  padding: 4px 0 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

#pwa-compta-overlay .ct-section-title a {
  cursor: pointer;
  text-decoration: none;
}

/* === Chart === */
#pwa-compta-overlay .ct-chart {
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 6px 6px;
  color: var(--text);
}

#pwa-compta-overlay .ct-chart-axis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 4px 6px 0;
  font-family: var(--mono, ui-monospace);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .5px;
}

/* === Items list === */
#pwa-compta-overlay .ct-items-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 4px;
}

#pwa-compta-overlay .ct-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

#pwa-compta-overlay .ct-items-wrap .ct-item:first-child {
  border-top: 0;
}

#pwa-compta-overlay .ct-item.paid {
  opacity: .65;
}

#pwa-compta-overlay .ct-item-main {
  min-width: 0;
}

#pwa-compta-overlay .ct-item-title {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pwa-compta-overlay .ct-item-sub {
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pwa-compta-overlay .ct-item-step {
  font-family: var(--font);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pwa-compta-overlay .ct-item-amount {
  font-family: var(--mono, ui-monospace);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}

#pwa-compta-overlay .ct-item.paid .ct-item-amount {
  color: var(--green, #22a06b);
}

/* === Badges m-badge === */
#pwa-compta-overlay .m-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0;
}

#pwa-compta-overlay .m-badge.chaud {
  background: color-mix(in srgb, var(--chaud, #d64560) 14%, transparent);
  color: var(--chaud, #d64560);
}

#pwa-compta-overlay .m-badge.chaud .dot {
  background: var(--chaud, #d64560);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

#pwa-compta-overlay .m-badge.green {
  background: color-mix(in srgb, var(--green, #22a06b) 14%, transparent);
  color: var(--green, #22a06b);
}

#pwa-compta-overlay .m-badge.green .dot {
  background: var(--green, #22a06b);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

#pwa-compta-overlay .m-badge.tiede {
  background: color-mix(in srgb, var(--tiede, #c08a2e) 14%, transparent);
  color: var(--tiede, #c08a2e);
}

/* Status bar safe-area pour overlay compta */
#pwa-compta-overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] #pwa-compta-overlay::before {
  background: var(--bg);
}

/* Police iOS native pour toute la vue compta */
#pwa-compta-overlay,
#pwa-compta-overlay * {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif);
}

#pwa-compta-overlay .ct-item-amount,
#pwa-compta-overlay .ct-chart-axis {
  font-family: var(--mono, ui-monospace) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1249] MODALS CRÉATION — Refonte Margot V2 iOS full-screen native
   
   Override des classes legacy .cr-* (HTML inchangé sauf ajout
   bouton Save top + voice bar + donna card)
   ══════════════════════════════════════════════════════════════════ */

/* Overlay full-screen */
#pwa-cr-overlay {
  background: var(--bg, #f7f8fa) !important;
}

html[data-theme="noir"] #pwa-cr-overlay {
  background: var(--bg) !important;
}

#pwa-cr-overlay .screen {
  background: var(--bg, #f7f8fa) !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* === Topbar Margot V2 : Cancel / Title / Save (iOS native blur) === */
#pwa-cr-overlay .cr-topbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: env(safe-area-inset-top, 0) 14px 8px !important;
  padding-top: max(env(safe-area-inset-top, 12px), 12px) !important;
  min-height: 52px !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}

#pwa-cr-overlay .cr-topbar .cancel {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  font-family: var(--font, -apple-system) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--accent, #6b5cf5) !important;
  padding: 4px 0 !important;
  text-align: left !important;
  -webkit-tap-highlight-color: transparent;
  width: auto !important;
  height: auto !important;
}

#pwa-cr-overlay .cr-topbar .ttl {
  font-family: var(--font, -apple-system) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: -.2px !important;
  color: var(--text) !important;
}

#pwa-cr-overlay .cr-topbar .cr-save-top {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  font-family: var(--font, -apple-system) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--accent, #6b5cf5) !important;
  padding: 4px 0 !important;
  text-align: right !important;
  -webkit-tap-highlight-color: transparent;
}

#pwa-cr-overlay .cr-topbar .cr-save-top:disabled,
#pwa-cr-overlay .cr-topbar .cr-save-top.disabled {
  color: var(--muted, #8a93ab) !important;
  pointer-events: none;
}

/* === Type picker → Segmented Margot V2 === */
#pwa-cr-overlay .cr-typepicker {
  display: flex !important;
  background: color-mix(in srgb, var(--text) 6%, transparent) !important;
  border-radius: 9px !important;
  padding: 2px !important;
  gap: 2px !important;
  margin: 10px 14px 14px !important;
}

html[data-theme="noir"] #pwa-cr-overlay .cr-typepicker {
  background: color-mix(in srgb, #fff 8%, transparent) !important;
}

#pwa-cr-overlay .cr-typepicker button {
  flex: 1 !important;
  height: 30px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-dim) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -.1px !important;
  cursor: pointer !important;
  border-radius: 7px !important;
  padding: 0 8px !important;
  transition: all 180ms ease-out !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: transparent;
}

#pwa-cr-overlay .cr-typepicker button.active {
  background: var(--surface) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important;
}

html[data-theme="noir"] #pwa-cr-overlay .cr-typepicker button.active {
  background: color-mix(in srgb, #fff 14%, transparent) !important;
}

/* === Donna proactive card === */
#pwa-cr-overlay .cr-donna-card {
  margin: 0 14px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: color-mix(in srgb, var(--accent, #6b5cf5) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #6b5cf5) 22%, transparent);
  border-radius: 12px;
}

#pwa-cr-overlay .cr-donna-card .ml-donna-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--text, #14161f);
  border: 1px solid var(--accent, #6b5cf5);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent, #6b5cf5);
}

#pwa-cr-overlay .cr-donna-card .ml-donna-eyebrow {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--accent, #6b5cf5);
  text-transform: uppercase;
}

#pwa-cr-overlay .cr-donna-card .ml-donna-text {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text);
  margin-top: 2px;
  line-height: 1.4;
}

#pwa-cr-overlay .cr-donna-card .ml-donna-action {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent, #6b5cf5) 35%, transparent);
  color: var(--accent, #6b5cf5);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* === Scroll body === */
#pwa-cr-overlay .body-x {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

#pwa-cr-overlay .body-x .scroll {
  padding: 0 0 28px;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Sections — iOS Settings grouped inset === */
#pwa-cr-overlay .cr-section {
  margin: 0 14px 6px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#pwa-cr-overlay .cr-section .s-lbl {
  display: block;
  padding: 0 0 0 0 !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .9px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  background: transparent;
  position: absolute;
  top: -22px;
  left: 24px;
}

/* Wrapper-margin pour donner de l'espace au label flottant */
#pwa-cr-overlay .cr-section {
  position: relative;
  margin-top: 22px !important;
}

#pwa-cr-overlay .cr-section:first-child {
  margin-top: 8px !important;
}

#pwa-cr-overlay .cr-section:first-child .s-lbl {
  top: -22px;
}

/* === Field rows iOS Settings === */
#pwa-cr-overlay .cr-field {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  min-height: 44px !important;
  background: transparent !important;
}

#pwa-cr-overlay .cr-section .cr-field:last-child {
  border-bottom: 0 !important;
}

#pwa-cr-overlay .cr-field .f-lbl {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
}

#pwa-cr-overlay .cr-field .f-lbl .req {
  color: var(--chaud, #d64560) !important;
  font-weight: 700 !important;
}

#pwa-cr-overlay .cr-field .f-input {
  font-family: var(--font) !important;
  font-size: 16px !important;  /* [v1250] iOS no-zoom : 16px minimum */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
  width: 100% !important;
  min-width: 0 !important;
  outline: none !important;
  text-align: right !important;
  letter-spacing: -.2px;
}

/* [v1250] textarea + select aussi 16px no-zoom iOS */
#pwa-cr-overlay textarea,
#pwa-cr-overlay select,
#pwa-cr-overlay input[type="date"],
#pwa-cr-overlay input[type="time"],
#pwa-cr-overlay input[type="datetime-local"],
#pwa-cr-overlay input[type="number"] {
  font-size: 16px !important;
}

#pwa-cr-overlay .cr-field .f-input::placeholder {
  color: var(--muted, #8a93ab) !important;
  font-weight: 400 !important;
}

#pwa-cr-overlay .cr-field textarea.f-input,
#pwa-cr-overlay .cr-field .f-input[rows] {
  text-align: left !important;
  resize: none !important;
  line-height: 1.4;
}

/* Row2 grid : 2 cols of fields side by side */
#pwa-cr-overlay .cr-row2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-bottom: 1px solid var(--border) !important;
}

#pwa-cr-overlay .cr-row2 .cr-field {
  border-bottom: 0 !important;
  grid-template-columns: 1fr !important;
  align-items: flex-start !important;
  padding: 11px 14px !important;
}

#pwa-cr-overlay .cr-row2 .cr-field + .cr-field {
  border-left: 1px solid var(--border) !important;
}

#pwa-cr-overlay .cr-row2 .cr-field .f-lbl {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

#pwa-cr-overlay .cr-row2 .cr-field .f-input {
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 600;
}

/* === Pills (cr-pill chips) === */
#pwa-cr-overlay .cr-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
}

#pwa-cr-overlay .cr-pill {
  padding: 6px 11px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--text-dim) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -.1px;
}

#pwa-cr-overlay .cr-pill.active {
  background: var(--text, #14161f) !important;
  color: var(--surface, #fff) !important;
  border-color: var(--text, #14161f) !important;
  font-weight: 600 !important;
}

html[data-theme="noir"] #pwa-cr-overlay .cr-pill.active {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--surface) !important;
}

/* === Voice CTA bar sticky === */
#pwa-cr-overlay .cr-voice-bar {
  padding: 10px 14px max(env(safe-area-inset-bottom, 10px), 10px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

#pwa-cr-overlay .cr-voice-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--text, #14161f);
  color: var(--bg, #f7f8fa);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  min-height: 48px;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}

#pwa-cr-overlay .cr-voice-btn .mic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent, #6b5cf5);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

#pwa-cr-overlay .cr-voice-btn .prompt {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.2px;
}

#pwa-cr-overlay .cr-voice-btn .hint {
  font-family: var(--font);
  font-size: 11px;
  opacity: .55;
  font-weight: 500;
  white-space: nowrap;
}

/* === Footer legacy : caché en mode v1249 === */
#pwa-cr-overlay .cr-footer {
  display: none !important;
}

/* Status bar safe-area handled par cr-topbar padding-top */


/* ══════════════════════════════════════════════════════════════════
   [v1250] Patches finaux
   ══════════════════════════════════════════════════════════════════ */

/* ── Status bar BLANC pour overlay tâches (Anthony : "gris au lieu de blanc") ── */
#pwa-tasks-overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] #pwa-tasks-overlay::before {
  background: var(--bg);
}

/* Header tasks : back btn style */
#pwa-tasks-overlay .hdr-back {
  margin-right: 4px !important;
}

/* ── Drawer theme toggle item ── */
#pwa-drawer-theme-toggle {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#pwa-drawer-theme-toggle:active {
  opacity: .7;
}

/* ── Compta settings button visible ── */
#pwa-ct-settings {
  margin-left: 2px;
}

/* ── Donna paste sheet + voice overlay theme dark adapted ── */
html[data-theme="noir"] #pwa-donna-paste-sheet,
html[data-theme="noir"] #pwa-ct-obj-sheet {
  background: #14161f !important;
  color: #f2f3f7 !important;
}

html[data-theme="noir"] #pwa-paste-input {
  background: #0a0c12 !important;
  color: #f2f3f7 !important;
  border-color: #2a2d3a !important;
}

/* ── Modal note (pwa-nt-overlay) : header pattern Margot V2 status bar ── */
#pwa-nt-overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] #pwa-nt-overlay::before {
  background: var(--bg);
}

#pwa-nt-overlay .nt-header {
  padding-top: max(env(safe-area-inset-top, 12px), 12px) !important;
}

/* ── Page Aide (data-view="aide" + "support") status bar + header pattern ── */
.pwa-root [data-view="aide"] .sticky-top,
.pwa-root [data-view="support"] .sticky-top,
.pwa-root [data-view="aide"] .hdr,
.pwa-root [data-view="support"] .hdr {
  padding-top: max(env(safe-area-inset-top, 12px), 12px) !important;
}

/* ──────────────────────────────────────────────────────────────────
   [v1250] Headers Aide/Support pattern Margot V2
   ────────────────────────────────────────────────────────────────── */
.pwa-aide-hdr-v2 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 14px 8px;
  padding-top: max(env(safe-area-inset-top, 14px), 14px);
  background: var(--surface);
}

.pwa-aide-hdr-v2 .back {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.pwa-aide-hdr-v2 .back:active {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.pwa-aide-hdr-v2 .left {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.pwa-aide-hdr-v2 .eyebrow {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.pwa-aide-hdr-v2 h1 {
  font-family: var(--font, -apple-system);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
}

.pwa-aide-hdr-v2 .sub {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 3px;
  letter-spacing: -.1px;
}

/* ── Modal note/task overlays (pwa-nt-overlay note) — Margot V2 light touch ── */
#pwa-nt-overlay .nt-header,
#pwa-task-modal .modal-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
}

/* Status bar safe-area pour overlay creation - duplicate guard */
#pwa-cr-overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] #pwa-cr-overlay::before {
  background: var(--bg);
}


/* ══════════════════════════════════════════════════════════════════
   [v1251] Patches massifs Anthony
   ══════════════════════════════════════════════════════════════════ */

/* ── Fix : task modal au-dessus de pwa-tasks-overlay ── */
#task-modal-overlay.t-frame.is-modal,
#task-modal-overlay {
  z-index: 100020 !important;
}

#pwa-event-read-overlay,
#task-read-overlay {
  z-index: 100020 !important;
}

/* ── Drawer dark mode : forcer contraste lisible des items ── */
html[data-theme="noir"] .td-drawer,
[data-theme="noir"] .td-drawer {
  background: var(--surface) !important;
  color: #f2f3f7 !important;
}

html[data-theme="noir"] .td-drawer .td-drawer-item,
[data-theme="noir"] .td-drawer .td-drawer-item {
  color: #f2f3f7 !important;
}

html[data-theme="noir"] .td-drawer .td-drawer-item .lbl,
[data-theme="noir"] .td-drawer .td-drawer-item .lbl,
html[data-theme="noir"] .td-drawer .td-drawer-item svg,
[data-theme="noir"] .td-drawer .td-drawer-item svg {
  color: #f2f3f7 !important;
  stroke: currentColor !important;
}

html[data-theme="noir"] .td-drawer .td-drawer-logout .lbl,
[data-theme="noir"] .td-drawer .td-drawer-logout .lbl {
  color: #ff6680 !important;
}

/* ── Fond du pwa-root quand theme noir (évite flash blanc) ── */
html[data-theme="noir"] body,
html[data-theme="noir"] body.pwa-active,
[data-theme="noir"] body {
  background: var(--bg) !important;
}

/* ── Modal lecture event / task : style iOS native ── */
#pwa-event-read-overlay,
#task-read-overlay {
  font-family: -apple-system, BlinkMacSystemFont, var(--font, 'Inter'), sans-serif !important;
}

#pwa-event-read-sheet,
#task-read-sheet {
  border-radius: 18px 18px 0 0 !important;
}

#pwa-event-read-sheet *,
#task-read-sheet * {
  font-family: -apple-system, BlinkMacSystemFont, var(--font, 'Inter'), sans-serif !important;
}

/* Rows iOS Settings style */
#pwa-event-read-overlay .tr-row,
#task-read-overlay .tr-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

#pwa-event-read-overlay .tr-icon,
#task-read-overlay .tr-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--s2) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

#pwa-event-read-overlay .tr-label,
#task-read-overlay .tr-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
}

#pwa-event-read-overlay .tr-value,
#task-read-overlay .tr-value {
  font-size: 15px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  letter-spacing: -.1px !important;
  line-height: 1.4 !important;
}

/* Boutons modal lecture : iOS native */
#pwa-event-read-close,
#pwa-event-read-edit,
#task-read-overlay .modal-foot .b {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.1px !important;
  -webkit-tap-highlight-color: transparent !important;
}

#pwa-event-read-edit,
#task-read-overlay .b.primary,
#task-read-overlay #task-read-edit {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 0 !important;
}

#pwa-event-read-close,
#task-read-overlay #task-read-close {
  background: var(--s2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}

#task-read-overlay #task-read-done {
  background: var(--green, #22a06b) !important;
  color: #fff !important;
  border: 0 !important;
}

#task-read-overlay #task-read-delete {
  color: var(--chaud, #d64560) !important;
  background: transparent !important;
  border: 0 !important;
}

/* ── Recherche globale dashboard : style iOS native ── */
#pwa-sr-overlay,
#pwa-sr-overlay * {
  font-family: -apple-system, BlinkMacSystemFont, var(--font, 'Inter'), sans-serif !important;
}

#pwa-sr-overlay .sr-input-wrap input,
#pwa-sr-input {
  font-size: 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -.2px !important;
}

#pwa-sr-overlay .sr-input-wrap {
  border-radius: 12px !important;
  border: 1.5px solid var(--border) !important;
}

#pwa-sr-overlay .sr-input-wrap:focus-within {
  border-color: var(--accent, #6b5cf5) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #6b5cf5) 14%, transparent) !important;
}

#pwa-sr-overlay .sr-filter {
  border-radius: 99px !important;
  padding: 7px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

#pwa-sr-overlay .sr-filter.active {
  background: var(--text) !important;
  color: var(--bg) !important;
  font-weight: 600 !important;
}

/* Avatars recherche : iOS native circulaires */
#pwa-sr-overlay .sr-item,
#pwa-sr-overlay [data-sr-item] {
  padding: 12px 14px !important;
  border-radius: 0 !important;
}

/* ── Donna chat sheet dark mode polish ── */
html[data-theme="noir"] #pwa-donna-chat-sheet {
  background: var(--surface, #0a0a0c) !important;
}

html[data-theme="noir"] #pwa-donna-chat-input {
  background: var(--bg, #000) !important;
  color: var(--text, #f2f3f7) !important;
}

/* Status bar pour tous overlays - rapide guard */
#pwa-event-read-overlay::before,
#task-read-overlay::before {
  /* Pas de ::before ici : ces overlays ont déjà un backdrop dim */
}


/* ══════════════════════════════════════════════════════════════════
   [v1252] PATCHES MASSIFS — Reprise tous les fixes ratés v1251
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Page Aide/Support : transformation header en pattern Margot V2 ── */
.pwa-root [data-view="aide"] .pwa-aide-topbar,
.pwa-root [data-view="support"] .pwa-aide-topbar {
  padding: max(env(safe-area-inset-top, 14px), 14px) 14px 4px !important;
  background: var(--surface) !important;
  border-bottom: 0 !important;
}

.pwa-root [data-view="aide"] .pwa-aide-topbar-btn,
.pwa-root [data-view="support"] .pwa-aide-topbar-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  margin-right: 6px !important;
}

.pwa-root [data-view="aide"] .pwa-aide-topbar-title,
.pwa-root [data-view="support"] .pwa-aide-topbar-title {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  font-family: var(--font, -apple-system) !important;
}

.pwa-root [data-view="aide"] .pwa-aide-topbar-title small,
.pwa-root [data-view="support"] .pwa-aide-topbar-title small {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
  order: 1;
}

/* Le greeting "Bonjour Anthony" en h1 pattern Margot V2 */
.pwa-root [data-view="aide"] .pwa-aide-topbar-title,
.pwa-root [data-view="support"] .pwa-aide-topbar-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.8px !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
}

/* Cacher l'ancien hero "Ta question a sûrement une réponse" car trop de bruit visuel */
.pwa-root [data-view="aide"] .pwa-aide-hdr {
  padding: 0 14px 16px !important;
}

.pwa-root [data-view="aide"] .pwa-aide-hdr h1 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  letter-spacing: -.1px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

.pwa-root [data-view="aide"] .pwa-aide-hdr h1 .grad {
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text-dim) !important;
}

/* Police Apple sur toute la page aide */
.pwa-root [data-view="aide"],
.pwa-root [data-view="aide"] *,
.pwa-root [data-view="support"],
.pwa-root [data-view="support"] * {
  font-family: -apple-system, BlinkMacSystemFont, var(--font, 'Inter'), sans-serif !important;
}

/* Status bar BLANC sur aide */
.pwa-root [data-view="aide"]::before,
.pwa-root [data-view="support"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] .pwa-root [data-view="aide"]::before,
html[data-theme="noir"] .pwa-root [data-view="support"]::before {
  background: var(--bg);
}

/* ── 2. Bouton + central (FAB) : SVG étoile bien visible ── */
.pwa-root .tab-plus svg,
#__pwa_tabbar_host .tab-plus svg {
  width: 26px !important;
  height: 26px !important;
}

/* ── 3. Donna chat sheet polish dark + light ── */
html[data-theme="noir"] #pwa-donna-chat-sheet {
  background: var(--surface, #0a0a0c) !important;
}

html[data-theme="noir"] #pwa-donna-chat-input {
  background: var(--bg, #000) !important;
  color: var(--text, #f2f3f7) !important;
}

/* ── 4. Task modal z-index AGGRESSIVE — passe au-dessus de pwa-tasks-overlay ── */
#task-modal-overlay,
#task-modal-overlay.t-frame,
#task-modal-overlay.t-frame.is-modal,
body > #task-modal-overlay {
  z-index: 100100 !important;
  position: fixed !important;
}

/* Aussi forcer les autres modales hautes priorité */
#pwa-event-read-overlay,
#task-read-overlay {
  z-index: 100100 !important;
}

/* ── 5. Pages hors navbar : back arrow < à gauche du titre ── */
/* Pages déjà OK : pwa-tasks-overlay (v1250), pwa-compta-overlay (v1248) */
/* Pages à patcher : pwa-documents-overlay, pwa-outils-overlay, pwa-settings-overlay */

/* Documents overlay status bar + spacing */
#pwa-documents-overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] #pwa-documents-overlay::before {
  background: var(--bg);
}

#pwa-documents-overlay .sr-header,
#pwa-outils-overlay .sr-header,
#pwa-settings-overlay .sr-header {
  padding-top: max(env(safe-area-inset-top, 12px), 12px) !important;
}

/* Outils + Settings status bar */
#pwa-outils-overlay::before,
#pwa-settings-overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] #pwa-outils-overlay::before,
html[data-theme="noir"] #pwa-settings-overlay::before {
  background: var(--bg);
}

/* ── 6. Search global (loupe) → CSS conflicts fix ── */
#pwa-sr-overlay::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] #pwa-sr-overlay::before {
  background: var(--bg);
}

#pwa-sr-overlay .sr-header {
  padding-top: max(env(safe-area-inset-top, 12px), 12px) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1255] CSS overrides massifs Anthony — fix la liste complète
   ══════════════════════════════════════════════════════════════════ */

/* ── Aide page : header Margot V2 pattern (post aide-pwa.js refonte) ── */
.pwa-root [data-view="aide"] .sticky-top {
  padding-top: max(env(safe-area-inset-top, 14px), 14px) !important;
  background: var(--surface) !important;
  border-bottom: 0 !important;
}

.pwa-root [data-view="aide"] .sticky-top .hdr {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 8px 16px 14px !important;
}

.pwa-root [data-view="aide"] .sticky-top .hdr-back {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: var(--s2) !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: var(--text) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.pwa-root [data-view="aide"] .sticky-top .left {
  flex: 1 !important;
  min-width: 0 !important;
}

.pwa-root [data-view="aide"] .sticky-top .eyebrow {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
}

.pwa-root [data-view="aide"] .sticky-top h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.8px !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.pwa-root [data-view="aide"] .sticky-top .hdr-sub {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  margin-top: 4px !important;
  letter-spacing: -.1px !important;
}

/* Status bar safe-area sur aide (était dupliqué v1252) */
.pwa-root [data-view="aide"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--surface, #fff);
  z-index: 999;
  pointer-events: none;
}

html[data-theme="noir"] .pwa-root [data-view="aide"]::before {
  background: var(--bg);
}

/* ── Task modal (création/édition) : refonte iOS native via CSS override ── */
body.is-mobile.pwa-active #task-modal-overlay,
body.is-mobile.pwa-active #task-modal-overlay * {
  font-family: -apple-system, BlinkMacSystemFont, var(--font, 'Inter'), sans-serif !important;
}

body.is-mobile.pwa-active #task-modal-overlay .modal-shell {
  border-radius: 18px 18px 0 0 !important;
}

/* Topbar iOS style */
body.is-mobile.pwa-active #task-modal-overlay .modal-topbar,
body.is-mobile.pwa-active #task-modal-overlay .topbar,
body.is-mobile.pwa-active #task-modal-overlay header {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Fields */
body.is-mobile.pwa-active #task-modal-overlay .field-input {
  font-size: 16px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg) !important;
}

body.is-mobile.pwa-active #task-modal-overlay .field-input.title {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -.3px !important;
}

/* Bottom buttons */
body.is-mobile.pwa-active #task-modal-overlay .modal-foot button,
body.is-mobile.pwa-active #task-modal-overlay .modal-foot .b {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.1px !important;
}

body.is-mobile.pwa-active #task-modal-overlay .modal-foot .b.primary {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 0 !important;
}

/* ── Search globale : avatars ronds polish ── */
body.is-mobile.pwa-active #pwa-sr-overlay .sr-row .avatar,
body.is-mobile.pwa-active #pwa-sr-overlay .sr-row .avatar-sm {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.is-mobile.pwa-active #pwa-sr-overlay .sr-row {
  padding: 12px 16px !important;
  gap: 12px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--border) !important;
}

body.is-mobile.pwa-active #pwa-sr-overlay .sr-row .r-title {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: -.2px !important;
  color: var(--text) !important;
}

body.is-mobile.pwa-active #pwa-sr-overlay .sr-row .r-sub {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
}

body.is-mobile.pwa-active #pwa-sr-overlay .sr-group-hdr .title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  padding: 14px 16px 8px !important;
}

/* Compta settings button forcing visibility */
#pwa-compta-overlay #pwa-ct-settings {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
  display: grid !important;
  place-items: center !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1261] FIX CRITIQUE : display:none !important écrasait mes sheets dynamiques
   
   La règle dans pwa-mobile.css cache TOUS les enfants directs de body
   qui ne sont pas dans une whitelist. Mes sheets créés dynamiquement
   (pwa-ct-obj-bd, pwa-ct-obj-sheet) étaient cachés avec !important.
   
   Override avec sélecteur ID + !important pour gagner la specificity.
   ══════════════════════════════════════════════════════════════════ */
body.is-mobile.pwa-active > #pwa-ct-obj-bd,
body.is-mobile.pwa-active > #pwa-ct-obj-sheet {
  display: flex !important;
}

body.is-mobile.pwa-active > #pwa-ct-obj-bd {
  display: block !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1262] Modal "Nouvelle tâche" — refonte Margot V2 iOS native
   
   Anthony : "Revois le modal qui fait encore trop ancien UI, inspire toi 
   des autres modals + il faut rajouter le champ où on peut choisir un 
   client ou un dossier ou un bien"
   
   Style : bottom sheet iOS, sections caps labels, fields 16px no-zoom,
   radius 18, footer sticky avec primary noir.
   ══════════════════════════════════════════════════════════════════ */

/* Whitelist bypass — le task-modal-overlay est créé dynamiquement dans .pwa-root */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100010 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  background: rgba(0, 0, 0, 0.42) !important;
  /* [v1265] backdrop-filter retiré : créait un stacking context qui pouvait emprisonner le picker */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-sheet {
  position: relative !important;
  background: var(--surface, #fff) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.2) !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  width: 100% !important;
  transform: none !important;
}

/* Grabber */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-grab {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  margin: 10px auto 4px;
  flex-shrink: 0;
  /* [v1267] Zone de touch plus large pour swipe-to-close */
  padding: 8px 60px;
  background-clip: content-box;
  cursor: grab;
  touch-action: pan-y;
}

/* Header */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 16px 16px !important;
  flex-shrink: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-head .title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  text-align: center !important;
  flex: 1 !important;
  margin: 0 !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-close svg {
  width: 16px;
  height: 16px;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-spacer {
  width: 30px;
  flex-shrink: 0;
}

/* Body */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-body {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* Section */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-sec-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 4px 2px;
}

/* Input title */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-input-wrap {
  background: var(--bg, #f7f8fa);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-title {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-title::placeholder {
  color: var(--muted);
  font-weight: 400;
}

/* Chips échéance */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-chips .shortcut {
  background: var(--bg, #f7f8fa) !important;
  border: 1px solid var(--border) !important;
  border-radius: 99px !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  margin: 0 !important;
  font-family: inherit !important;
}

/* [v1267] Anciens selecteurs data-active retirés — le JS utilise .active */

/* Date/time dual */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-dual {
  display: grid !important;
  grid-template-columns: 1fr 110px !important;
  gap: 8px !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-date,
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-time {
  background: var(--bg, #f7f8fa) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  color: var(--text) !important;
  font-family: inherit !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 42px !important;
}

/* Priorité segmented */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-prio {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 6px !important;
  background: var(--bg, #f7f8fa) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 4px !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-prio button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 10px 8px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
  font-family: inherit !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-prio button[data-active="true"] {
  background: var(--surface) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 0.5px var(--border);
}

/* Pdot couleurs */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .pdot.basse { background: #e4b324; }
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .pdot.normale { background: #8b7bff; }
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .pdot.haute { background: #ec4767; }

/* === [v1262] Section "LIÉ À" === */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-empty {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  background: var(--bg, #f7f8fa) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: left !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-empty-icn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #8b7bff) 12%, transparent);
  color: var(--accent, #8b7bff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-empty-lbl {
  flex: 1;
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-empty-arrow {
  color: var(--muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--bg, #f7f8fa) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-pill {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-acquereur { background: #4a9eff; }
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-vendeur { background: #8b7bff; }
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-bien { background: #28b46e; }
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-dossier { background: #e4b324; }

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-text {
  flex: 1;
  min-width: 0;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-type {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-addr {
  color: var(--muted);
  font-weight: 400;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-ctx-change {
  background: none;
  border: 0;
  color: var(--accent, #8b7bff);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  flex-shrink: 0;
  font-family: inherit;
}

/* Notes */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-notes-add {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--bg, #f7f8fa) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  width: 100% !important;
  font-family: inherit !important;
  justify-content: flex-start !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-notes {
  width: 100% !important;
  background: var(--bg, #f7f8fa) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  color: var(--text) !important;
  min-height: 80px !important;
  resize: vertical !important;
  outline: none !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
}

/* Footer sticky */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-foot {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px max(env(safe-area-inset-bottom, 16px), 16px) !important;
  border-top: 1px solid var(--border) !important;
  background: var(--surface) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-del {
  background: none !important;
  border: 0 !important;
  color: #ec4767 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin-right: auto !important;
  padding: 8px 0 !important;
  font-family: inherit !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-cancel {
  background: var(--bg, #f7f8fa) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 13px 22px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-save {
  background: var(--text) !important;
  color: var(--surface) !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 13px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  flex: 1 !important;
  font-family: inherit !important;
}

/* Mode noir : prio button[data-active] surface override */
html[data-theme="noir"] body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-prio button[data-active="true"] {
  background: var(--surface-2, #1c1e24) !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1265] FIX STATUS BAR : adouci #0f1115 (au lieu de #000 pur)
   
   pwa-mobile.css contient :
     html[data-theme="noir"] #pwa-root, body[data-theme="noir"] #pwa-root { background:#000 }
     html[data-theme="noir"] body.is-mobile.pwa-active { background:#000 }
     html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root { background:#000 !important }
   
   Ces règles écrasent le script inline du <head> qui mettait body.bg = #0f1115.
   D'où la zone safe-area (status bar) qui restait noir pur visuellement.
   
   Override avec specificity élevée + !important.
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="noir"] body,
html[data-theme="noir"] body.is-mobile,
html[data-theme="noir"] body.is-mobile.pwa-active,
html[data-theme="noir"] #pwa-root,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root,
html[data-theme="noir"] body.is-mobile.pwa-active > #pwa-root {
  background: #0f1115 !important;
}

/* iOS safe-area top zone (status bar) — couleur via les ::before des overlays */
html[data-theme="noir"] #pwa-tasks-overlay::before,
html[data-theme="noir"] #pwa-compta-overlay::before,
html[data-theme="noir"] #pwa-settings-overlay::before,
html[data-theme="noir"] #pwa-documents-overlay::before,
html[data-theme="noir"] #pwa-outils-overlay::before {
  background: #0f1115 !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1266] Fixes Anthony : (1) états actifs visibles chips/prio, 
   (2) header pattern Annuler/Title/Enregistrer comme cr-overlay,
   (3) animation slide-down au close.
   ══════════════════════════════════════════════════════════════════ */

/* === Header pattern Annuler / Title / Enregistrer === */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-cancel-top {
  background: none !important;
  border: 0 !important;
  color: var(--accent, #8b7bff) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  padding: 6px 4px !important;
  flex-shrink: 0 !important;
  font-family: inherit !important;
  text-align: left !important;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-save-top {
  background: var(--text) !important;
  color: var(--surface) !important;
  border: 0 !important;
  border-radius: 99px !important;
  padding: 7px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  font-family: inherit !important;
  -webkit-tap-highlight-color: transparent;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-save-top:active {
  opacity: .7;
}

body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-save-top:disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
}

/* Header dimensions */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-head {
  padding: 6px 12px 14px !important;
}

/* ══════════════════════════════════════════════════════════════════
   [v1267] Fix CSS active states : le JS utilise classList.toggle('active', ...)
   pas data-active="true". Mes selecteurs v1266 ciblaient le mauvais attribut.
   ══════════════════════════════════════════════════════════════════ */

/* === CHIPS échéance — état actif === */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-chips .shortcut.active {
  background: var(--text) !important;
  color: var(--surface) !important;
  border-color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-weight: 600 !important;
}

html[data-theme="noir"] body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-chips .shortcut.active {
  background: var(--accent, #8b7bff) !important;
  color: #fff !important;
  border-color: var(--accent, #8b7bff) !important;
}

/* === PRIORITÉ — état actif === */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-prio button.active {
  background: var(--surface) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 1.5px var(--text) !important;
  color: var(--text) !important;
}

html[data-theme="noir"] body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-prio button.active {
  background: var(--s3, #23262d) !important;
  box-shadow: 0 0 0 1.5px var(--accent, #8b7bff) !important;
  color: var(--text) !important;
}

/* === [v1267] Padding bottom modal body === */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-body {
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 32px) !important;
}

EOF
echo "✅ Fix CSS .active + padding bottom"
true

/* Priority dots plus gros et visibles */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .pdot {
  width: 10px !important;
  height: 10px !important;
}

/* Bouton supprimer dans body */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-del-btn {
  width: 100% !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #ec4767 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  margin-top: 4px !important;
}

/* Animation slide-down au close (override transition par défaut) */
body.is-mobile.pwa-active #task-modal-overlay.tm-v2 .tm-v2-sheet {
  transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1269] Fixes Anthony PWA bugs 110/112/114/115
   ══════════════════════════════════════════════════════════════════ */

/* === Bug 114 : bottom caché derrière la navbar sur vue Agenda Liste === */
.pwa-root [data-view="agenda"] #pwa-agenda-liste-inner {
  /* Padding bottom = navbar height (~64px) + safe-area + buffer */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
}

/* Idem sur les autres vues agenda (semaine/jour/mois) au cas où */
.pwa-root [data-view="agenda"] #agenda-semaine,
.pwa-root [data-view="agenda"] #agenda-jour,
.pwa-root [data-view="agenda"] #agenda-mois {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important;
}

/* === Bug 115 : Fiche bien — badge exclu par-dessus le bouton favoris === */
/* La règle .g-status v1227 ligne 5222 met position:absolute + top:14px + right:14px
   ce qui sort le badge du flow flex .g-topright et le superpose au bouton favoris.
   Override avec !important pour le forcer dans le flow flex. */
.pwa-root .fb-gallery .g-topright .g-status {
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
}

/* Remonter les boutons + badge plus haut sur l'image (Anthony : "il faut remonter") */
.pwa-root .fb-gallery .g-topright {
  top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
}

.pwa-root .fb-gallery .g-back {
  top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1270] Panel Notifications PWA
   ══════════════════════════════════════════════════════════════════ */
body.is-mobile.pwa-active #pwa-notifs-sheet .pwa-notifs-row:active {
  background: color-mix(in srgb, var(--text) 5%, transparent) !important;
}

/* Whitelist bypass pour le sheet notifs */
body.is-mobile.pwa-active > #pwa-notifs-sheet,
body.is-mobile.pwa-active > #pwa-notifs-bd {
  display: flex !important;
}

body.is-mobile.pwa-active > #pwa-notifs-bd {
  display: block !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1271 - bug 113] Modal "Nouvel événement" refondu Margot V2
   
   Anthony : "le modal de création a un problème d'UI niveau des champs"
   
   Problème : .cr-field avait grid-template-columns 120px/1fr → labels énormes
   à gauche (TITRE *, DATE *, CONTEXTE/OBJECTIF, MEMBRES DE VOTRE ÉQUIPE qui
   wrappait sur 3 lignes, PAR EMAIL etc.). 
   
   Solution : pattern Margot V2 = label CAPS SMALL au-dessus + input full-width.
   ══════════════════════════════════════════════════════════════════ */

/* === Override .cr-field pour stack vertical label/input === */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-field {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  min-height: 0 !important;
}

/* === Label CAPS small (Margot V2 pattern) === */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-field .f-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Étoile required plus discrète */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-field .f-lbl .req {
  font-size: 13px;
  margin-left: 2px;
}

/* === Input/textarea full-width align gauche === */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-field .f-input {
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  background: var(--bg, #f7f8fa) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  width: 100% !important;
  color: var(--text) !important;
}

body.is-mobile.pwa-active #pwa-cr-overlay .cr-field textarea.f-input {
  min-height: 80px !important;
  resize: vertical !important;
}

/* === Row 2 (date + heure) en grid 1fr/110px === */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-row2 {
  display: grid !important;
  grid-template-columns: 1fr 110px !important;
  gap: 8px !important;
  padding: 0 14px 10px !important;
  border-bottom: 1px solid var(--border) !important;
}

body.is-mobile.pwa-active #pwa-cr-overlay .cr-row2 .cr-field {
  padding: 0 !important;
  border-bottom: 0 !important;
}

/* === Type pills (Libre/Visite/R1/R2/Compromis/Acte + Appart./Maison/Terrain...) === */
/* [v1287] Anthony : "les badge de sélections sont beaucoup trop gros". Avant : padding 10/8,
   font 14px, border-radius 99px (full pill), box-shadow sur active → balloony, écrasait
   visuellement les inputs autour ("trop condensé"). Après : iOS Settings style, padding
   7/6, font 13px, border-radius 10px (square-ish), no shadow → chips compacts qui laissent
   respirer le form. Les autres chip groups (.cr-pill par défaut ligne 11253) sont déjà fins. */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-pills[data-cr-group="type"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  padding: 4px 0 !important;
  width: 100% !important;
}

body.is-mobile.pwa-active #pwa-cr-overlay .cr-pills[data-cr-group="type"] .cr-pill {
  border: 1px solid var(--border) !important;
  background: var(--bg, #f7f8fa) !important;
  color: var(--text) !important;
  padding: 7px 6px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: center !important;
  letter-spacing: -.1px;
  -webkit-tap-highlight-color: transparent;
}

body.is-mobile.pwa-active #pwa-cr-overlay .cr-pills[data-cr-group="type"] .cr-pill.active {
  background: var(--text) !important;
  color: var(--surface) !important;
  border-color: var(--text) !important;
  font-weight: 600 !important;
  /* [v1287] box-shadow retiré : trop de poids visuel sur chip déjà filled */
}

html[data-theme="noir"] body.is-mobile.pwa-active #pwa-cr-overlay .cr-pills[data-cr-group="type"] .cr-pill.active {
  background: var(--accent, #8b7bff) !important;
  color: #fff !important;
  border-color: var(--accent, #8b7bff) !important;
}

/* === Section labels (Type d'événement / Détails / Note...) plus discrets === */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .s-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  padding: 16px 14px 8px !important;
  margin: 0 !important;
}

/* Sections : retire les bordures inutiles, garde le grouping naturel */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section {
  background: var(--surface) !important;
  border: 0 !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* === Bouton +Ajouter (invités externes) — style Margot V2 === */
body.is-mobile.pwa-active #pwa-cr-overlay #cr-externs-add-btn {
  background: var(--text) !important;
  color: var(--surface) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  margin-top: 8px !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1272] Re-fixes Anthony — bugs 113/114/115/116 round 2
   ══════════════════════════════════════════════════════════════════ */

/* === Bug 113 — re-refonte modal Nouvel événement ===
   Anthony : "toujours bug ui, croppé en partie et pas très ios native"
   Screen 1 montre :
   - section labels (DÉTAILS, BIEN À VISITER, NOTE) croppés en haut → overflow:hidden des sections cards clipe les labels
   - HEURE 08:00 cropé à droite → le grid 1fr/110px déborde dans la section card overflow:hidden
   
   Solution iOS Settings : section labels FLOTTANTS hors des cards (au-dessus),
   cards avec radius mais SANS clipping qui mange le contenu.
*/

/* Section : retire overflow:hidden et background (les labels sortent maintenant) */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

/* Section label : style iOS settings — caps petits, sit ABOVE the card */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .s-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  padding: 18px 18px 8px !important;
  margin: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* Group des cr-field d'une section : wrap dans une "card" via le premier field */
/* Trick : on stylise les cr-field eux-mêmes en card-row (radius haut/bas selon position) */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .cr-field {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  border-bottom-width: 0 !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Premier cr-field : radius top */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .cr-field:first-of-type {
  border-radius: 12px 12px 0 0 !important;
}

/* Dernier cr-field (avant éventuel .cr-row2) : radius bot */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .cr-field:last-of-type {
  border-radius: 0 0 12px 12px !important;
  border-bottom-width: 1px !important;
}

/* Seul cr-field de la section : radius all */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .cr-field:only-of-type {
  border-radius: 12px !important;
  border-bottom-width: 1px !important;
}

/* === HEURE 08:00 crop — la .cr-row2 doit aussi être en card avec son propre padding === */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-row2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;  /* 1fr/1fr au lieu de 1fr/110px qui débordait */
  gap: 8px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top-width: 0 !important;
  border-radius: 0 0 12px 12px !important;
  overflow: visible !important;
}

/* Quand .cr-row2 vient après un cr-field, ce dernier perd son radius-bot */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .cr-field:has(+ .cr-row2),
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .cr-field:nth-last-of-type(2) {
  border-radius: 12px 12px 0 0 !important;
  border-bottom-width: 0 !important;
}

/* Si row2 est l'ultime élément, son radius-bot est appliqué (déjà fait ci-dessus) */
/* Si row2 est suivie de qqch, retire le radius-bot */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-row2:not(:last-child) {
  border-radius: 0 !important;
}

/* Fields à l'intérieur de .cr-row2 : pas de bg/border supplémentaire */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-row2 .cr-field {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* === Bug 114 — filter sheet bottom caché derrière navbar ===
   [v1323] DÉSACTIVÉ — cette règle était la VRAIE cause des bugs Agenda :
   `padding-bottom: 32px + safe-area !important` appliqué à #pwa-agd-filter-sheet
   ET à TOUS ses enfants directs > div. Ça poussait .fsh-handle (5px → 71px box
   avec background-clip:padding-box → gros pavé gris vertical), .fsh-head,
   .fsh-scroll, et surtout .fsh-footer (footer pas où il devait être).
   Le bug 114 original (Anthony v1236) était : footer caché derrière la navbar.
   Aujourd'hui v1318 hide la tabbar quand un sheet est open, donc ce fix
   compensatoire n'a plus de raison d'exister et causait plus de bugs qu'il
   n'en réglait. RULE SUPPRIMÉE. */

/* === Bug 115 — descendre le badge exclu + boutons fav ===
   Anthony v1271 : "faut descendre de qq pixels pour créer du padding"
   J'avais mis safe-area + 4px (trop haut), Anthony veut + bas.
*/
.pwa-root .fb-gallery .g-topright,
.pwa-root .fb-gallery .g-back {
  top: calc(env(safe-area-inset-top, 0px) + 20px) !important;  /* 4px → 20px */
}

/* Augmente specificity au cas où d'autres règles override .g-status absolute */
body.is-mobile.pwa-active .pwa-root .fb-gallery .g-topright .g-status,
.pwa-root #pwa-fb-overlay .fb-gallery .g-topright .g-status,
#pwa-fb-overlay .fb-gallery .g-topright #pwa-fb-status-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 0 !important;
}

/* === Active state pour les notif rows === */
body.is-mobile.pwa-active #pwa-notifs-sheet .pwa-notifs-row:active {
  background: color-mix(in srgb, var(--text) 6%, transparent) !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1273] Panel Notifications PWA — réutilise les styles .tk-* de la 
   page Tâches (#pwa-tasks-overlay) sur le sheet notifs (#pwa-notifs-sheet)
   pour avoir UI EXACTEMENT identique. Anthony : "l'UI doit être le MÊME 
   que les taches"
   ══════════════════════════════════════════════════════════════════ */

/* Hérite tous les styles .tk-* de la page Tâches */
#pwa-notifs-sheet .tk-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 4px 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

#pwa-notifs-sheet .tk-divider .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

#pwa-notifs-sheet .tk-divider .cnt {
  margin-left: auto;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}

html[data-theme="noir"] #pwa-notifs-sheet .tk-divider .cnt {
  background: color-mix(in srgb, #fff 10%, transparent);
}

#pwa-notifs-sheet .tk-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms ease-out;
  border-radius: 0;
}

#pwa-notifs-sheet .tk-item:first-of-type {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

#pwa-notifs-sheet .tk-item:last-of-type {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-width: 0;
}

#pwa-notifs-sheet .tk-item:active {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}

#pwa-notifs-sheet .tk-item.urgent {
  border-left: 3px solid var(--chaud, #d64560);
}

#pwa-notifs-sheet .tk-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.8px solid color-mix(in srgb, var(--text) 25%, transparent);
  background: transparent;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 150ms ease;
}

#pwa-notifs-sheet .tk-check:active {
  transform: scale(0.92);
}

#pwa-notifs-sheet .tk-check.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

#pwa-notifs-sheet .tk-check svg {
  pointer-events: none;
}

#pwa-notifs-sheet .tk-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#pwa-notifs-sheet .tk-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  line-height: 1.3;
  min-width: 0;
}

#pwa-notifs-sheet .tk-title-txt {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pwa-notifs-sheet .tk-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  min-width: 0;
}

#pwa-notifs-sheet .tk-link-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

#pwa-notifs-sheet .tk-prio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

#pwa-notifs-sheet .tk-time {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -.2px;
  flex-shrink: 0;
}

#pwa-notifs-sheet .tk-time.overdue {
  color: var(--chaud, #d64560);
}

#pwa-notifs-sheet .tk-donna-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Groupes : wrap card-like comme dans la page Tâches */
#pwa-notifs-sheet .pwa-tasks-scroll-like > .tk-item {
  margin: 0;
}

/* === Whitelist bypass — sheet/bd doivent être display:flex/block === */
body.is-mobile.pwa-active > #pwa-notifs-sheet {
  display: flex !important;
}

body.is-mobile.pwa-active > #pwa-notifs-bd {
  display: block !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1274] Panel Notifications : VERSION COMPACTE
   Anthony : "Pas assez compact et il faut que ça s'affiche en plus grand sur l'écran"
   
   Solutions :
   - Sheet height: 92vh (s'ouvre quasi plein écran)
   - Rows compactes : padding 8/10 au lieu de 12/14
   - Temps "Il y a Nj" inline dans la meta (sur même ligne) au lieu de en dessous + côté gauche
   - Title font 14px au lieu de 14.5px
   - Meta gap réduit
   ══════════════════════════════════════════════════════════════════ */

#pwa-notifs-sheet .tk-divider {
  padding: 10px 4px 6px !important;
  font-size: 10.5px !important;
}

#pwa-notifs-sheet .tk-item {
  padding: 10px 12px !important;
  gap: 10px !important;
  border-radius: 0 !important;
  /* retire la barre verticale de gauche */
  border-left: 0 !important;
  /* [v1275] FIX align à droite : 4 colonnes (check / main / donna-badge optional / time)
     au lieu de 3 (auto 1fr auto) qui faisait passer le time à la ligne suivante quand DONNA badge présent.
     'auto' colonnes prennent la taille de leur contenu, 1fr prend le reste. */
  grid-template-columns: auto 1fr auto auto !important;
  align-items: center !important;
  /* [v1276] Anthony : "agrandis un peu la hauteur de chacune des row, elle doit etre fixe pour chaque notif" */
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Le first/last du group garde son radius */
#pwa-notifs-sheet .tk-item:first-of-type {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

#pwa-notifs-sheet .tk-item:last-of-type {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Title plus compact */
#pwa-notifs-sheet .tk-title {
  font-size: 14px !important;
  line-height: 1.25 !important;
  gap: 5px !important;
}

#pwa-notifs-sheet .tk-main {
  gap: 2px !important;
}

#pwa-notifs-sheet .tk-meta {
  font-size: 12px !important;
  gap: 5px !important;
}

/* Avatar pill plus petit pour gagner du compact */
#pwa-notifs-sheet .tk-link-av {
  width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
}

/* Time : plus petit */
#pwa-notifs-sheet .tk-time {
  font-size: 11.5px !important;
}

/* Donna badge plus petit */
#pwa-notifs-sheet .tk-donna-badge {
  font-size: 9px !important;
  padding: 1px 6px !important;
}

/* Body : padding latéral réduit, plus de gap entre groupes */
#pwa-notifs-sheet .pwa-notifs-body {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Header sheet plus compact (moins de padding bas) */
#pwa-notifs-sheet .pwa-notifs-head {
  padding-bottom: 10px !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1277] Quand le panel notifs (z-index 100101) est ouvert, les fiches
   task-read / event-read doivent passer AU-DESSUS pour qu'on les voit.
   
   Anthony : "quand on ouvre une notif, genre une tache, ça doit venir 
   par dessus le pannel notif, ça doit pas le fermer puis ouvrir la tache"
   ══════════════════════════════════════════════════════════════════ */
#pwa-event-read-overlay,
#task-read-overlay {
  z-index: 100200 !important;  /* > 100101 du panel notifs */
}



/* ══════════════════════════════════════════════════════════════════
   [v1278] Section Agenda d'Aujourd'hui : events passés rayés + dot 
   vert animé sur l'event en cours / prochain.
   
   Anthony : "Sur aujourd'hui, section agenda, il faut rayer les évents
   passés et mettre un petit point vert animé à côté du prochain / celui
   en cours"
   ══════════════════════════════════════════════════════════════════ */

/* Event passé : titre rayé + opacité réduite */
.pwa-root [data-view="aujourdhui"] .agd-event.is-past .title {
  text-decoration: line-through;
  color: var(--muted) !important;
  text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent);
}

.pwa-root [data-view="aujourdhui"] .agd-event.is-past {
  opacity: 0.55;
}

.pwa-root [data-view="aujourdhui"] .agd-event.is-past .time,
.pwa-root [data-view="aujourdhui"] .agd-event.is-past .sub {
  color: var(--muted) !important;
}

/* Body relative pour positionner le dot */
.pwa-root [data-view="aujourdhui"] .agd-event .body {
  position: relative;
}

/* Le dot vert animé (pulse) à côté du title */
.pwa-root [data-view="aujourdhui"] .agd-event-livedot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e; /* green-500 */
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: pwaLiveDotPulse 1.6s infinite ease-out;
}

/* Dot "en cours" : pulse normal (vert vif) */
.pwa-root [data-view="aujourdhui"] .agd-event.is-now .agd-event-livedot {
  background: #22c55e;
  animation: pwaLiveDotPulse 1.4s infinite ease-out;
}

/* Dot "prochain" : pulse plus doux (vert un peu plus pâle) */
.pwa-root [data-view="aujourdhui"] .agd-event.is-next .agd-event-livedot {
  background: #22c55e;
  animation: pwaLiveDotPulse 2.2s infinite ease-out;
}

@keyframes pwaLiveDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    transform: scale(1.08);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    transform: scale(1);
  }
}

/* Le title inline-flex pour aligner le dot proprement avec le texte */
.pwa-root [data-view="aujourdhui"] .agd-event.is-now .title,
.pwa-root [data-view="aujourdhui"] .agd-event.is-next .title {
  display: inline;
}



/* ══════════════════════════════════════════════════════════════════
   [v1279] FICHE BIEN — refonte propre top-right + bottom bar
   
   Anthony : "Sur fiche bien, les boutons en haut à droite sont toujours
   superposés + y'a un gap bancal sur les deux boutons du bottom"
   
   PROBLÈME 1 (top-right) : malgré 3 selectors compounds avec !important
   en v1272, le badge .g-status est toujours superposé sur ♥. Hypothèse :
   le badge .fb-status-pill enfant a un display ou la largeur dépasse, ou
   le .g-topright lui-même est défaillant.
   
   SOLUTION : tout simplement repenser le layout du .g-topright en grid
   2-cols (badge | bouton) avec gap, et le .g-status devient un wrapper
   neutre (display contents). Plus aucun risque de superposition.
   
   PROBLÈME 2 (bottom) : gap symétrique entre les 3 boutons.
   ══════════════════════════════════════════════════════════════════ */

/* === g-topright : refonte clean === */
/* Remet le .g-topright en flex row, mais avec une garantie sur le layout */
body.is-mobile.pwa-active .pwa-root .fb-gallery .g-topright,
.pwa-root #pwa-fb-overlay .fb-gallery .g-topright {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  right: calc(env(safe-area-inset-right, 0px) + 14px) !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 10 !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;  /* évite débordement écran */
}

/* === g-status : wrapper neutre dans le flex === */
/* Au lieu de battre position:absolute avec !important, on transforme 
   le wrapper en flex item simple */
body.is-mobile.pwa-active .pwa-root .fb-gallery .g-topright .g-status,
.pwa-root #pwa-fb-overlay .fb-gallery .g-topright .g-status,
#pwa-fb-overlay .fb-gallery .g-topright #pwa-fb-status-badge {
  position: relative !important;  /* pas static (qui pouvait être bypassé), relative force aussi le flow */
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* === Le pill à l'intérieur : truncate si dépasse === */
.pwa-root .fb-gallery .g-topright .g-status .fb-status-pill {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* === Bottom bar : gap symétrique 8px → 10px + centrage === */
body.is-mobile.pwa-active .pwa-root .fb-bottom-bar {
  gap: 10px !important;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  align-items: stretch !important;
}

/* Les 2 boutons principaux (Modifier + Partager PDF) ont la même largeur via flex:1 */
body.is-mobile.pwa-active .pwa-root .fb-bb-btn.secondary,
body.is-mobile.pwa-active .pwa-root .fb-bb-btn.primary {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Le kebab : width fixe 44px, pas de flex */
body.is-mobile.pwa-active .pwa-root .fb-bb-btn.icon-only {
  flex: 0 0 44px !important;
  width: 44px !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1282] Anthony refonte fiche bien après 5 tentatives badge top-right :
   - Badge "Exclusif" déplacé À DROITE DU PRIX (h-status dans h-price-row)
   - Bouton retour en BLANC (au lieu de noir 45% v1227)
   - Bottom bar VRAIMENT collée au bottom sur iPhone (zéro gap)
   - .g-topright ne contient plus que le bouton favoris
   ══════════════════════════════════════════════════════════════════ */

/* === BOUTON RETOUR EN BLANC === */
body.is-mobile.pwa-active .pwa-root .fb-gallery .g-back,
.pwa-root #pwa-fb-overlay .fb-gallery .g-back {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #14161f !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  width: 36px !important;
  height: 36px !important;
  /* [v1283] safe-area-inset-left pour respecter la zone encoche/notch iPhone */
  left: calc(env(safe-area-inset-left, 0px) + 14px) !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
}

/* === Le svg du back en couleur foncée === */
body.is-mobile.pwa-active .pwa-root .fb-gallery .g-back svg,
.pwa-root #pwa-fb-overlay .fb-gallery .g-back svg {
  stroke: #14161f !important;
  color: #14161f !important;
}

/* === BADGE déplacé : nouveau style h-status (dans la ligne prix) === */
.pwa-root #pwa-fb-overlay .h-price-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.pwa-root #pwa-fb-overlay .h-status {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;  /* pousse à droite */
}

/* Le pill enfant garde son style mais maintenant align à droite */
.pwa-root #pwa-fb-overlay .h-status .fb-status-pill {
  white-space: nowrap;
  height: 24px;
}

/* === BOTTOM BAR vraiment collée bottom iPhone ===
   Le sticky avec position: absolute peut avoir un gap si le scroll container
   a son padding-bottom. Force avec position: fixed sur l'overlay (fb-overlay
   est lui-même fixed plein écran). */
body.is-mobile.pwa-active .pwa-root .fb-bottom-bar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 12px 14px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  z-index: 100 !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1285] Safety : .td-drawer ne doit JAMAIS s'afficher sur desktop
   Anthony : "sur desktop, y'a le drawer qui s'affiche"
   La règle existante body:not(.pwa-active) > .td-drawer ne match que les
   enfants directs du body. Si le drawer est injecté ailleurs, il s'affiche.
   Override avec selector sans `>` pour catch tout.
   ══════════════════════════════════════════════════════════════════ */
body:not(.is-mobile) .td-drawer,
body:not(.is-mobile) .td-drawer-backdrop,
body:not(.pwa-active) .td-drawer,
body:not(.pwa-active) .td-drawer-backdrop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* ══════════════════════════════════════════════════════════════════
   [v1289] Modal "Nouveau X" — padding partout + bottom actions 2-col
   
   Anthony : "regarde l'UI, ils sont trop collé, ça se chevauche, mets du
   padding partout pour que ce soit agréable à l'œil. Aussi, les deux actions
   donna coller / voice, mets les au bottom côte à côte (comme si ils étaient
   sur deux colonnes)"
   
   Changements :
   - .cr-field padding 12/16 → 14/16, gap label/input 6 → 8
   - .cr-row2 padding 12/16 → 14/16, gap entre colonnes 8 → 12
   - .cr-section margin-bottom 8 → 14 (plus d'air entre sections)
   - .cr-section .s-lbl padding 18/18/8 → 22/18/10 (label section plus aéré)
   - .cr-field .f-input padding 10/12 → 12/14 (inputs respirent)
   - .cr-topbar padding-bottom +4 (anti-overlap avec premier field)
   - Nouveau : .cr-actions-row grid 2-col + .cr-action-btn (Coller + Voice côte à côte)
   ══════════════════════════════════════════════════════════════════ */

/* Padding fields plus généreux */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .cr-field {
  padding: 14px 16px !important;
  gap: 8px !important;
}

/* Padding row2 + gap horizontal entre les 2 colonnes */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-row2 {
  padding: 14px 16px !important;
  gap: 12px !important;
}

/* Plus d'air entre sections */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section {
  margin: 0 0 14px !important;
}

/* Section label plus aéré (top + bot) */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section .s-lbl {
  padding: 22px 18px 10px !important;
}

/* Première section : padding-top plus court (déjà à 22 sinon ça fait trop de gap après le topbar) */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section:first-of-type .s-lbl {
  padding-top: 14px !important;
}

/* Inputs avec plus de hauteur tactile (iOS standard ~44px tap target) */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-field .f-input,
body.is-mobile.pwa-active #pwa-cr-overlay .cr-row2 .cr-field .f-input {
  padding: 12px 14px !important;
}

/* === Bottom actions bar : 2-col grid [Coller | Voice] === */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-voice-bar {
  padding: 12px 14px max(env(safe-area-inset-bottom, 12px), 14px) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-top: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}

/* Prompt text au-dessus des boutons : petit hint italique centré */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-actions-prompt {
  font-size: 12px !important;
  color: var(--muted) !important;
  text-align: center !important;
  margin: 0 0 10px 0 !important;
  font-style: italic !important;
  padding: 0 8px !important;
  line-height: 1.3 !important;
}

/* Grid 2 colonnes égales (Coller à gauche, Voice à droite) */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

/* Boutons Coller + Voice : style iOS native, height tactile ~46px */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 12px !important;
  background: var(--bg, #f7f8fa) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, background .15s;
}

body.is-mobile.pwa-active #pwa-cr-overlay .cr-action-btn:active {
  transform: scale(0.97);
}

/* Bouton Voice = filled accent (call-to-action principal) */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-action-voice {
  background: var(--text, #14161f) !important;
  color: var(--surface, #fff) !important;
  border-color: var(--text) !important;
}

/* Bouton Coller = outline (action secondaire) */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-action-paste {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Icon dimensions consistantes */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-action-ico {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Label du bouton */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-action-lbl {
  letter-spacing: -.1px;
}

/* Dark mode : Voice button rest filled accent, Coller button surface dark */
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-cr-overlay .cr-action-voice {
  background: var(--accent, #8b7bff) !important;
  color: #fff !important;
  border-color: var(--accent, #8b7bff) !important;
}

html[data-theme="noir"] body.is-mobile.pwa-active #pwa-cr-overlay .cr-action-paste {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1290] ADOPTION DS MARGOT — iOS Settings inset-grouped pattern
   
   Anthony : "T'as l'impression que ce que t'as fait ça ressemble aux mockup
   de margot ? Ce que t'as fait c'est : DEGUELASSE. Alors t'as intérêt sur le
   prochain push à ce que ça fit avec ces putain de mockups."
   
   Adopte les classes .ml-* directement portées de v2-screens.css du export
   Margot (donna.zip). Scope strict #pwa-cr-overlay + body.is-mobile.pwa-active.
   
   Pattern key : .ml-field = grid 120px/1fr, label normal-case gauche + input
   transparent right-aligned, separator entre rows à l'intérieur de la card
   .ml-section (rounded surface bg, margin 0 14px 6px).
   ══════════════════════════════════════════════════════════════════ */

/* === Body : tinted bg pour faire ressortir les cards .ml-section === */
body.is-mobile.pwa-active #pwa-cr-overlay .body-x {
  background: var(--bg) !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .body-x > .scroll {
  padding: 16px 0 28px !important;
}

/* === Topbar : Cancel accent / titre center / Save accent === */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-topbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  height: 52px !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .cr-topbar .cancel {
  background: transparent !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--accent) !important;
  padding: 4px 0 !important;
  text-align: left !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .cr-topbar .ttl {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: -.2px !important;
  color: var(--text) !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .cr-topbar .cr-save-top {
  background: transparent !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  padding: 4px 0 !important;
  text-align: right !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .cr-topbar .cr-save-top:disabled,
body.is-mobile.pwa-active #pwa-cr-overlay .cr-topbar .cr-save-top.disabled {
  color: var(--muted) !important;
  pointer-events: none !important;
}

/* === Section : card arrondie sur fond bg tinted === */
body.is-mobile.pwa-active #pwa-cr-overlay .ml-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  padding: 0 24px 6px !important;
  margin: 0 !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-section-label:not(:first-child) {
  padding-top: 22px !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  margin: 0 14px 6px !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-section-footer {
  font-size: 11px !important;
  color: var(--text-dim, var(--muted)) !important;
  padding: 6px 24px 16px !important;
  line-height: 1.45 !important;
}

/* === Field row : iOS Settings inset, label gauche / input droit === */
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  min-height: 44px !important;
  background: transparent !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field.last {
  border-bottom: 0 !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field.row {
  grid-template-columns: auto 1fr !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field label .req {
  color: var(--chaud, #ef4444) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-left: 0 !important;
}

/* === Input transparent right-aligned dans le row === */
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input input {
  font-family: inherit !important;
  font-size: 15px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
  width: 100% !important;
  min-width: 0 !important;
  outline: none !important;
  text-align: right !important;
  font-weight: 500 !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input input::placeholder {
  color: var(--muted) !important;
  font-weight: 400 !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input .suffix {
  font-size: 13px !important;
  color: var(--text-dim, var(--muted)) !important;
  flex-shrink: 0 !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input .placeholder {
  color: var(--muted) !important;
  font-size: 15px !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input > span:not(.suffix):not(.placeholder) {
  font-size: 15px !important;
  color: var(--text) !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input svg.chev {
  width: 14px !important;
  height: 14px !important;
  color: var(--muted) !important;
  flex-shrink: 0 !important;
}

/* === Textarea : label CAPS au-dessus, input full-width === */
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field:has(textarea) {
  grid-template-columns: 1fr !important;
  align-items: flex-start !important;
  padding: 12px 14px !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field:has(textarea) label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field:has(textarea) label:empty {
  display: none !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field:has(textarea) .ml-field-input {
  width: 100% !important;
  justify-content: flex-start !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input textarea {
  font-family: inherit !important;
  font-size: 15px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
  width: 100% !important;
  min-width: 0 !important;
  outline: none !important;
  resize: none !important;
  text-align: left !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input textarea::placeholder {
  color: var(--muted) !important;
}

/* === Segmented control inline (Type Acq/Vend/Both) === */
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field .m-segmented {
  display: inline-flex !important;
  padding: 3px !important;
  background: var(--s2, color-mix(in srgb, var(--text) 6%, transparent)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin-left: auto !important;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field .m-segmented button {
  height: 30px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-dim, var(--muted)) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field .m-segmented button.on {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
}

/* === Hide v1289 cr-* legacy styles in favor of ml-* — pas obligatoire mais propre === */
body.is-mobile.pwa-active #pwa-cr-overlay .cr-section.ml-section-wrap {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
}

/* === Dark mode adjustments === */
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-cr-overlay .ml-section {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-cr-overlay .ml-field .m-segmented {
  background: rgba(255,255,255,.04) !important;
}
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-cr-overlay .ml-field .m-segmented button.on {
  background: var(--surface) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1291] TASK MODAL — adoption DS Margot iOS Settings
   
   Anthony : "bah voilà, c'était si compliqué que ça ? Maintenant tu me fais
   pareil pour le modal de création de tâches"
   
   Application du même pattern .ml-* que v1290 (modals client/bien/event) au
   #task-modal-overlay. Scope INCLUSIF desktop ET mobile (le modal de task
   s'ouvre sur les 2 plateformes via tasks-modal.js), donc selector sans
   body.is-mobile.pwa-active — juste #task-modal-overlay.
   
   Le tm-v2-sheet a sa propre largeur/position (bottom sheet sur mobile,
   modal centrée sur desktop, déjà géré par .modal-shell.tm-v2-sheet). On
   override seulement les fields/sections inside.
   ══════════════════════════════════════════════════════════════════ */

/* === Topbar : reuse styling Margot DS === */
#task-modal-overlay .modal-head.ml-topbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  height: 52px !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}
#task-modal-overlay .ml-cancel {
  background: transparent !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--accent) !important;
  padding: 4px 0 !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
#task-modal-overlay .ml-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: -.2px !important;
  color: var(--text) !important;
}
#task-modal-overlay .ml-save {
  background: transparent !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  padding: 4px 0 !important;
  text-align: right !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

/* === Body : tinted bg --bg pour faire ressortir les cards .ml-section === */
#task-modal-overlay .modal-body.ml-body {
  background: var(--bg) !important;
  padding: 16px 0 28px !important;
}

/* === Section card === */
#task-modal-overlay .ml-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  padding: 22px 24px 6px !important;
  margin: 0 !important;
}
#task-modal-overlay .ml-section-label:first-child {
  padding-top: 0 !important;
}
#task-modal-overlay .ml-section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  margin: 0 14px 6px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* === Title field (big prominent input, no label) === */
#task-modal-overlay .ml-task-title-field {
  padding: 14px 16px !important;
}
#task-modal-overlay .ml-task-title-field input {
  width: 100% !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
  outline: none !important;
}
#task-modal-overlay .ml-task-title-field input::placeholder {
  color: var(--muted) !important;
  font-weight: 500 !important;
}

/* === Field row iOS Settings === */
#task-modal-overlay .ml-field {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  min-height: 44px !important;
  background: transparent !important;
}
#task-modal-overlay .ml-field.last {
  border-bottom: 0 !important;
}
#task-modal-overlay .ml-field.row {
  grid-template-columns: auto 1fr !important;
}
#task-modal-overlay .ml-field label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#task-modal-overlay .ml-field-input {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
}
#task-modal-overlay .ml-field-input input {
  font-family: inherit !important;
  font-size: 15px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
  width: 100% !important;
  min-width: 0 !important;
  outline: none !important;
  text-align: right !important;
  font-weight: 500 !important;
}
#task-modal-overlay .ml-field-input input::placeholder {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

/* === Segmented control (shortcuts + priorité) === */
#task-modal-overlay .m-segmented {
  display: inline-flex !important;
  padding: 3px !important;
  background: var(--s2, color-mix(in srgb, var(--text) 6%, transparent)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin-left: auto !important;
}
#task-modal-overlay .m-segmented button {
  height: 30px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-dim, var(--muted)) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s;
  white-space: nowrap;
}
#task-modal-overlay .m-segmented button.on {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
}

/* Priorité avec dots colorés */
#task-modal-overlay .m-segmented button .pdot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
#task-modal-overlay .m-segmented button .pdot.basse  { background: var(--green, #22c55e) !important; }
#task-modal-overlay .m-segmented button .pdot.normale { background: var(--accent, #8b7bff) !important; }
#task-modal-overlay .m-segmented button .pdot.haute  { background: var(--chaud, #ef4444) !important; }

/* Shortcut row : wrap si trop large */
#task-modal-overlay .m-segmented.tm-shortcuts {
  flex-wrap: wrap !important;
}

/* === Section "Lié à" : tm-ctx-card / tm-ctx-empty stylisés DS === */
#task-modal-overlay .tm-ctx-card,
#task-modal-overlay .tm-ctx-empty {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  cursor: pointer !important;
  font-family: inherit !important;
  color: var(--text) !important;
  text-align: left !important;
}
#task-modal-overlay .tm-ctx-empty:hover,
#task-modal-overlay .tm-ctx-card:hover {
  background: color-mix(in srgb, var(--text) 3%, transparent) !important;
}
#task-modal-overlay .tm-ctx-empty-icn,
#task-modal-overlay .tm-ctx-pill {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
#task-modal-overlay .tm-ctx-empty-icn {
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
  color: var(--accent) !important;
}
#task-modal-overlay .tm-ctx-pill {
  font-size: 12px !important;
  font-weight: 700 !important;
}
#task-modal-overlay .tm-ctx-pill.tm-ctx-acquereur { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; color: var(--accent) !important; }
#task-modal-overlay .tm-ctx-pill.tm-ctx-vendeur   { background: color-mix(in srgb, var(--tiede, #f59e0b) 14%, transparent) !important; color: var(--tiede, #f59e0b) !important; }
#task-modal-overlay .tm-ctx-pill.tm-ctx-bien      { background: color-mix(in srgb, var(--green, #22c55e) 14%, transparent) !important; color: var(--green, #22c55e) !important; }
#task-modal-overlay .tm-ctx-pill.tm-ctx-dossier   { background: color-mix(in srgb, var(--chaud, #ef4444) 14%, transparent) !important; color: var(--chaud, #ef4444) !important; }
#task-modal-overlay .tm-ctx-empty-lbl,
#task-modal-overlay .tm-ctx-text {
  flex: 1 !important;
  min-width: 0 !important;
}
#task-modal-overlay .tm-ctx-empty-lbl {
  font-size: 15px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}
#task-modal-overlay .tm-ctx-type {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
}
#task-modal-overlay .tm-ctx-label {
  font-size: 15px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#task-modal-overlay .tm-ctx-addr {
  color: var(--muted) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
#task-modal-overlay .tm-ctx-empty-arrow,
#task-modal-overlay .tm-ctx-change {
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  font-family: inherit !important;
  flex-shrink: 0 !important;
}
#task-modal-overlay .tm-ctx-change {
  color: var(--accent) !important;
  font-weight: 500 !important;
}

/* === Notes section "Ajouter une note" button === */
#task-modal-overlay .notes-toggle.tm-v2-notes-add {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 14px 14px !important;
  color: var(--accent) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  text-align: left !important;
}

/* === Bouton Supprimer (édition uniquement) === */
#task-modal-overlay .tm-v2-del-btn {
  width: 100% !important;
  background: color-mix(in srgb, var(--chaud, #ef4444) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--chaud, #ef4444) 25%, transparent) !important;
  color: var(--chaud, #ef4444) !important;
  padding: 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
#task-modal-overlay .tm-v2-del-btn:active {
  transform: scale(.98);
}

/* === Dark mode === */
html[data-theme="noir"] #task-modal-overlay .ml-section {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="noir"] #task-modal-overlay .m-segmented {
  background: rgba(255,255,255,.04) !important;
}
html[data-theme="noir"] #task-modal-overlay .m-segmented button.on {
  background: var(--surface) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1292] TASK MODAL — FROM SCRATCH PURE MARGOT
   
   Anthony screenshot v1291 : dashed borders partout (tm-ctx-empty, notes-toggle),
   bordure noire sur chip Normale (tm-v2-prio button.active), bordure sur title
   input. Cause : legacy classes tm-v2-* / tm-ctx-* avec leur CSS battaient mes
   overrides (specificity wars sur #task-modal-overlay.tm-v2).
   
   Anthony : "Ça va pas du tout, repars from scratch en utilisant les style de Margot"
   
   Fix radical : 
   - HTML rewrite total, ZÉRO class legacy (tm-v2/tm-ctx/notes-toggle/shortcut/...)
   - Class .tm-v2 retirée du root → tous les rules #task-modal-overlay.tm-v2 .* sont
     orphelins et ne match plus
   - Nouvelles classes propres .ml-pickable-* / .ml-shortcut-chip / .ml-overlay /
     .ml-shell / .ml-grab / .ml-add-action / .ml-del-btn / .ml-textarea-field
   ══════════════════════════════════════════════════════════════════ */

/* === Overlay (root) + shell (sheet) — bottom sheet iOS native === */
#task-modal-overlay.ml-overlay {
  background: rgba(0, 0, 0, .45) !important;
}
#task-modal-overlay .ml-shell {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-height: 92vh !important;
  background: var(--bg) !important;
  border-radius: 18px 18px 0 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .15);
}
#task-modal-overlay .ml-grab {
  width: 36px !important;
  height: 4px !important;
  background: var(--border) !important;
  border-radius: 2px !important;
  margin: 8px auto 0 !important;
  flex-shrink: 0 !important;
}

/* Desktop : modal centré au lieu de bottom sheet */
@media (min-width: 769px) {
  #task-modal-overlay .ml-shell {
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 480px !important;
    width: calc(100% - 32px) !important;
    max-height: 85vh !important;
    border-radius: 14px !important;
  }
  #task-modal-overlay .ml-grab { display: none !important; }
}

/* === Shortcuts row : pill chips clean, scroll horizontal mobile === */
#task-modal-overlay .ml-shortcuts-row {
  display: flex !important;
  gap: 6px !important;
  padding: 8px 14px 16px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#task-modal-overlay .ml-shortcuts-row::-webkit-scrollbar {
  display: none;
}
#task-modal-overlay .ml-shortcut-chip {
  flex-shrink: 0 !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-dim, var(--muted)) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s;
}
#task-modal-overlay .ml-shortcut-chip.on {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
  font-weight: 600 !important;
}

/* === Pickable row (état rempli) === */
#task-modal-overlay .ml-pickable-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#task-modal-overlay .ml-pickable-pill {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
#task-modal-overlay .ml-pickable-acquereur { background: color-mix(in srgb, var(--accent, #8b7bff) 14%, transparent) !important; color: var(--accent, #8b7bff) !important; }
#task-modal-overlay .ml-pickable-vendeur   { background: color-mix(in srgb, var(--tiede, #f59e0b) 14%, transparent) !important; color: var(--tiede, #f59e0b) !important; }
#task-modal-overlay .ml-pickable-bien      { background: color-mix(in srgb, var(--green, #22c55e) 14%, transparent) !important; color: var(--green, #22c55e) !important; }
#task-modal-overlay .ml-pickable-dossier   { background: color-mix(in srgb, var(--chaud, #ef4444) 14%, transparent) !important; color: var(--chaud, #ef4444) !important; }

#task-modal-overlay .ml-pickable-text {
  flex: 1 !important;
  min-width: 0 !important;
}
#task-modal-overlay .ml-pickable-eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}
#task-modal-overlay .ml-pickable-main {
  font-size: 15px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 1px !important;
}
#task-modal-overlay .ml-pickable-sub {
  color: var(--muted) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
}
#task-modal-overlay .ml-pickable-action {
  background: transparent !important;
  border: 0 !important;
  color: var(--accent) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  font-family: inherit !important;
}

/* === Pickable empty (état vide) === */
#task-modal-overlay .ml-pickable-empty {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  color: var(--text) !important;
  text-align: left !important;
}
#task-modal-overlay .ml-pickable-empty:hover {
  background: color-mix(in srgb, var(--text) 3%, transparent) !important;
}
#task-modal-overlay .ml-pickable-empty-icn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--accent, #8b7bff) 12%, transparent) !important;
  color: var(--accent, #8b7bff) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
#task-modal-overlay .ml-pickable-empty-lbl {
  flex: 1 !important;
  font-size: 15px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}
#task-modal-overlay .ml-pickable-empty .ml-chev,
#task-modal-overlay .ml-chev {
  color: var(--muted) !important;
  flex-shrink: 0 !important;
}

/* === Textarea field full-width inside ml-section === */
#task-modal-overlay .ml-textarea-field {
  grid-template-columns: 1fr !important;
  padding: 14px 14px !important;
  align-items: flex-start !important;
  border-bottom: 0 !important;
}
#task-modal-overlay .ml-textarea-field textarea {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  color: var(--text) !important;
  outline: none !important;
  resize: vertical !important;
  min-height: 80px !important;
  line-height: 1.45 !important;
}
#task-modal-overlay .ml-textarea-field textarea::placeholder {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

/* === Add-action button (Notes : "+ Ajouter une note") — clean accent text === */
#task-modal-overlay .ml-add-action {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 14px !important;
  color: var(--accent) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-align: left !important;
}

/* === Delete button (édition uniquement) — outline rouge === */
#task-modal-overlay .ml-del-wrap {
  padding: 22px 14px 14px !important;
}
#task-modal-overlay .ml-del-btn {
  width: 100% !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--chaud, #ef4444) 30%, transparent) !important;
  color: var(--chaud, #ef4444) !important;
  padding: 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
#task-modal-overlay .ml-del-btn:active {
  transform: scale(.98);
}

/* === Override v1291 specifics : title input avait l'air d'avoir bordure → assure-toi qu'il a 0 === */
#task-modal-overlay .ml-task-title-field input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* === Force aussi inputs dans ml-field-input : no border, no shadow (au cas où input{} générique applique) === */
#task-modal-overlay .ml-field-input input,
#task-modal-overlay .ml-field-input textarea {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* === Defeat legacy box-shadow ring on m-segmented button.on (le 1.5px var(--text) cause de la bordure noire) === */
#task-modal-overlay .m-segmented button.on {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04) !important;
}
#task-modal-overlay .m-segmented button {
  font-family: inherit !important;
}

/* === Dark mode === */
html[data-theme="noir"] #task-modal-overlay .ml-shell {
  background: var(--bg) !important;
}
html[data-theme="noir"] #task-modal-overlay .ml-shortcut-chip.on {
  background: var(--text) !important;
  color: var(--bg) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1293] TASK MODAL — patch additif pour matcher mockup donna__1_.zip
   
   Anthony : "tu sais pas ce qu'il y a faire, tu me sers à rien"
   
   Match exact ScrModalTask : DonnaSuggest top, 3 sections Échéance/Priorité/
   Lié à/Notes, drop shortcuts, prio labels Normal/Important/Urgent, 
   3 pickables Lié à (Client/Dossier/Type d'action), pickables Date/Heure/
   Rappel qui ouvrent des sheets.
   ══════════════════════════════════════════════════════════════════ */

/* === DonnaSuggest card (porté de v2-screens.css L1114-1149) === */
#task-modal-overlay .ml-donna {
  margin: 0 14px 18px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  background: color-mix(in srgb, var(--accent, #8b7bff) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #8b7bff) 22%, transparent) !important;
  border-radius: 14px !important;
}
#task-modal-overlay .ml-donna-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: #000 !important;
  border: 1px solid var(--accent, #8b7bff) !important;
  color: var(--accent, #8b7bff) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
#task-modal-overlay .ml-donna-body {
  min-width: 0 !important;
}
#task-modal-overlay .ml-donna-eyebrow {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: var(--accent, #8b7bff) !important;
  text-transform: uppercase !important;
}
#task-modal-overlay .ml-donna-text {
  font-size: 12px !important;
  color: var(--text) !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
}
#task-modal-overlay .ml-donna-action {
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #8b7bff) 35%, transparent) !important;
  color: var(--accent, #8b7bff) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  white-space: nowrap;
}

/* === Pickable rows : .ml-field.ml-clickable === */
#task-modal-overlay .ml-field.ml-clickable {
  cursor: pointer !important;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
#task-modal-overlay .ml-field.ml-clickable:active {
  background: color-mix(in srgb, var(--text) 4%, transparent) !important;
}

/* === Val (selected text in pickable, right-aligned) === */
#task-modal-overlay .ml-field-input .val {
  font-size: 15px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  text-align: right !important;
}
#task-modal-overlay .ml-field-input .placeholder {
  font-size: 15px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  text-align: right !important;
}

/* === Section footer (mockup: "donna lira ces notes au moment du rappel") === */
#task-modal-overlay .ml-section-footer {
  font-size: 11px !important;
  color: var(--text-dim, var(--muted)) !important;
  padding: 6px 24px 16px !important;
  line-height: 1.45 !important;
}

/* === Dark mode adjustments === */
html[data-theme="noir"] #task-modal-overlay .ml-donna {
  background: color-mix(in srgb, var(--accent, #8b7bff) 14%, transparent) !important;
}


/* ══════════════════════════════════════════════════════════════════
   [v1294] FIX boutons topbar + notes cropped
   
   Anthony : "les boutons en haut sont mal placés et la note en bas est croppe"
   
   Diag :
   - v1291 CSS topbar utilisait selector .modal-head.ml-topbar (2 classes)
     mais v1292 a drop .modal-head du markup → grid layout PAS appliqué.
   - v1291 CSS body utilisait .modal-body.ml-body → drop = pas de
     flex:1/overflow-y:auto/padding → contenu déborde du .ml-shell (overflow:hidden).
   
   Fix : single-class selectors override + safe-area padding bottom.
   ══════════════════════════════════════════════════════════════════ */

/* === Topbar grid layout (Annuler | Title | Save) === */
#task-modal-overlay .ml-topbar {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  height: 52px !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}

/* === Body : flex:1 + scroll + safe-area padding bottom === */
#task-modal-overlay .ml-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
  background: var(--bg) !important;
  padding: 16px 0 !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px) !important;
}

/* === .ml-shell : assure min-height suffisant + bottom safe-area sur l'enveloppe === */
#task-modal-overlay .ml-shell {
  min-height: 50vh !important;
  /* max-height déjà à 92vh dans v1292, gardé */
}

/* === Le grab (poignée iOS) ne doit pas être compressé === */
#task-modal-overlay .ml-grab {
  flex-shrink: 0 !important;
}

/* === Last section avant le bouton del / footer : padding-bottom suffisant === */
#task-modal-overlay .ml-body > .ml-section:last-of-type,
#task-modal-overlay .ml-body > .ml-section-footer:last-child {
  margin-bottom: 8px !important;
}

/* === Sur desktop, la modal centrée a pas besoin du safe-area === */
@media (min-width: 769px) {
  #task-modal-overlay .ml-body {
    padding-bottom: 24px !important;
  }
  #task-modal-overlay .ml-shell {
    min-height: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   [v1297] PWA Dossier vendeur modal — section Bien lié card + chips
   Scoped à #pwa-cr-overlay pour ne pas affecter desktop ou autres types.
   [v1302] Anthony : padding/margin alignés sur .ml-section (margin 0 14px 6px)
   pour que la card soit pas plus large que les autres champs.
   ════════════════════════════════════════════════════════════════════════ */
body.is-mobile.pwa-active #pwa-cr-overlay .ml-bien-lie-card {
  background: var(--s2);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 14px 18px;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-bien-lie-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-bien-lie-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-bien-lie-actions {
  display: flex;
  gap: 6px;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-bien-lie-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
body.is-mobile.pwa-active #pwa-cr-overlay .ml-bien-lie-btn.create {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════
   [v1301] Fix iOS zoom on focus (font-size < 16px déclenche zoom Safari iOS)
   + slide-up/down animation pour le pwa-cr-overlay (UX iOS native).
   ════════════════════════════════════════════════════════════════════════ */

/* Zoom fix : tous les inputs/textarea/select du modal cr-overlay à 16px min */
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input input,
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input textarea,
body.is-mobile.pwa-active #pwa-cr-overlay .ml-field-input select {
  font-size: 16px !important;
}

/* Slide-up animation à l'ouverture, slide-down à la fermeture.
   #pwa-cr-overlay reste affiché et c'est la .screen interne qui slide. */
#pwa-cr-overlay {
  transition: opacity .25s ease-out;
  opacity: 0;
  pointer-events: none;
}
#pwa-cr-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
#pwa-cr-overlay .screen {
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22, .85, .35, 1);
  will-change: transform;
}
#pwa-cr-overlay.open .screen {
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════════
   [v1303] PWA Today page — Brief donna horizontal rail (mockup Margot v3)
   Source : v2-screens.css L786-918 du mockup donna__3_.zip. Scope mobile-only.
   ════════════════════════════════════════════════════════════════════════ */

body.is-mobile.pwa-active .td-brief-rail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 8px;
}
body.is-mobile.pwa-active .td-brief-rail-logo {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #000;
  border: 1px solid var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--accent);
}
body.is-mobile.pwa-active .td-brief-rail-logo svg { width: 14px; height: 14px; }
body.is-mobile.pwa-active .td-brief-rail-eyebrow {
  font-family: ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .9px;
  color: var(--text-dim); text-transform: uppercase;
}
body.is-mobile.pwa-active .td-brief-rail-eyebrow b { color: var(--text); font-weight: 700; }
body.is-mobile.pwa-active .td-brief-rail-meta {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
body.is-mobile.pwa-active .td-brief-rail-play {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border-hi); cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
body.is-mobile.pwa-active .td-brief-rail-play svg { width: 9px; height: 9px; }

body.is-mobile.pwa-active .td-brief-rail {
  display: flex; gap: 8px;
  padding: 2px 14px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.is-mobile.pwa-active .td-brief-rail::-webkit-scrollbar { display: none; }

body.is-mobile.pwa-active .td-brief-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column;
  gap: 6px;
}
body.is-mobile.pwa-active .td-brief-card-head {
  display: flex; align-items: center; gap: 6px;
}
body.is-mobile.pwa-active .td-brief-card-num {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
body.is-mobile.pwa-active .td-brief-card.sev-chaud  .td-brief-card-num { color: var(--chaud); }
body.is-mobile.pwa-active .td-brief-card.sev-tiede  .td-brief-card-num { color: var(--tiede); }
body.is-mobile.pwa-active .td-brief-card.sev-froid  .td-brief-card-num { color: var(--froid); }
body.is-mobile.pwa-active .td-brief-card.sev-green  .td-brief-card-num { color: var(--green); }
body.is-mobile.pwa-active .td-brief-card.sev-accent .td-brief-card-num { color: var(--accent); }
body.is-mobile.pwa-active .td-brief-card-kicker {
  font-family: ui-monospace, monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--text-dim);
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.is-mobile.pwa-active .td-brief-card-body {
  font-size: 12.5px; color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.is-mobile.pwa-active .td-brief-card-body b { font-weight: 600; color: var(--text); }
body.is-mobile.pwa-active .td-brief-card-tags {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
body.is-mobile.pwa-active .td-brief-card-tag {
  display: inline-flex;
  padding: 1px 6px;
  font-family: ui-monospace, monospace; font-size: 9.5px;
  font-variant-numeric: tabular-nums; letter-spacing: .1px;
  color: var(--text-dim);
  background: var(--s2);
  border-radius: 4px;
}
body.is-mobile.pwa-active .td-brief-card-tag.primary {
  color: var(--text);
  background: var(--s2);
  font-weight: 600;
}
body.is-mobile.pwa-active .td-brief-card-tag.danger {
  color: var(--chaud);
  background: color-mix(in srgb, var(--chaud) 10%, transparent);
}

body.is-mobile.pwa-active .td-brief-rail-dots {
  display: flex; justify-content: center; gap: 4px;
  padding: 0 0 14px;
}
body.is-mobile.pwa-active .td-brief-rail-dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--border-hi);
  transition: all .2s;
}
body.is-mobile.pwa-active .td-brief-rail-dots span.on {
  background: var(--text);
  width: 12px; border-radius: 999px;
}

/* ════════════════════════════════════════════════════════════════════════
   [v1304] Bouton "Tout planifier" dans le head du rail brief + état isPlanned
   [v1305] Anthony: bouton repositionné à côté du titre (avant le meta), style
   noir/blanc au lieu de violet — inversion auto via var(--text)/var(--bg) qui
   change avec data-theme (light: bg noir+texte blanc, dark: bg blanc+texte noir).
   ════════════════════════════════════════════════════════════════════════ */

body.is-mobile.pwa-active .td-brief-rail-plan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px 0 7px;
  margin-left: 2px;
  border-radius: 11px;
  background: var(--text);
  color: var(--bg);
  border: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile.pwa-active .td-brief-rail-plan svg {
  width: 11px; height: 11px;
}
body.is-mobile.pwa-active .td-brief-rail-plan:active {
  transform: scale(.96);
  opacity: .85;
}
body.is-mobile.pwa-active .td-brief-rail-plan:disabled,
body.is-mobile.pwa-active .td-brief-rail-plan.is-loading {
  opacity: .5;
  cursor: wait;
}
body.is-mobile.pwa-active .td-brief-rail-plan.is-done {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
}

/* Card déjà planifiée : tick vert dans le head + opacity légèrement réduite */
body.is-mobile.pwa-active .td-brief-card.bf-planned {
  opacity: .78;
}
body.is-mobile.pwa-active .td-brief-card-done {
  display: inline-grid;
  place-items: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  flex-shrink: 0;
}
body.is-mobile.pwa-active .td-brief-card-done svg {
  width: 9px; height: 9px;
}

/* Sur small viewports, on garde juste l'icône + (label masqué) */
@media (max-width: 360px) {
  body.is-mobile.pwa-active .td-brief-rail-plan span {
    display: none;
  }
  body.is-mobile.pwa-active .td-brief-rail-plan {
    width: 22px; padding: 0; justify-content: center;
  }
}


/* [v1311] Toast undo CSS supprimée — 100% inline styles dans pwa-mobile.js _pwaTdBriefShowUndoToast pour éliminer tout conflit specificity / class match. La règle scopée body.is-mobile.pwa-active ne matchait peut-être pas dans certains contextes PWA. */


/* [v1309] v1307 agenda CSS block rolled back — Anthony said it broke agenda */

/* ════════════════════════════════════════════════════════════════════════
   [v1316] PWA filter sheets — Refonte complète sur design Margot (mockup
   donna__1_.zip). Pattern Apple-native plein écran avec sections variées :
   - fsh-card + fsh-row : liste type Settings.app (Tri, Consultants) avec
     icon + checkmark à droite
   - fsh-chips : pills text/bg inversés (Type bien)
   - fsh-segments : segmented control iOS (Pièces, Date, Statut)
   - fsh-dpe : 7 cases A-G colorées avec underline gradient
   - fsh-slider-track : range double thumb (Prix, Surface)
   - fsh-footer : button "Voir N biens · M filtres actifs"
   
   Anthony : "fais tous les filtres avec ce mockup". On applique aux 5
   filter sheets (Biens, Clients, Dossiers, Agenda, Tâches) avec adaptation
   par contexte mais même DS visuel.
   
   IMPORTANT : sheet plein écran (top:0) au lieu de bottom sheet. Tabbar
   reste visible derrière le backdrop ; pas de conflit.
   ════════════════════════════════════════════════════════════════════════ */

/* Sheet 88vh anchored to BOTTOM, covers tabbar quand open */
body.is-mobile.pwa-active .fsh-sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;            /* sticks to viewport bottom, COVERS tabbar */
  top: auto;            /* don't fill top — let height drive */
  height: 88vh;         /* 88% écran : laisse 12% pour le peek du contenu derrière */
  max-height: 88vh;
  background: var(--bg);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);  /* fully off-screen below when closed */
  transition: transform 360ms cubic-bezier(.32, .72, 0, 1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -16px 48px rgba(0,0,0,.18);
}
body.is-mobile.pwa-active .fsh-sheet.open {
  transform: translateY(0);
}

body.is-mobile.pwa-active .fsh-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
body.is-mobile.pwa-active .fsh-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

body.is-mobile.pwa-active .fsh-handle {
  width: 36px; height: 5px;
  border-radius: 999px;
  background: var(--border-hi, var(--border));
  margin: 8px auto 0;
  flex-shrink: 0;
}

body.is-mobile.pwa-active .fsh-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 14px 14px;
  flex-shrink: 0;
}
body.is-mobile.pwa-active .fsh-head h2 {
  font-family: var(--font-display, var(--font));
  font-size: 17px; font-weight: 700;
  letter-spacing: -.2px;
  text-align: center;
  margin: 0;
}
body.is-mobile.pwa-active .fsh-head-cancel,
body.is-mobile.pwa-active .fsh-head-reset {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 500;
  color: var(--accent);
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile.pwa-active .fsh-head-cancel { text-align: left; padding: 4px 0; }
body.is-mobile.pwa-active .fsh-head-reset { text-align: right; padding: 4px 0; font-weight: 600; }
body.is-mobile.pwa-active .fsh-head-reset.disabled {
  color: var(--muted); cursor: default; pointer-events: none;
}

body.is-mobile.pwa-active .fsh-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px;
  -webkit-overflow-scrolling: touch;
}

body.is-mobile.pwa-active .fsh-section {
  margin-bottom: 18px;
}
body.is-mobile.pwa-active .fsh-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
  margin: 0 4px 8px;
  display: flex; align-items: baseline; gap: 8px;
}
body.is-mobile.pwa-active .fsh-label-val {
  margin-left: auto;
  font-family: var(--font-mono, monospace);
  font-size: 11px; font-weight: 600;
  color: var(--text);
  text-transform: none; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
body.is-mobile.pwa-active .fsh-label-val.muted { color: var(--muted); font-weight: 500; }

/* Grouped inset card */
body.is-mobile.pwa-active .fsh-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
body.is-mobile.pwa-active .fsh-card.pad { padding: 18px 16px 14px; }

/* Row inside card */
body.is-mobile.pwa-active .fsh-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile.pwa-active .fsh-row.last { border-bottom: 0; }
body.is-mobile.pwa-active .fsh-row-ic {
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  text-align: center;
}
body.is-mobile.pwa-active .fsh-row.on .fsh-row-ic { color: var(--text); }
body.is-mobile.pwa-active .fsh-row-main { min-width: 0; }
body.is-mobile.pwa-active .fsh-row-t {
  font-size: 14px; font-weight: 500;
  color: var(--text);
}
body.is-mobile.pwa-active .fsh-row.on .fsh-row-t { font-weight: 600; }
body.is-mobile.pwa-active .fsh-row-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 1px;
}
body.is-mobile.pwa-active .fsh-row-av {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  font-family: var(--font-display, var(--font));
  font-size: 10px; font-weight: 700;
}
body.is-mobile.pwa-active .fsh-check {
  display: inline-grid; place-items: center;
  color: var(--accent);
}
body.is-mobile.pwa-active .fsh-check-box {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border-hi, var(--border));
  background: var(--surface);
}
body.is-mobile.pwa-active .fsh-check-box.on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* Chips */
body.is-mobile.pwa-active .fsh-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
body.is-mobile.pwa-active .fsh-chip {
  height: 36px; padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile.pwa-active .fsh-chip.on {
  background: var(--text); color: var(--bg);
  border-color: var(--text);
  font-weight: 600;
}

/* Segments */
body.is-mobile.pwa-active .fsh-segments {
  display: flex;
  padding: 3px;
  background: var(--s2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 2px;
}
body.is-mobile.pwa-active .fsh-seg {
  flex: 1;
  height: 34px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 500;
  color: var(--text-dim, var(--muted));
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile.pwa-active .fsh-seg.on {
  background: var(--surface);
  color: var(--text); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* DPE */
body.is-mobile.pwa-active .fsh-dpe {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
body.is-mobile.pwa-active .fsh-dpe-chip {
  height: 44px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-display, var(--font));
  font-size: 16px; font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
body.is-mobile.pwa-active .fsh-dpe-chip::before {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--c);
  opacity: .4;
}
body.is-mobile.pwa-active .fsh-dpe-chip.on {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border-color: var(--c);
  color: var(--c);
}
body.is-mobile.pwa-active .fsh-dpe-chip.on::before { opacity: 1; height: 4px; }

/* Range slider (double thumb) — v1317 ticks fix */
body.is-mobile.pwa-active .fsh-card.pad {
  padding: 18px 16px 14px;
  overflow: visible !important;  /* override fsh-card overflow:hidden pour pas clipper les ticks */
}
body.is-mobile.pwa-active .fsh-slider-track {
  position: relative;
  height: 4px;
  background: var(--s3, var(--border));
  border-radius: 999px;
  margin: 16px 11px 30px;  /* margin-bottom 30px réserve la place pour les ticks en absolute */
}
body.is-mobile.pwa-active .fsh-slider-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--text);
  border-radius: 999px;
}
body.is-mobile.pwa-active .fsh-slider-thumb {
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--text);
  transform: translateY(-50%);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  touch-action: none;
}
body.is-mobile.pwa-active .fsh-slider-ticks {
  position: absolute;            /* sortie du flow, positionnée sous la track */
  left: -11px; right: -11px;     /* compense les 11px de margin de la track */
  top: calc(100% + 14px);        /* 14px sous le bas de la track */
  display: flex; justify-content: space-between;
  font-family: var(--font-mono, monospace);
  font-size: 10px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Footer apply button */
body.is-mobile.pwa-active .fsh-footer {
  padding: 12px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
body.is-mobile.pwa-active .fsh-footer .fsh-apply-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 0 22px;
  font-family: var(--font); font-size: 16px; font-weight: 600;
  border: 0;
  border-radius: 12px;
  background: var(--text); color: var(--bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile.pwa-active .fsh-footer .fsh-apply-btn:active { transform: scale(.98); }
body.is-mobile.pwa-active .fsh-footer .fsh-apply-btn.disabled {
  background: var(--s3, var(--border));
  color: var(--muted);
  pointer-events: none;
  opacity: .55;
}
body.is-mobile.pwa-active .fsh-apply-meta {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  opacity: .65;
  font-weight: 500;
}

/* Force-hide old cl-filter-sheet variants - we use fsh-sheet now */
body.is-mobile.pwa-active .pwa-root .cl-filter-sheet,
body.is-mobile.pwa-active .cl-filter-sheet {
  display: none !important;
}
body.is-mobile.pwa-active .pwa-root .cl-filter-sheet-backdrop,
body.is-mobile.pwa-active .cl-filter-sheet-backdrop {
  display: none !important;
}

/* [v1316] Compat : le JS existant toggle .active sur les chips, on garde
   le même rendu visuel que .on pour ne pas devoir refactor tout le JS. */
body.is-mobile.pwa-active .fsh-chip.active {
  background: var(--text) !important; color: var(--bg) !important;
  border-color: var(--text) !important; font-weight: 600 !important;
}
body.is-mobile.pwa-active .fsh-seg.active {
  background: var(--surface) !important;
  color: var(--text) !important; font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
body.is-mobile.pwa-active .fsh-row.active .fsh-row-t { font-weight: 600 !important; }
body.is-mobile.pwa-active .fsh-row.active .fsh-row-ic { color: var(--text) !important; }
body.is-mobile.pwa-active .fsh-dpe-chip.active {
  background: color-mix(in srgb, var(--c) 14%, transparent) !important;
  border-color: var(--c) !important;
  color: var(--c) !important;
}
body.is-mobile.pwa-active .fsh-dpe-chip.active::before { opacity: 1 !important; height: 4px !important; }

/* ════════════════════════════════════════════════════════════════════════
   [v1318] Anthony bug Agenda : bouton Appliquer tronqué par la tabbar même
   avec sheet z-index 999999. Root cause : la tabbar (#__pwa_tabbar_host) est
   dans un stacking context séparé de .pwa-root, donc z-index battle impossible.
   Solution : (1) hide la tabbar quand un fsh-sheet est ouvert via body class
   togglée par MutationObserver. (2) bump z-index max int32 sur fsh-sheet pour
   sécurité maximale.
   ════════════════════════════════════════════════════════════════════════ */

/* Hide tabbar host quand n'importe quel fsh-sheet est open */
body.is-mobile.pwa-active.pwa-fsh-sheet-open #__pwa_tabbar_host {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* [v1326] Scroll lock background via JS (cf pwa-mobile.js _pwaWatchFbSheets).
   La méthode CSS-only de v1325 (overflow:hidden + position:fixed + touch-action)
   ne suffit pas sur iOS Safari standalone — il faut SAVE le scrollY puis
   appliquer position:fixed + top:-scrollY via JS, puis restore au close. */

/* Bump z-index au max */
body.is-mobile.pwa-active .fsh-sheet {
  z-index: 2147483647 !important;
}
body.is-mobile.pwa-active .fsh-backdrop {
  z-index: 2147483646 !important;
}

/* ════════════════════════════════════════════════════════════════════
   [v1632] TASK MODAL DESKTOP — calqué pixel-près sur le design Margot.
   Modal 480px, radius 8px (shell) / 4px (champs), polices compactes,
   Échéance en chips, Liée à en pastille, Priorité Basse/Normale/Haute à
   pastilles, primaire foncé. Scope #task-modal-overlay.tm-desk (id+classe
   + !important) pour battre les règles .ml-* legacy.
   ════════════════════════════════════════════════════════════════════ */
#task-modal-overlay.tm-desk {
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(20, 22, 31, .45) !important;
  -webkit-backdrop-filter: blur(3px) !important; backdrop-filter: blur(3px) !important;
}
#task-modal-overlay.tm-desk .ml-shell {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important;
  width: 480px !important; max-width: calc(100vw - 40px) !important; max-height: 90vh !important; min-height: 0 !important;
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(20, 22, 31, .07), 0 18px 50px rgba(20, 22, 31, .14) !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
}
/* Header */
#task-modal-overlay.tm-desk .tmx-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
#task-modal-overlay.tm-desk .tmx-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
#task-modal-overlay.tm-desk .tmx-close {
  width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; border-radius: 4px;
}
#task-modal-overlay.tm-desk .tmx-close:hover { background: var(--s3); color: var(--text); }
#task-modal-overlay.tm-desk .tmx-close svg { width: 15px; height: 15px; }
/* Liée à (pastille contexte) */
#task-modal-overlay.tm-desk .tmx-ctx {
  flex-shrink: 0; display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 16px; background: var(--s2); border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer; text-align: left; font-family: inherit;
}
#task-modal-overlay.tm-desk .tmx-ctx:hover { background: var(--s3); }
#task-modal-overlay.tm-desk .tmx-ctx-pill {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: #fff; background: var(--accent);
}
#task-modal-overlay.tm-desk .tmx-ctx-acquereur { background: var(--accent); }
#task-modal-overlay.tm-desk .tmx-ctx-vendeur { background: var(--green); }
#task-modal-overlay.tm-desk .tmx-ctx-bien { background: var(--froid); }
#task-modal-overlay.tm-desk .tmx-ctx-l { flex-shrink: 0; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#task-modal-overlay.tm-desk .tmx-ctx-v { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#task-modal-overlay.tm-desk .tmx-ctx-edit { flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--text-dim); }
/* Body */
#task-modal-overlay.tm-desk .tmx-body {
  flex: 1 1 auto !important; overflow-y: auto !important; padding: 16px !important;
  display: flex !important; flex-direction: column !important; gap: 14px !important; background: var(--surface) !important;
}
#task-modal-overlay.tm-desk .tmx-field { display: flex; flex-direction: column; gap: 7px; }
#task-modal-overlay.tm-desk .tmx-l { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Titre input */
#task-modal-overlay.tm-desk .tmx-input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 9px 12px; outline: none;
}
#task-modal-overlay.tm-desk .tmx-input::placeholder { color: var(--muted); font-weight: 400; }
#task-modal-overlay.tm-desk .tmx-input:focus { border-color: var(--accent); }
/* Chips échéance */
#task-modal-overlay.tm-desk .tmx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#task-modal-overlay.tm-desk .tmx-chip {
  font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--text-dim);
  background: var(--s2); border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px; cursor: pointer; transition: background .12s, border-color .12s;
}
#task-modal-overlay.tm-desk .tmx-chip:hover { background: var(--s3); }
#task-modal-overlay.tm-desk .tmx-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
/* Date + heure */
#task-modal-overlay.tm-desk .tmx-dual { display: grid; grid-template-columns: 1fr 120px; gap: 8px; margin-top: 8px; }
#task-modal-overlay.tm-desk .tmx-din {
  font-size: 12.5px; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 7px 10px; cursor: pointer; overflow: hidden;
}
#task-modal-overlay.tm-desk .tmx-din:hover { border-color: var(--border-hi, var(--accent)); }
#task-modal-overlay.tm-desk .tmx-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; background: transparent; padding: 0; margin: 0; -webkit-appearance: none; }
/* Priorité segmented */
#task-modal-overlay.tm-desk .tmx-prio { display: inline-flex; gap: 2px; padding: 2px; background: var(--s2); border-radius: 4px; width: fit-content; }
#task-modal-overlay.tm-desk .tmx-prio button {
  display: flex; align-items: center; gap: 6px; font-family: inherit; font-size: 11px; font-weight: 500;
  color: var(--text-dim); background: transparent; border: 0; border-radius: 3px; padding: 5px 12px; cursor: pointer; transition: background .12s, color .12s;
}
#task-modal-overlay.tm-desk .tmx-prio button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(20, 22, 31, .08); }
#task-modal-overlay.tm-desk .tmx-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
#task-modal-overlay.tm-desk .tmx-dot-basse { background: var(--froid, #3d7fc2); }
#task-modal-overlay.tm-desk .tmx-dot-normale { background: var(--text-dim, #4a5169); }
#task-modal-overlay.tm-desk .tmx-dot-haute { background: var(--chaud, #d64560); }
/* Supprimer */
#task-modal-overlay.tm-desk .tmx-delwrap { padding-top: 2px; }
#task-modal-overlay.tm-desk .tmx-del { font-family: inherit; font-size: 12px; font-weight: 500; color: var(--chaud, #d64560); background: transparent; border: 0; cursor: pointer; padding: 4px 0; }
#task-modal-overlay.tm-desk .tmx-del:hover { text-decoration: underline; }
/* Footer */
#task-modal-overlay.tm-desk .tmx-foot {
  flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; background: var(--s2); border-top: 1px solid var(--border);
}
#task-modal-overlay.tm-desk .tmx-ghost {
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--text-dim);
  background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 6px 12px; cursor: pointer; transition: background .12s;
}
#task-modal-overlay.tm-desk .tmx-ghost:hover { background: var(--s3); }
#task-modal-overlay.tm-desk .tmx-primary {
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--bg);
  background: var(--text); border: 1px solid var(--text); border-radius: 4px; padding: 6px 14px; cursor: pointer; transition: opacity .12s;
}
#task-modal-overlay.tm-desk .tmx-primary:hover { opacity: .88; }

/* ════════════════════════════════════════════════════════════════════
   [v1631] TASK PICKERS DESKTOP — client/dossier/rappel/type en modal CENTRÉ
   Les sous-sélecteurs (#tm-ctx-picker / #tm-sheet-picker) sont des bottom-
   sheets iOS (styles inline). Sur desktop (.tm-pk-desk ajouté en JS) on les
   recentre, on borne la largeur, on arrondit les 4 coins et on masque la
   poignée. !important obligatoire (styles inline sur .tm-pk-sheet).
   ════════════════════════════════════════════════════════════════════ */
.tm-pk-desk {
  justify-content: center !important;
  align-items: center !important;
  background: rgba(0, 0, 0, .5) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}
.tm-pk-desk .tm-pk-sheet {
  width: 480px !important;
  max-width: calc(100vw - 48px) !important;
  max-height: 72vh !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  transform: none !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45) !important;
}
/* Poignée (1er enfant) masquée sur desktop */
.tm-pk-desk .tm-pk-sheet > div:first-child { display: none !important; }
/* Header un peu plus aéré sans la poignée */
.tm-pk-desk .tm-pk-sheet > div:nth-child(2) { padding-top: 16px !important; }

/* ════════════════════════════════════════════════════════════════════
   [v1633] TASK PICKER — intérieur compacté style donna desktop
   Le picker est déjà centré (v1631) mais son header/recherche/lignes
   restaient iOS (grosses tailles). On compacte tout en !important (les
   contenus sont en styles inline dans le JS). Desktop only (.tm-pk-desk).
   ════════════════════════════════════════════════════════════════════ */
.tm-pk-desk .tm-pk-sheet { max-width: 460px !important; }
/* Header (2e enfant) : titre gauche compact, Annuler discret */
.tm-pk-desk .tm-pk-sheet > div:nth-child(2) {
  padding: 13px 16px !important; border-bottom: 1px solid var(--border) !important;
}
.tm-pk-desk .tm-pk-sheet > div:nth-child(2) > div { font-size: 13.5px !important; font-weight: 600 !important; }
.tm-pk-desk .tm-pk-cancel { font-size: 12.5px !important; font-weight: 500 !important; color: var(--text-dim) !important; }
/* Zone recherche (3e enfant) */
.tm-pk-desk .tm-pk-sheet > div:nth-child(3) { padding: 12px 16px !important; }
.tm-pk-desk .tm-pk-search {
  font-size: 13px !important; padding: 8px 11px !important; border-radius: 4px !important;
  background: var(--surface) !important; border: 1px solid var(--border) !important;
}
/* Liste */
.tm-pk-desk .tm-pk-list { padding: 4px 8px 12px !important; }
/* En-têtes de groupe (div direct, non-button) */
.tm-pk-desk .tm-pk-list > div { font-size: 10px !important; letter-spacing: .06em !important; padding: 12px 10px 5px !important; }
/* Lignes */
.tm-pk-desk .tm-pk-row { padding: 8px 10px !important; border-radius: 6px !important; gap: 10px !important; }
.tm-pk-desk .tm-pk-row:hover { background: var(--s2) !important; }
.tm-pk-desk .tm-pk-row > div > div:first-child { font-size: 13.5px !important; }
.tm-pk-desk .tm-pk-row > div > div:last-child { font-size: 11.5px !important; }
.tm-pk-desk .tm-pk-row > svg { width: 13px !important; height: 13px !important; }
/* Avatars/pastilles */
.tm-pk-desk .tm-pk-row .tm-ctx-pill {
  width: 26px !important; height: 26px !important; border-radius: 6px !important; font-size: 11px !important;
}