/* ══════════════════════════════════════════════════
   donna PWA mobile · CSS scopé sous .pwa-root
   Aligné design Margot v420 — ne pollue jamais le desktop.
   ══════════════════════════════════════════════════ */

/* Container racine : visible uniquement en mobile, masqué par défaut */
#pwa-root{display:none}

/* v482 : empêche le menu iOS Copy/Look Up/Translate au long press
   (contrarie le menu contextuel custom de l'app) */
.pwa-root,
.pwa-root *,
#pwa-fb-overlay, #pwa-fb-overlay *,
#pwa-cr-overlay, #pwa-cr-overlay *,
#pwa-sr-overlay, #pwa-sr-overlay *,
#pwa-nt-overlay, #pwa-nt-overlay *,
#pwa-tasks-overlay, #pwa-tasks-overlay *,
#pwa-settings-overlay, #pwa-settings-overlay *,
#pwa-compta-overlay, #pwa-compta-overlay *,
#pwa-documents-overlay, #pwa-documents-overlay *,
#pwa-outils-overlay, #pwa-outils-overlay *,
#pwa-heat-zone-sheet, #pwa-heat-zone-sheet *,
#pwa-quicknote-overlay, #pwa-quicknote-overlay *,
#pwa-ctx-menu, #pwa-ctx-menu * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Inputs et textareas restent éditables/sélectionnables */
.pwa-root input, .pwa-root textarea,
.pwa-root [contenteditable="true"],
#pwa-cr-overlay input, #pwa-cr-overlay textarea,
#pwa-nt-overlay textarea, #pwa-nt-overlay input,
#pwa-quicknote-overlay textarea, #pwa-quicknote-overlay input,
#pwa-sr-overlay input {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* v444 : Masquer TOUS les overlays PWA par défaut — ils ne doivent apparaître
   qu'en contexte mobile (body.is-mobile.pwa-active). Fix critique car ces
   overlays sont hors #pwa-root et étaient visibles en desktop sans règle. */
#pwa-fb-overlay,
#pwa-cr-overlay,
#pwa-sr-overlay,
#pwa-nt-overlay,
#pwa-tasks-overlay,
#pwa-settings-overlay,
#pwa-compta-overlay,
#pwa-documents-overlay,
#pwa-outils-overlay,
#pwa-heat-zone-sheet {
  display: none !important;
}
/* La vraie config vient en bas du fichier (v432 master rule). */
/* v427 — Quand PWA mobile active, masquer TOUS les éléments desktop top-level
   sauf la whitelist : PWA elle-même, login, loading, compte modal (pour Plus),
   et les balises non-visuelles. */
body.is-mobile.pwa-active > *:not(#pwa-root):not(#auth-screen):not(#donna-loading):not(#compte-overlay):not(#compte-modal):not(#pwa-compte-overlay):not(#pwa-fb-overlay):not(#pwa-cr-overlay):not(#pwa-sr-overlay):not(#pwa-nt-overlay):not(#pwa-tasks-overlay):not(#pwa-settings-overlay):not(#pwa-compta-overlay):not(#pwa-documents-overlay):not(#pwa-outils-overlay):not(#pwa-heat-zone-sheet):not(#pwa-docs-overlay):not(#pwa-quicknote-overlay):not(#pwa-ctx-overlay):not(#pwa-ctx-menu):not(#pwa-pdf-viewer):not(#pwa-pdf-loader):not(#pwa-toast):not(#pwa-offline-banner):not(#pwa-donna-fab):not(#pwa-donna-panel):not(#pwa-install-banner):not(#pwa-install-modal):not(#__pwa_tabbar_host):not(#__pwa_sheet_host):not(#task-modal-overlay):not(#pwa-event-read-overlay):not(#task-read-overlay):not(#pwa-relance-overlay):not(#sup-new-modal):not(#sup-new-modal-back):not(#sup-act-menu-pop):not(#sup-confirm-modal):not(#sup-confirm-modal-back):not(#donna-imp-banner):not(#pwa-aide-action-menu-overlay):not(#pwa-trash-overlay):not(#dd-cascade-overlay):not(#dd-undo-toast):not(svg):not(script):not(style):not(link):not(noscript):not(template){
  display:none !important;
}

/* v515 : host pour le tabbar sorti de #pwa-root (stacking context indépendant) */
body.is-mobile.pwa-active #__pwa_tabbar_host {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* [#sheet-tabbar-overlap] z-index 99999 pour passer AU-DESSUS du sheet host
     (99998). Avant : 9998 → la tabbar passait sous le sheet quand le modal "+"
     était ouvert, plus accessible. Maintenant : la tabbar reste cliquable
     même quand le sheet est ouvert. Reste sous le bandeau impersonation
     (999999). */
  z-index: 99999;
  pointer-events: none;

  /* Tokens hérités de .pwa-root — répliqués ici car le tabbar est sorti de .pwa-root
     donc plus accès aux CSS vars. Sans ça, .tab.active { color:var(--text) } est invalide. */
  --bg:#f7f8fa; --surface:#ffffff; --s2:#f1f3f7; --s3:#e7ebf2;
  --border:#cdd2dc; --border-hi:#b6bdcb;
  --text:#14161f; --text-dim:#4a5169; --muted:#8a93ab;
  --accent:#6b5cf5; --accent-dim:rgba(107,92,245,.09);

  --safe-bot:env(safe-area-inset-bottom, 0px);
  --font:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  font-family:var(--font);
}
html[data-theme="noir"] body.is-mobile.pwa-active #__pwa_tabbar_host {
  --bg:#000000; --surface:#0a0a0c; --s2:#121216; --s3:#1a1a20;
  --border:#34343f; --border-hi:#43434f;
  --text:#f2f3f7; --text-dim:#a8adbd; --muted:#5f6578;
  --accent:#8b7bff; --accent-dim:rgba(139,123,255,.12);
}
body.is-mobile.pwa-active #__pwa_tabbar_host > .tabbar {
  pointer-events: auto;
}
/* Règles .tab dupliquées sans le scope .pwa-root pour gérer le tabbar sorti.
   v2.1.x : couleurs littérales (pas var(--text)) — fallback robuste si CSS vars
   du host ne sont pas appliquées (timing / order load). */
#__pwa_tabbar_host .tab {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 0;
  font-size:10px; font-weight:500; letter-spacing:-.1px;
  transition:color .15s;
}
#__pwa_tabbar_host .tab:not(.active){ color:#8a93ab !important; }
#__pwa_tabbar_host .tab.active{ color:#14161f !important; }
#__pwa_tabbar_host .tab svg{ display:block; color:inherit; }
/* Theme noir */
html[data-theme="noir"] #__pwa_tabbar_host .tab:not(.active){ color:#5f6578 !important; }
html[data-theme="noir"] #__pwa_tabbar_host .tab.active{ color:#f2f3f7 !important; }

/* ══════════════════════════════════════════════════
   donna PWA · tokens + composants (Margot design system)
   Light + Noir strict — aligné v418 / Margot 2.0
   ══════════════════════════════════════════════════ */
.pwa-root {
  --bg:#f7f8fa; --surface:#ffffff; --s2:#f1f3f7; --s3:#e7ebf2;
  --border:#cdd2dc; --border-hi:#b6bdcb;
  --text:#14161f; --text-dim:#4a5169; --muted:#8a93ab;
  --accent:#6b5cf5; --accent-hi:#564bd8; --accent-dim:rgba(107,92,245,.09);
  --chaud:#d64560; --tiede:#c08a2e; --froid:#3d7fc2; --green:#22a06b; --mauve:#8257e5;

  --shadow-sm:0 1px 2px rgba(20,22,31,.05);
  --shadow:0 4px 14px rgba(20,22,31,.07);
  --shadow-lg:0 16px 40px rgba(20,22,31,.14);

  --radius-sm:3px; --radius:4px; --radius-lg:8px;

  --font:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --font-display:'Plus Jakarta Sans', var(--font);
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}
body[data-theme="noir"] .pwa-root,
html[data-theme="noir"] .pwa-root {
  --bg:#000; --surface:#0a0a0c; --s2:#121216; --s3:#1a1a20;
  --border:#34343f; --border-hi:#43434f;
  --text:#f2f3f7; --text-dim:#a8adbd; --muted:#5f6578;
  --accent:#8b7bff; --accent-hi:#a89dff; --accent-dim:rgba(139,123,255,.12);
  --chaud:#ff6680; --tiede:#f0c050; --froid:#5ca8ff; --green:#4fd49a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 4px 14px rgba(0,0,0,.5);
  --shadow-lg:0 20px 48px rgba(0,0,0,.7);
  --radius-sm:2px; --radius:3px; --radius-lg:6px;
}
.pwa-root * {box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
.pwa-root, .pwa-root {
  background:var(--bg); color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  height:100%; overflow:hidden;
  overscroll-behavior-y:none;
}
.pwa-root button {font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; font-size:inherit}
.pwa-root a {color:inherit; text-decoration:none}
.pwa-root input, .pwa-root textarea {font-family:inherit; color:inherit; background:none; border:none; outline:none}
/* ── App root : remplit tout le viewport ── */
.pwa-root .app-root {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--bg);
  padding-top:var(--safe-top);
}
/* ── iOS-style status bar (masquée si standalone) ── */
.pwa-root .sb {
  height:44px; padding:0 22px 0 28px;
  display:flex; justify-content:space-between; align-items:center;
  flex-shrink:0;
  font-size:13px; font-weight:600; letter-spacing:-.2px;
  color:var(--text);
}
.pwa-root .sb .sys {display:inline-flex; gap:6px; align-items:center; opacity:.85}
.pwa-root .sb .sys svg {display:block}
/* Masquer SB quand en standalone mode (la vraie status bar iOS est là) */
@media (display-mode: standalone) {
  .pwa-root .sb {display:none}
}

/* ── App body ── */
.pwa-root .app-body {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}
/* ── Écrans : toggle display ── */
.pwa-root .view {display:none; flex:1; flex-direction:column; overflow:hidden; position:relative}
.pwa-root .view.active {display:flex}
/* ── Scroll zone ── */
.pwa-root .scroll {
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pwa-root .scroll::-webkit-scrollbar {display:none}
/* ══════════════════════════════════════════════════
   HEADER (eyebrow + h1 + actions)
   ══════════════════════════════════════════════════ */
.pwa-root .hdr {
  padding:6px 20px 14px;
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-shrink:0;
}
/* v477 : sticky header sur Aujourd'hui */
.pwa-root [data-view="aujourdhui"] .scroll > .hdr {
  position:sticky; top:0; z-index:10;
  background:var(--bg, #f7f8fa);
  /* v515 : retiré le double safe-area (déjà appliqué sur #pwa-root)
     → padding-top normal de 6px comme les autres pages */
  padding-top:6px;
  border-bottom:1px solid transparent;
  transition:border-color .15s, box-shadow .15s;
}
.pwa-root [data-view="aujourdhui"] .scroll > .hdr.scrolled {
  border-bottom-color:var(--border);
  box-shadow:0 1px 0 0 rgba(0,0,0,.02);
}
[data-theme="noir"] .pwa-root [data-view="aujourdhui"] .scroll > .hdr {
  background:#000;
}
.pwa-root .hdr .left {min-width:0; flex:1}
.pwa-root .hdr .eyebrow {
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted); margin-bottom:4px;
}
.pwa-root .hdr h1 {
  font-family:var(--font-display); font-weight:800; font-size:26px;
  letter-spacing:-.6px; line-height:1.1;
}
.pwa-root .hdr .actions {display:flex; gap:8px; align-items:center}
.pwa-root .hdr-btn {
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--text-dim); background:transparent;
  transition:background .15s;
}
.pwa-root .hdr-btn:hover, .pwa-root .hdr-btn:active {background:var(--s2); color:var(--text)}
/* Back header pour sous-pages */
.pwa-root .back-hdr {
  padding:6px 14px 14px;
  display:flex; align-items:center; gap:4px;
  flex-shrink:0;
}
.pwa-root .back-hdr .back {
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--text); background:transparent;
}
.pwa-root .back-hdr .back:active {background:var(--s2)}
.pwa-root .back-hdr .ttl-wrap {flex:1; min-width:0; margin-left:4px}
.pwa-root .back-hdr .ttl {
  font-family:var(--font-display); font-weight:700; font-size:16px;
  letter-spacing:-.3px;
}
.pwa-root .back-hdr .sub {
  font-size:11px; color:var(--muted); margin-top:1px;
  font-family:var(--mono); letter-spacing:.3px; text-transform:uppercase;
}
/* ══════════════════════════════════════════════════
   BOUTONS
   ══════════════════════════════════════════════════ */
.pwa-root .btn, .pwa-root .add-btn {
  padding:0 12px; height:32px;
  font-size:12px; font-weight:600;
  background:var(--text); color:var(--bg);
  border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:background .15s;
}
.pwa-root .btn:hover, .pwa-root .add-btn:hover {background:var(--text-dim)}
.pwa-root .btn-secondary {
  padding:0 12px; height:32px;
  font-size:12px; font-weight:600;
  background:var(--s2); color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:6px;
}
.pwa-root .btn-secondary:hover {background:var(--s3); border-color:var(--border-hi)}
/* ══════════════════════════════════════════════════
   BOTTOM TAB BAR — grille 1fr 1fr 72px 1fr 1fr
   ══════════════════════════════════════════════════ */
.pwa-root .tabbar,
#__pwa_tabbar_host .tabbar {
  flex-shrink:0;
  display:grid;
  grid-template-columns:1fr 1fr 72px 1fr 1fr;
  align-items:stretch;
  /* v2.1.x — Fond opaque (avant: 92% surface + blur) pour que le contenu scroll
     derrière ne soit pas visible (= pas de gap blanc visible avant la tabbar) */
  background: var(--surface, #ffffff);
  border-top:1px solid var(--border, #e4e7ee);
  padding:6px 8px calc(24px + var(--safe-bot, env(safe-area-inset-bottom, 0px)));
  position:relative;
}
.pwa-root .tab,
#__pwa_tabbar_host .tab {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 0;
  font-size:10px; font-weight:500; letter-spacing:-.1px;
  transition:color .15s;
  background:transparent; border:none; cursor:pointer;
}
.pwa-root .tab svg,
#__pwa_tabbar_host .tab svg { display:block; color:inherit; }
.pwa-root .tab-plus,
#__pwa_tabbar_host .tab-plus {
  display:grid; place-items:center;
  align-self:center;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--text, #14161f); color:var(--bg, #f7f8fa);
  transition:transform .15s, background .15s;
  border:none; cursor:pointer;
}
.pwa-root .tab-plus:active,
#__pwa_tabbar_host .tab-plus:active { background:var(--text-dim, #4a5169); transform:scale(.95); }
/* v2.1.x — Quand le sheet est ouvert : + se transforme en X (rotation 45deg) */
.pwa-root .tab-plus svg,
#__pwa_tabbar_host .tab-plus svg {
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.pwa-root .tab-plus.sheet-open svg,
#__pwa_tabbar_host .tab-plus.sheet-open svg {
  transform: rotate(45deg);
}
.pwa-root .home-ind,
#__pwa_tabbar_host .home-ind {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:134px; height:5px; border-radius:3px;
  background:var(--text, #14161f); opacity:.35;
}
@media (display-mode: standalone) {
  .pwa-root .home-ind,
  #__pwa_tabbar_host .home-ind { display:none; }
}

/* ══════════════════════════════════════════════════
   SEGMENTED (seg)
   ══════════════════════════════════════════════════ */
.pwa-root .seg {
  display:flex; gap:2px;
  padding:3px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.pwa-root .seg button {
  flex:1; padding:7px 0;
  font-size:12px; font-weight:600;
  color:var(--text-dim);
  border-radius:var(--radius-sm);
  transition:all .15s;
  white-space:nowrap;
}
.pwa-root .seg button:hover {color:var(--text)}
.pwa-root .seg button.active {
  background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-sm);
}
/* ══════════════════════════════════════════════════
   CHIPS FILTRES (scroll horizontal)
   ══════════════════════════════════════════════════ */
.pwa-root .filter-row {
  display:flex; align-items:center; gap:6px;
  padding:0 20px 14px;
  overflow-x:auto; scrollbar-width:none;
  flex-wrap:nowrap; flex-shrink:0;
}
.pwa-root .filter-row::-webkit-scrollbar {display:none}
.pwa-root .chip {
  flex-shrink:0; padding:6px 11px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:999px;
  font-size:11.5px; font-weight:600;
  color:var(--text-dim); white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px;
}
.pwa-root .chip.active-hot {
  background:color-mix(in srgb, var(--chaud) 14%, transparent);
  border-color:color-mix(in srgb, var(--chaud) 28%, transparent);
  color:var(--chaud);
}
.pwa-root .chip.active-accent {
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-color:color-mix(in srgb, var(--accent) 26%, transparent);
  color:var(--accent);
}
/* v479 : chip actif (générique) — fond inversé text/bg pour les filtres dossiers, chips Aujourd'hui, etc. */
.pwa-root .chip[data-active="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.pwa-root .chip[data-active="true"] span {
  color: var(--bg);
  opacity: 0.85;
}
/* ══════════════════════════════════════════════════
   SECTION LABEL
   ══════════════════════════════════════════════════ */
.pwa-root .sec-lbl {
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:1.3px; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
  display:flex; justify-content:space-between; align-items:center;
}
.pwa-root .sec-lbl .count {font-size:10px; color:var(--muted); font-weight:500}
.pwa-root .sec-lbl .lbl-flex {display:flex; align-items:center; gap:6px}
/* ══════════════════════════════════════════════════
   AVATAR
   ══════════════════════════════════════════════════ */
.pwa-root .avatar {
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:12px;
  flex-shrink:0;
}
/* ══════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════ */
.pwa-root .badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px;
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.4px; text-transform:uppercase;
  border-radius:var(--radius-sm);
}
.pwa-root .badge .dot {width:5px; height:5px; border-radius:50%}
.pwa-root .badge.hot {color:var(--chaud); background:color-mix(in srgb, var(--chaud) 14%, transparent); border:1px solid color-mix(in srgb, var(--chaud) 25%, transparent)}
.pwa-root .badge.warm {color:var(--tiede); background:color-mix(in srgb, var(--tiede) 14%, transparent); border:1px solid color-mix(in srgb, var(--tiede) 25%, transparent)}
.pwa-root .badge.cold {color:var(--muted); background:var(--s2); border:1px solid var(--border)}
.pwa-root .badge.match {color:var(--accent); background:var(--accent-dim); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent)}
.pwa-root .badge.green {color:var(--green); background:color-mix(in srgb, var(--green) 14%, transparent); border:1px solid color-mix(in srgb, var(--green) 25%, transparent)}
/* ══════════════════════════════════════════════════
   ICONS
   ══════════════════════════════════════════════════ */
.pwa-root .icon {stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round}
.pwa-root .icon.fill {stroke:none; fill:currentColor}
/* ══════════════════════════════════════════════════
   ÉCRAN : Aujourd'hui
   ══════════════════════════════════════════════════ */
.pwa-root .hot-card {
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px;
  box-shadow:var(--shadow-sm);
}
.pwa-root .hot-card.hot {
  border-color:color-mix(in srgb, var(--chaud) 30%, var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--chaud) 8%, transparent), var(--shadow-sm);
}
.pwa-root .hot-card + .hot-card {margin-top:8px}
.pwa-root .hot-card .row {display:flex; align-items:center; gap:10px}
.pwa-root .hot-card .name {
  font-family:var(--font-display); font-weight:700; font-size:14px;
  letter-spacing:-.2px;
}
.pwa-root .hot-card .sub {font-size:11.5px; color:var(--text-dim); margin-top:1px}
.pwa-root .hot-card .score {
  font-family:var(--font-display); font-weight:800; font-size:22px;
  letter-spacing:-.5px; font-variant-numeric:tabular-nums;
  min-width:36px; text-align:right;
}
.pwa-root .hot-card .why {
  font-size:11.5px; color:var(--text-dim);
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border);
  line-height:1.5;
}
.pwa-root .hot-card .why em {font-style:normal; color:var(--text); font-weight:600}
.pwa-root .task-row {
  display:flex; align-items:center; gap:11px;
  padding:11px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.pwa-root .task-row + .task-row {margin-top:6px}
/* [v745] Variante compacte pour les cards events agenda (sections "Aujourd'hui" et
   "À venir" du dashboard PWA). Anthony : "réduis la hauteur des card event, elles
   prennent trop de place". Cibles : padding -3px V, font-size -0.5px sur titre/meta,
   gap interne réduit. Les tâches (.task-row sans .evt) gardent leur hauteur d'origine. */
.pwa-root .task-row.evt {
  padding:7px 12px;
  gap:9px;
}
.pwa-root .task-row.evt + .task-row.evt {margin-top:4px}
.pwa-root .task-row.evt .t-txt {font-size:12.5px}
.pwa-root .task-row.evt .t-meta {font-size:10.5px}
.pwa-root .task-row .check {
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--border-hi);
  flex-shrink:0;
}
.pwa-root .task-row .check.done {background:var(--text); border-color:var(--text); position:relative}
.pwa-root .task-row .check.done::after {
  content:''; position:absolute; left:5px; top:3px;
  width:6px; height:10px; border:solid var(--bg);
  border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
.pwa-root .task-row .t-main {flex:1; min-width:0}
.pwa-root .task-row .t-txt {font-size:13px; font-weight:500; color:var(--text)}
.pwa-root .task-row .t-txt.done {text-decoration:line-through; color:var(--muted)}
.pwa-root .task-row .t-meta {
  font-size:11px; color:var(--muted); margin-top:1px;
  font-family:var(--mono); letter-spacing:.2px;
}
.pwa-root .task-row .t-chev {color:var(--muted); flex-shrink:0}
.pwa-root .signal-row {
  display:flex; align-items:center; gap:11px;
  padding:11px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.pwa-root .signal-row + .signal-row {margin-top:6px}
.pwa-root .signal-row .bar {width:3px; align-self:stretch; border-radius:2px; flex-shrink:0}
.pwa-root .signal-row .main {flex:1; min-width:0}
.pwa-root .signal-row .addr {font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:-.1px}
.pwa-root .signal-row .sub {font-size:11px; color:var(--text-dim); margin-top:1px}
/* ══════════════════════════════════════════════════
   ÉCRAN : Clients
   ══════════════════════════════════════════════════ */
.pwa-root .client-row {
  display:flex; align-items:center; gap:11px;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  margin-bottom:6px;
}
.pwa-root .client-row .cr-main {flex:1; min-width:0}
.pwa-root .client-row .cr-nl {display:flex; align-items:center; gap:6px}
.pwa-root .client-row .cr-name {
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
  letter-spacing:-.2px;
}
.pwa-root .client-row .cr-sub {font-size:11.5px; color:var(--text-dim); margin-top:1px}
.pwa-root .client-row .cr-score {
  font-family:var(--font-display); font-weight:800; font-size:16px;
  font-variant-numeric:tabular-nums;
  min-width:24px; text-align:right;
}
/* ══════════════════════════════════════════════════
   ÉCRAN : Plus (menu)
   ══════════════════════════════════════════════════ */
.pwa-root .profile-card {
  display:flex; align-items:center; gap:12px;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.pwa-root .profile-card .info {flex:1; min-width:0}
.pwa-root .profile-card .nm {font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.2px}
.pwa-root .profile-card .sub {font-size:12px; color:var(--text-dim); margin-top:1px}
.pwa-root .profile-card .chev {color:var(--muted)}
.pwa-root .menu-group {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.pwa-root .menu-item {
  display:flex; align-items:center; gap:12px;
  padding:13px 14px;
  border-bottom:1px solid var(--border);
  transition:background .1s;
  cursor:pointer;
}
.pwa-root .menu-item:last-child {border-bottom:none}
.pwa-root .menu-item:active {background:var(--s2)}
.pwa-root .menu-item .mi-icon {
  width:32px; height:32px; border-radius:var(--radius);
  display:grid; place-items:center;
  background:var(--s2); color:var(--text-dim);
  flex-shrink:0;
}
.pwa-root .menu-item .mi-main {flex:1; min-width:0}
.pwa-root .menu-item .mi-lbl {font-size:14px; font-weight:500; color:var(--text)}
.pwa-root .menu-item .mi-sub {font-size:11.5px; color:var(--muted); margin-top:1px}
.pwa-root .menu-item .mi-right {
  display:flex; align-items:center; gap:8px;
  color:var(--muted);
  font-size:12px; font-family:var(--mono); letter-spacing:.3px;
}
.pwa-root .menu-item .mi-right .count {
  padding:2px 6px; background:var(--s2); border-radius:999px;
  font-size:10px; font-weight:600; color:var(--text-dim);
}

/* [#logout-isolated] Bouton Déconnexion isolé en bas de la page Plus PWA */
.pwa-root .pwa-plus-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
}
.pwa-root .pwa-plus-logout:active {
  background: color-mix(in srgb, var(--chaud, #d54040) 8%, transparent);
  border-color: color-mix(in srgb, var(--chaud, #d54040) 28%, var(--border));
  color: var(--chaud, #d54040);
}
.pwa-root .pwa-plus-logout svg {
  flex-shrink: 0;
  opacity: .7;
}
/* ══════════════════════════════════════════════════
   ÉCRAN : Fiche client
   ══════════════════════════════════════════════════ */
.pwa-root .client-hero {padding:0 20px 16px}
.pwa-root .client-hero .top {display:flex; align-items:center; gap:14px}
.pwa-root .client-hero .big-av {
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:20px;
  flex-shrink:0;
}
.pwa-root .client-hero h2 {
  font-family:var(--font-display); font-weight:800; font-size:22px;
  letter-spacing:-.5px;
}
.pwa-root .client-hero .tagline {
  font-size:13px; color:var(--text-dim); margin-top:3px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.pwa-root .quick-actions {
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:6px; margin-top:16px;
}
.pwa-root .qa {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 0 8px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-size:9.5px; font-weight:600;
  min-width:0;
}
.pwa-root .qa svg {opacity:.9; width:15px; height:15px}
.pwa-root .qa:active {background:var(--s3)}
/* v492 : QA donna — variante violette pour la fonction Analyser */
.pwa-root .qa.qa-donna {
  background: rgba(107, 92, 245, 0.10);
  border-color: rgba(107, 92, 245, 0.35);
  color: #6b5cf5;
}
[data-theme="noir"] .pwa-root .qa.qa-donna {
  background: rgba(139, 123, 255, 0.16);
  border-color: rgba(139, 123, 255, 0.40);
  color: #a89dff;
}
.pwa-root .qa.qa-donna svg { opacity: 1; }
.pwa-root .qa.qa-donna:active {
  background: rgba(107, 92, 245, 0.20);
}
.pwa-root .score-strip {
  padding:12px 14px;
  background:color-mix(in srgb, var(--chaud) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--chaud) 30%, var(--border));
  border-radius:var(--radius-lg);
}
.pwa-root .score-strip .row1 {display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.pwa-root .score-strip .big {
  font-family:var(--font-display); font-weight:800; font-size:28px;
  color:var(--chaud); letter-spacing:-.7px; font-variant-numeric:tabular-nums;
}
.pwa-root .score-strip .lbl {
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:var(--chaud);
}
.pwa-root .score-strip .explain {font-size:12px; color:var(--text); line-height:1.5}
.pwa-root .score-strip .explain em {font-style:normal; color:var(--chaud); font-weight:600}
.pwa-root .tl-item {
  display:grid; grid-template-columns:28px 1fr auto;
  gap:10px; align-items:start;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.pwa-root .tl-item:last-child {border-bottom:none}
.pwa-root .tl-icon {
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--s2); color:var(--text-dim);
}
.pwa-root .tl-icon.call {background:color-mix(in srgb, var(--green) 14%, var(--s2)); color:var(--green)}
.pwa-root .tl-icon.mail {background:color-mix(in srgb, var(--accent) 12%, var(--s2)); color:var(--accent)}
.pwa-root .tl-icon.visit {background:color-mix(in srgb, var(--froid) 14%, var(--s2)); color:var(--froid)}
.pwa-root .tl-icon.note {background:var(--s3); color:var(--text-dim)}
.pwa-root .tl-main {min-width:0}
.pwa-root .tl-title {font-size:13px; font-weight:600; color:var(--text); letter-spacing:-.1px}
.pwa-root .tl-body {font-size:11.5px; color:var(--text-dim); margin-top:2px; line-height:1.45}
.pwa-root .tl-time {font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.3px; white-space:nowrap}
.pwa-root .crit-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px;
}
.pwa-root .crit {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:10px 12px;
}
.pwa-root .crit .k {font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.pwa-root .crit .v {font-family:var(--font-display); font-weight:700; font-size:13.5px; letter-spacing:-.2px; color:var(--text)}
.pwa-root .crit.full {grid-column:1 / -1}
.pwa-root .match-card {
  display:flex; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:12px;
}
.pwa-root .match-card + .match-card {margin-top:8px}
.pwa-root .match-card .thumb {
  width:64px; height:64px; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--s3), var(--s2));
  display:grid; place-items:center; color:var(--muted);
  flex-shrink:0;
}
.pwa-root .match-card .m-main {flex:1; min-width:0}
.pwa-root .match-card .m-addr {font-family:var(--font-display); font-weight:700; font-size:13.5px; letter-spacing:-.2px}
.pwa-root .match-card .m-sub {font-size:11.5px; color:var(--text-dim); margin-top:2px; line-height:1.4}
.pwa-root .match-card .m-foot {display:flex; align-items:center; gap:8px; margin-top:8px}
.pwa-root .match-card .m-price {font-family:var(--font-display); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums}
/* ══════════════════════════════════════════════════
   ÉCRAN : Biens (sous-page)
   ══════════════════════════════════════════════════ */
.pwa-root .bien-row {
  display:flex; gap:11px; padding:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); margin-bottom:8px;
}
.pwa-root .bien-row .br-thumb {
  width:58px; height:58px; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--s3), var(--s2));
  display:grid; place-items:center; color:var(--muted); flex-shrink:0;
}
.pwa-root .bien-row .br-main {flex:1; min-width:0}
.pwa-root .bien-row .br-addr {font-family:var(--font-display); font-weight:700; font-size:13.5px; letter-spacing:-.2px}
.pwa-root .bien-row .br-sub {font-size:11.5px; color:var(--text-dim); margin-top:2px}
.pwa-root .bien-row .br-foot {display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap}
.pwa-root .bien-row .br-price {font-family:var(--font-display); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums}
/* ══════════════════════════════════════════════════
   ÉCRAN : Performance
   ══════════════════════════════════════════════════ */
.pwa-root .kpi-grid {display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pwa-root .kpi-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:12px 14px;
}
.pwa-root .kpi-card .lbl {
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:1.1px; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
.pwa-root .kpi-card .val {
  font-family:var(--font-display); font-weight:800; font-size:22px;
  letter-spacing:-.5px; font-variant-numeric:tabular-nums;
}
.pwa-root .kpi-card .delta {
  display:flex; align-items:center; gap:4px; margin-top:3px;
  font-size:11px; font-weight:600;
}
.pwa-root .kpi-card .delta.up {color:var(--green)}
.pwa-root .kpi-card .delta.down {color:var(--chaud)}
.pwa-root .pipe-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:4px 14px 6px;
}
.pwa-root .pipe-row {padding:10px 0; border-bottom:1px solid var(--border)}
.pwa-root .pipe-row:last-child {border-bottom:none}
.pwa-root .pipe-row .top {display:flex; align-items:baseline; gap:8px; margin-bottom:6px}
.pwa-root .pipe-row .stage {font-size:13px; font-weight:600; color:var(--text)}
.pwa-root .pipe-row .meta {font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.3px}
.pwa-root .pipe-row .pct {
  margin-left:auto;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.pwa-root .pipe-bar {height:6px; background:var(--s2); border-radius:3px; overflow:hidden}
.pwa-root .pipe-bar > span {display:block; height:100%; border-radius:3px}
.pwa-root .team-row {
  display:flex; align-items:center; gap:11px;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
}
.pwa-root .team-row:last-child {border-bottom:none}
.pwa-root .team-row .tr-main {flex:1; min-width:0}
.pwa-root .team-row .tr-nm {font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:-.1px}
.pwa-root .team-row .tr-role {font-size:11px; color:var(--muted); margin-top:1px}
.pwa-root .team-row .tr-right {text-align:right}
.pwa-root .team-row .tr-ca {font-family:var(--font-display); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums}
.pwa-root .team-row .tr-pct {font-size:10px; color:var(--muted); font-family:var(--mono); letter-spacing:.3px}
/* ══════════════════════════════════════════════════
   SHEET MODAL (bouton + central)
   ══════════════════════════════════════════════════ */
.pwa-root .sheet-backdrop {
  position:absolute; inset:0;
  background:rgba(20,22,31,.38);
  z-index:10;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
/* [#80] Sheet & backdrop sortis de #pwa-root vers #__pwa_sheet_host (body-level)
   pour avoir un stacking context indépendant et passer au-dessus des overlays
   plein écran (#pwa-fb-overlay z-index:120, etc).
   On garde les anciennes règles .pwa-root .sheet pour rétrocompat (premier render
   avant que syncActivation ait déplacé le DOM).
   v2 : z-index passé à 99998 (juste sous le bandeau impersonation à 999999) car
   200 ne suffisait pas — la page Biens a un .sticky-top avec z-index:10 qui
   créait un nouveau stacking context et bloquait le sheet. */
#__pwa_sheet_host { position: fixed; inset: 0; z-index: 99998; pointer-events: none; }
#__pwa_sheet_host > * { pointer-events: auto; }
#__pwa_sheet_host .sheet-backdrop,
.pwa-root .sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,22,31,.45);
  z-index: 99997;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
#__pwa_sheet_host .sheet-backdrop.open,
.pwa-root .sheet-backdrop.open { opacity: 1; pointer-events: auto; }
/* [#sheet-padding-fix] Le sheet est hoisté dans #__pwa_sheet_host (body-level)
   qui n'a pas accès à --safe-bot (défini sur .pwa-root et #__pwa_tabbar_host).
   Du coup `var(--safe-bot)` était invalide → toute la prop `padding` reset à 0
   → sheet sans marge bottom passait sous la tabbar PWA. Fix : env() direct. */
#__pwa_sheet_host {
  --safe-bot: env(safe-area-inset-bottom, 0px);
}
#__pwa_sheet_host .sheet,
.pwa-root .sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  /* padding-bottom = marge interne (28px) + tabbar (62px) + safe-area iOS */
  padding: 10px 16px calc(28px + 62px + env(safe-area-inset-bottom, 0px));
  z-index: 99999;
  box-shadow: 0 -10px 40px rgba(20,22,31,.15);
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
#__pwa_sheet_host .sheet.open,
.pwa-root .sheet.open { transform: translateY(0); }
#__pwa_sheet_host .sheet .grabber,
.pwa-root .sheet .grabber {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border-hi);
  margin: 0 auto 14px;
}
#__pwa_sheet_host .sheet h3,
.pwa-root .sheet h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: -.3px;
  margin-bottom: 4px; padding: 0 6px;
}
#__pwa_sheet_host .sheet .sheet-sub,
.pwa-root .sheet .sheet-sub {
  font-size: 12px; color: var(--text-dim);
  padding: 0 6px; margin-bottom: 14px;
}
#__pwa_sheet_host .sheet-item,
.pwa-root .sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px;
  border-radius: var(--radius);
  transition: background .1s;
  cursor: pointer;
}
#__pwa_sheet_host .sheet-item:active,
.pwa-root .sheet-item:active { background: var(--s2); }
#__pwa_sheet_host .sheet-item + .sheet-item,
.pwa-root .sheet-item + .sheet-item {
  border-top: 1px solid var(--border);
  border-radius: 0;
}
#__pwa_sheet_host .sheet-item .si-icon,
.pwa-root .sheet-item .si-icon {
  width:36px; height:36px; border-radius:var(--radius);
  display:grid; place-items:center;
  background:var(--s2); color:var(--text);
  flex-shrink:0;
}
#__pwa_sheet_host .sheet-item .si-icon.accent,
.pwa-root .sheet-item .si-icon.accent {
  background:var(--accent-dim); color:var(--accent);
}
#__pwa_sheet_host .sheet-item .si-lbl,
.pwa-root .sheet-item .si-lbl {flex:1; font-size:14px; font-weight:600}
#__pwa_sheet_host .sheet-item .si-sub,
.pwa-root .sheet-item .si-sub {font-size:11.5px; color:var(--muted); margin-top:1px; font-weight:400}
#__pwa_sheet_host .sheet-item .si-chev,
.pwa-root .sheet-item .si-chev {color:var(--muted); flex-shrink:0}
.pwa-root .sheet-scan {
  margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--border);
}
/* ══════════════════════════════════════════════════
   AGENDA — top bar (repris du Calendar v3)
   ══════════════════════════════════════════════════ */
.pwa-root .cal-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 14px 10px; gap:8px; flex-shrink:0;
}
.pwa-root .cal-top-l {display:flex; align-items:center; gap:6px; flex:1; min-width:0}
.pwa-root .cal-top-r {display:flex; align-items:center; gap:6px; flex-shrink:0}
.pwa-root .cal-nav {
  display:inline-flex; gap:2px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--s2); padding:2px;
}
.pwa-root .cal-nav button {
  width:30px; height:30px; display:grid; place-items:center;
  color:var(--text-dim); border-radius:3px;
}
.pwa-root .cal-nav button:active {background:var(--s3); color:var(--text)}
.pwa-root .cal-title {
  font-family:var(--font-display); font-size:16px; font-weight:700;
  letter-spacing:-.3px; margin-left:6px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.pwa-root .cal-title .year {color:var(--muted); font-weight:400; margin-left:4px}
.pwa-root .mv-bar {
  padding:0 14px 10px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.pwa-root .view-toggle {
  display:flex; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--s2); padding:2px;
}
.pwa-root .view-toggle button {
  flex:1; padding:7px 0; font-size:12px; font-weight:500;
  color:var(--muted); border-radius:3px; white-space:nowrap;
}
.pwa-root .view-toggle button[data-active="true"] {
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); font-weight:600;
}
.pwa-root .cal-filters {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; flex-shrink:0;
}
.pwa-root .cal-filters::-webkit-scrollbar {display:none}
.pwa-root .f-chip {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  padding:4px 10px; font-size:11.5px; font-weight:500;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-dim);
  cursor:pointer;
}
.pwa-root .f-chip[data-active="true"] {
  background:var(--surface); color:var(--text); border-color:var(--border-hi);
  box-shadow:var(--shadow-sm);
}
.pwa-root .f-chip .dot {width:6px; height:6px; border-radius:50%; flex-shrink:0}
/* ══════════════════════════════════════════════════
   AGENDA — Vue Liste
   ══════════════════════════════════════════════════ */
.pwa-root .agenda {padding:0 0 20px}
.pwa-root .day-grp {padding:16px 16px 0}
.pwa-root .day-grp.today {background:linear-gradient(to bottom, var(--accent-dim), transparent 80px)}
.pwa-root .day-hdr {
  display:flex; align-items:baseline; gap:10px;
  padding-bottom:10px; border-bottom:1px solid var(--border);
  margin-bottom:10px;
}
.pwa-root .day-hdr .dn {
  font-family:var(--font-display); font-weight:800; font-size:22px;
  letter-spacing:-.4px; font-variant-numeric:tabular-nums;
}
.pwa-root .day-hdr .dw {
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--muted);
}
.pwa-root .day-hdr .dw.today {color:var(--accent)}
.pwa-root .day-hdr .dc {
  margin-left:auto;
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  letter-spacing:.3px;
}
.pwa-root .evt-card {
  display:grid; grid-template-columns:54px 1fr auto;
  gap:10px; align-items:start;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  /* [v750] Anthony 5mai26 : tap evt-card → modal vue rapide (handler global étendu
     dans pwa-mobile.js). Cursor + feedback tap pour signaler l'interactivité. */
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s;
}
.pwa-root .evt-card:active { background:var(--s2); }
.pwa-root .evt-card:last-child {border-bottom:none}
.pwa-root .evt-time {
  font-family:var(--mono); font-size:11px; font-weight:600;
  color:var(--text-dim); letter-spacing:.3px;
  padding-top:2px; line-height:1.4;
}
.pwa-root .evt-time .dur {color:var(--muted); font-weight:400; font-size:10px}
.pwa-root .evt-main {min-width:0; position:relative; padding-left:12px}
.pwa-root .evt-main::before {
  content:''; position:absolute; left:0; top:2px; bottom:2px;
  width:3px; border-radius:2px;
  background:var(--c, var(--muted));
}
.pwa-root .evt-main .t {
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
  letter-spacing:-.2px; color:var(--text);
}
.pwa-root .evt-main .n {font-size:11.5px; color:var(--text-dim); margin-top:2px; line-height:1.4}
.pwa-root .evt-main .meta {
  font-family:var(--mono); font-size:10px; color:var(--muted);
  margin-top:4px; letter-spacing:.3px;
  display:flex; gap:8px; align-items:center;
}
.pwa-root .evt-main .meta .sep {opacity:.5}
.pwa-root .evt-tag {
  flex-shrink:0;
  padding:2px 6px;
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.4px; text-transform:uppercase;
  border-radius:var(--radius-sm);
}
.pwa-root .evt-tag[data-t="visite"] {color:var(--froid); background:color-mix(in srgb, var(--froid) 14%, transparent); border:1px solid color-mix(in srgb, var(--froid) 25%, transparent)}
.pwa-root .evt-tag[data-t="rdv"] {color:var(--accent); background:var(--accent-dim); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent)}
.pwa-root .evt-tag[data-t="appel"] {color:var(--green); background:color-mix(in srgb, var(--green) 14%, transparent); border:1px solid color-mix(in srgb, var(--green) 25%, transparent)}
.pwa-root .evt-tag[data-t="signat"] {color:var(--chaud); background:color-mix(in srgb, var(--chaud) 14%, transparent); border:1px solid color-mix(in srgb, var(--chaud) 25%, transparent)}
.pwa-root .evt-tag[data-t="estim"] {color:var(--tiede); background:color-mix(in srgb, var(--tiede) 14%, transparent); border:1px solid color-mix(in srgb, var(--tiede) 25%, transparent)}
.pwa-root .day-empty {
  padding:14px 4px 18px;
  font-size:12px; color:var(--muted); font-style:italic;
  border-bottom:1px solid var(--border);
}
/* ══════════════════════════════════════════════════
   AGENDA — Vue Jour (timeline)
   ══════════════════════════════════════════════════ */
.pwa-root .jour-hero {
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; gap:10px;
  flex-shrink:0;
}
.pwa-root .jour-hero .big {
  font-family:var(--font-display); font-weight:800; font-size:32px;
  letter-spacing:-.8px; font-variant-numeric:tabular-nums;
}
.pwa-root .jour-hero .lbl {
  font-family:var(--mono); font-size:11px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--muted);
}
.pwa-root .jour-hero .count {
  margin-left:auto;
  font-family:var(--mono); font-size:10.5px; color:var(--text-dim);
  letter-spacing:.3px;
}
.pwa-root .jour-hero .count b {color:var(--text); font-weight:600}
.pwa-root .jour-ad {
  padding:8px 16px;
  border-bottom:1px solid var(--border);
  display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0;
}
.pwa-root .ad-pill {
  padding:4px 8px;
  font-size:11px; font-weight:500;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-dim);
  display:inline-flex; align-items:center; gap:6px;
}
.pwa-root .ad-pill .dot {width:5px; height:5px; border-radius:50%}
.pwa-root .jour-grid {position:relative; padding-bottom:40px}
.pwa-root .hr-row {
  display:grid; grid-template-columns:42px 1fr;
  border-bottom:1px solid var(--border);
  min-height:56px;
}
.pwa-root .hr-lbl {
  padding:4px 6px 0 10px;
  font-family:var(--mono); font-size:10px; color:var(--muted);
  letter-spacing:.3px;
  border-right:1px solid var(--border);
}
.pwa-root .hr-body {position:relative; padding:3px 8px}
.pwa-root .ev-block {
  position:absolute; left:8px; right:8px;
  padding:6px 8px;
  background:color-mix(in srgb, var(--c) 14%, var(--surface));
  border:1px solid color-mix(in srgb, var(--c) 34%, transparent);
  border-left:3px solid var(--c);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.pwa-root .ev-block .t {
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:-.1px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pwa-root .ev-block .n {
  font-size:11px; color:var(--text-dim); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pwa-root .ev-block .tm {font-family:var(--mono); font-size:9.5px; color:var(--muted); margin-top:2px; letter-spacing:.3px}
/* v495 : drag & drop état visuel */
.pwa-root .ev-block.dragging {
  z-index: 100;
  box-shadow: 0 8px 24px rgba(20,22,31,.18), 0 0 0 2px var(--c);
  transform: scale(1.04);
  transition: transform .12s ease, box-shadow .12s ease;
  opacity: .96;
}
.pwa-root .now-line {
  position:absolute; left:0; right:0;
  height:2px; background:var(--chaud);
  z-index:2;
}
.pwa-root .now-line::before {
  content:''; position:absolute; left:-4px; top:-3px;
  width:8px; height:8px; border-radius:50%;
  background:var(--chaud);
}
.pwa-root .fab {
  position:absolute; right:16px; bottom:calc(96px + var(--safe-bot));
  width:48px; height:48px; border-radius:50%;
  background:var(--text); color:var(--bg);
  display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(20,22,31,.2);
  z-index:5;
}
/* ══════════════════════════════════════════════════
   AGENDA — Vue Mois
   ══════════════════════════════════════════════════ */
.pwa-root .mois-wrap {display:flex; flex-direction:column; flex:1; min-height:0}
.pwa-root .cal-grid {
  display:grid; grid-template-columns:repeat(7, 1fr);
  background:var(--border); gap:1px;
  flex-shrink:0;
}
.pwa-root .cal-head {
  background:var(--bg);
  padding:7px 4px; font-size:9px; font-weight:600;
  letter-spacing:.6px; color:var(--muted); text-transform:uppercase;
  text-align:center;
}
.pwa-root .cal-day {
  background:var(--surface);
  min-height:54px; padding:4px 4px 3px;
  display:flex; flex-direction:column; gap:2px;
  position:relative; overflow:hidden; cursor:pointer;
}
.pwa-root .cal-day.outside {background:var(--s2)}
.pwa-root .cal-day.outside .dnum {color:var(--muted)}
.pwa-root .cal-day .dnum {font-size:11px; font-weight:600; color:var(--text-dim); padding:0 0 2px}
.pwa-root .cal-day.today .dnum {
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:10px;
}
.pwa-root .cal-day.selected {background:var(--accent-dim); outline:1.5px solid var(--accent); outline-offset:-1px; z-index:1}
.pwa-root .dot-row {display:flex; flex-wrap:wrap; gap:2px; margin-top:auto; padding-bottom:1px}
.pwa-root .dot-row .d {width:5px; height:5px; border-radius:50%}
.pwa-root .day-peek {
  padding:14px 16px 18px;
  border-top:1px solid var(--border);
  background:var(--surface);
  flex:1; min-height:0; overflow-y:auto;
}
.pwa-root .day-peek .phdr {display:flex; align-items:baseline; gap:10px; margin-bottom:10px}
.pwa-root .day-peek .phdr .dn {font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.4px}
.pwa-root .day-peek .phdr .dw {font-family:var(--mono); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted)}
.pwa-root .day-peek .phdr .add {
  margin-left:auto;
  padding:4px 10px; font-size:11px; font-weight:600;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text);
  display:inline-flex; align-items:center; gap:4px;
}
/* ══════════════════════════════════════════════════
   UTILS
   ══════════════════════════════════════════════════ */
.pwa-root .sep {opacity:.5}
.pwa-root .op-5 {opacity:.5}
.pwa-root .hidden {display:none !important}
/* Desktop fallback (pour dev/review sur laptop) : centre la PWA dans une "iPhone frame" */
@media (min-width: 701px) {
  .pwa-root, .pwa-root {background:#eceff4}
  .pwa-root .app-root {
    width:390px; height:844px;
    position:relative; inset:auto;
    margin:40px auto; padding:0;
    border-radius:40px; overflow:hidden;
    border:1px solid var(--border);
    box-shadow:0 1px 2px rgba(20,22,31,.05), 0 12px 40px rgba(20,22,31,.08);
  }
}


/* v427 tabbar rules retirées en v2.1.x — couleur des tabs gérée plus bas
   dans le bloc unique #__pwa_tabbar_host .tab.active (ligne ~96). */

/* ══════════════════════════════════════════════════
   v428 — Fixes : theme noir bg, tabbar fixed, biens photo, clic biens
   ══════════════════════════════════════════════════ */

/* Theme noir : appliquer aussi au body en dehors de .pwa-root
   (sinon le fond derrière la PWA reste clair) */
html[data-theme="noir"]{
  background:#000;
}
body[data-theme="noir"]{
  background:#000;
}
/* v453 : pwa-root noir dès le premier paint, sans dépendre de .is-mobile.pwa-active
   (ces classes sont ajoutées par JS après le paint initial → flash blanc sinon) */
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;
}
/* Overlays top-level en mode noir — indépendants de .is-mobile.pwa-active */
html[data-theme="noir"] #pwa-fb-overlay,
html[data-theme="noir"] #pwa-cr-overlay,
html[data-theme="noir"] #pwa-sr-overlay,
html[data-theme="noir"] #pwa-nt-overlay,
html[data-theme="noir"] #pwa-tasks-overlay,
html[data-theme="noir"] #pwa-settings-overlay,
html[data-theme="noir"] #pwa-compta-overlay {
  background: #000;
  color: #f2f3f7;
  --bg:#000; --surface:#0a0a0c; --s2:#121216; --s3:#1a1a20;
  --border:#34343f; --border-hi:#43434f;
  --text:#f2f3f7; --text-dim:#a8adbd; --muted:#5f6578;
  --accent:#8b7bff; --accent-hi:#a89dff; --accent-dim:rgba(139,123,255,.12);
  --chaud:#ff6680; --tiede:#f0c050; --froid:#5ca8ff; --green:#4fd49a;
}
/* v455 : Forcer la safe-area top en noir via pseudo-element sur html[data-theme=noir]
   — indépendant de body.is-mobile.pwa-active, s'applique dès le premier paint */
html[data-theme="noir"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #000;
  z-index: 100000;
  pointer-events: none;
}

/* v467 : Long press context menu animations */
@keyframes pwa-ctx-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pwa-ctx-pop {
  from { opacity: 0; transform: scale(0.92) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes pwa-qn-slide {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ════════════════════════════════════════════════════
   v472 — Module Dossiers (design Margot)
   ════════════════════════════════════════════════════ */
.pwa-root .dos-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.pwa-root .dos-h1 {
  font-family: var(--font-display, system-ui); font-weight: 800; font-size: 26px;
  letter-spacing: -.6px; line-height: 1.1;
  margin: 0;
}
.pwa-root .dos-sec-block { padding: 0 20px 18px; }
.pwa-root .dos-sec-block:last-child { padding-bottom: 24px; }
.pwa-root .dos-sec-lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--muted);
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.pwa-root .dos-sec-lbl .count { font-size: 10px; }

/* Dossier card */
.pwa-root .dossier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  position: relative;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.pwa-root .dossier:active { transform: scale(0.99); }
.pwa-root .dossier + .dossier { margin-top: 8px; }
.pwa-root .dossier.urgent {
  border-color: color-mix(in srgb, var(--chaud) 30%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chaud) 7%, transparent);
}
.pwa-root .dossier .top {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 12px;
}
.pwa-root .dossier .ico {
  width: 36px; height: 36px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--s2); color: var(--text-dim);
  flex-shrink: 0;
}
.pwa-root .dossier .ico.acq { background: color-mix(in srgb, var(--accent) 12%, var(--s2)); color: var(--accent); }
.pwa-root .dossier .ico.vend { background: color-mix(in srgb, #8257e5 12%, var(--s2)); color: #8257e5; }
.pwa-root .dossier .ico.suivi { background: color-mix(in srgb, var(--froid) 12%, var(--s2)); color: var(--froid); }
.pwa-root .dossier .id-block { flex: 1; min-width: 0; }
.pwa-root .dossier .ref {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .8px; color: var(--muted); text-transform: uppercase;
  margin-bottom: 2px;
}
.pwa-root .dossier .ttl {
  font-family: var(--font-display, system-ui); font-weight: 700; font-size: 14.5px;
  letter-spacing: -.2px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pwa-root .dossier .sub {
  font-size: 11.5px; color: var(--text-dim); margin-top: 1px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.pwa-root .dossier .score {
  font-family: var(--font-display, system-ui); font-weight: 800; font-size: 22px;
  letter-spacing: -.5px; font-variant-numeric: tabular-nums;
  text-align: right; line-height: 1;
  flex-shrink: 0;
}
.pwa-root .dossier .score-lbl {
  font-family: var(--mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
  text-align: right;
}

/* Status badge dossier */
.pwa-root .dos-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
  border-radius: 3px;
}
.pwa-root .dos-status .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pwa-root .dos-status.cha { color: var(--chaud); background: color-mix(in srgb, var(--chaud) 14%, transparent); border: 1px solid color-mix(in srgb, var(--chaud) 25%, transparent); }
.pwa-root .dos-status.tie { color: var(--tiede); background: color-mix(in srgb, var(--tiede) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tiede) 25%, transparent); }
.pwa-root .dos-status.fro { color: var(--froid); background: color-mix(in srgb, var(--froid) 14%, transparent); border: 1px solid color-mix(in srgb, var(--froid) 25%, transparent); }
.pwa-root .dos-status.gre { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); border: 1px solid color-mix(in srgb, var(--green) 25%, transparent); }
.pwa-root .dos-status.acc { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.pwa-root .dos-status.neu { color: var(--text-dim); background: var(--s2); border: 1px solid var(--border); }

/* Stage line (mini stepper) */
.pwa-root .stage {
  display: flex; align-items: center; gap: 0;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.pwa-root .stage .step {
  flex: 1; text-align: center;
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding: 6px 2px;
}
.pwa-root .stage .step.done { color: var(--text-dim); }
.pwa-root .stage .step.now { color: var(--text); font-weight: 700; }
.pwa-root .stage .step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--border);
}
.pwa-root .stage .step.done::before { background: var(--text-dim); }
.pwa-root .stage .step.now::before { background: var(--text); }
.pwa-root .stage .step:first-child::before { left: 50%; }
.pwa-root .stage .step:last-child::before { right: 50%; }

/* Dates row */
.pwa-root .dos-dates {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.pwa-root .date-block .k {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.pwa-root .date-block .v {
  font-family: var(--font-display, system-ui); font-weight: 700; font-size: 13px;
  letter-spacing: -.1px; color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 5px;
}
.pwa-root .date-block .v .day-of-week {
  font-size: 10px; font-weight: 500; color: var(--muted);
  text-transform: lowercase;
}
.pwa-root .date-block .v.alert { color: var(--chaud); }
.pwa-root .date-block .v.ok { color: var(--green); }

/* donna nudge */
.pwa-root .dos-nudge {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px; margin-top: 10px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 4px;
  font-size: 11.5px; color: var(--text);
  line-height: 1.45;
}
.pwa-root .dos-nudge .spark { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.pwa-root .dos-nudge b { color: var(--accent); font-weight: 700; }

/* v515 : accordéon donna replié par défaut sur cards dossiers */
.pwa-root .dos-nudge-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px; margin-top: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 4px;
  font-size: 12px; color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.pwa-root .dos-nudge-toggle:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.pwa-root .dos-nudge-toggle .spark { color: var(--accent); flex-shrink: 0; }
.pwa-root .dos-nudge-toggle .lbl { flex: 1; text-align: left; }
.pwa-root .dos-nudge-toggle .chev {
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(0.2,0.8,0.2,1);
}
.pwa-root .dossier.nudge-open .dos-nudge-toggle .chev {
  transform: rotate(180deg);
}
.pwa-root .dossier.nudge-open .dos-nudge-toggle {
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}
.pwa-root .dos-nudge-collapsed {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(0.2,0.8,0.2,1);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 0 0 4px 4px;
  font-size: 11.5px; color: var(--text);
  line-height: 1.5;
}
.pwa-root .dossier.nudge-open .dos-nudge-collapsed {
  /* max-height set inline via JS pour transition smooth */
  padding: 10px 12px;
}
.pwa-root .dos-nudge-collapsed b { color: var(--accent); font-weight: 700; }


/* v463 : Skeleton loaders — animation shimmer */
@keyframes pwa-skel-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.pwa-root .pwa-skel-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  animation: pwa-skel-pulse 1.4s ease-in-out infinite;
}
.pwa-root .pwa-skel-avatar {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--s2); flex-shrink: 0;
}
.pwa-root .pwa-skel-lines {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
}
.pwa-root .pwa-skel-line {
  height: 11px; border-radius: 3px; background: var(--s2);
}
.pwa-root .pwa-skel-line.w70 { width: 70%; }
.pwa-root .pwa-skel-line.w40 { width: 40%; }
.pwa-root .pwa-skel-card {
  height: 80px; margin: 10px 16px; border-radius: 10px;
  background: var(--s2);
  animation: pwa-skel-pulse 1.4s ease-in-out infinite;
}
.pwa-root .pwa-skel-kpi {
  height: 70px; border-radius: 10px;
  background: var(--s2);
  animation: pwa-skel-pulse 1.4s ease-in-out infinite;
}

/* v428 position:fixed tabbar (incorrect) moved to master block */

/* Biens : le thumb doit contenir l'img en rapport 1/1 */
.pwa-root .br-thumb{
  position:relative;
  width:54px; height:54px;
  border-radius:8px;
  overflow:hidden;
  background:var(--s2);
  flex-shrink:0;
  display:grid;
  place-items:center;
}
.pwa-root .br-thumb .br-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.pwa-root .br-thumb .br-icon-fallback{
  color:var(--muted);
}
.pwa-root .br-thumb .br-img[style*="display:block"] + .br-icon-fallback,
.pwa-root .br-thumb:has(.br-img[style*="display:block"]) .br-icon-fallback{
  display:none;
}
/* Biens row cliquables */
.pwa-root .bien-row{
  cursor:pointer;
  transition:background .1s;
}
.pwa-root .bien-row:active{
  background:var(--s2);
}

/* ══════════════════════════════════════════════════
   v430 — Fiche bien + Création fullscreen (design Margot)
   ══════════════════════════════════════════════════ */

/* Overlay fullscreen pour les écrans modaux (fiche bien, création) */
body.is-mobile.pwa-active #pwa-fb-overlay,
body.is-mobile.pwa-active #pwa-cr-overlay{
  position:fixed !important;
  inset:0 !important;
  /* [#pwa-zindex-audit v630] 120 → 100005. Cf. pwa-sr/nt-overlay : passaient
     sous la tabbar PWA (99999). Désormais au-dessus tabbar, sous les modals. */
  z-index:100005 !important;
  background:var(--bg, #f7f8fa);
  display:none !important;
  flex-direction:column !important;
  overflow:hidden !important;
  /* [v635] Plus de padding-bottom pour la tabbar : depuis l'audit z-index v630,
     l'overlay (100005) passe AU-DESSUS de la tabbar (99999) qui est donc
     masquée quand on est sur la fiche bien. Anthony : "la navbar disparaît,
     à la limite c'est pas grave mais faut que ça aille jusqu'en bas". On garde
     uniquement le safe-area pour le notch iOS. Avant : 62px + safe-area. */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
body.is-mobile.pwa-active #pwa-fb-overlay.open,
body.is-mobile.pwa-active #pwa-cr-overlay.open{
  display:flex !important;
}
/* Scrolls propres dans les overlays */
.pwa-root #pwa-fb-overlay .body-x .scroll,
.pwa-root #pwa-cr-overlay .body-x .scroll,
#pwa-fb-overlay .body-x .scroll,
#pwa-cr-overlay .body-x .scroll{
  flex:1; overflow-y:auto; min-height:0;
  -webkit-overflow-scrolling:touch;
}
#pwa-fb-overlay .screen,
#pwa-cr-overlay .screen{
  display:flex; flex-direction:column;
  height:100%; position:relative;
  padding-top:env(safe-area-inset-top, 0px);
}
#pwa-fb-overlay .body-x,
#pwa-cr-overlay .body-x{
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}
.pwa-root .sec-head .num {font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:1.5px; color:var(--accent); text-transform:uppercase}
.pwa-root .back-hdr .ttl-wrap {flex:1; min-width:0; margin-left:4px}
.pwa-root .back-hdr .r-action {width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--text-dim); background:transparent}
.pwa-root /* ═══ FICHE BIEN ═══ */
.fb-gallery {position:relative; width:100%; height:320px; background:#14161f; flex-shrink:0; overflow:hidden}
.pwa-root .fb-gallery .g-slide {width:100%; height:100%; background-size:cover; background-position:center}
.pwa-root .fb-gallery .g-overlay {position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 18%, transparent 65%, rgba(0,0,0,.55) 100%); pointer-events:none}
.pwa-root .fb-gallery .g-back, .pwa-root .fb-gallery .g-act {position:absolute; width:36px; height:36px; border-radius:50%; background:rgba(20,22,31,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); display:grid; place-items:center; color:#fff; z-index:2}
.pwa-root .fb-gallery .g-back {top:50px; left:16px}
.pwa-root .fb-gallery .g-actions {position:absolute; top:50px; right:16px; display:flex; gap:8px; z-index:2}
/* v456 : les g-act dans .g-actions ne sont plus absolute (le conteneur l'est) */
.pwa-root .fb-gallery .g-actions .g-act {position:static}
.pwa-root .fb-gallery .g-count {position:absolute; bottom:14px; right:14px; padding:4px 10px; background:rgba(20,22,31,.6); backdrop-filter:blur(10px); color:#fff; font-family:var(--mono); font-size:11px; font-weight:600; border-radius:999px; z-index:2}
.pwa-root .fb-gallery .g-dots {position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:2}
.pwa-root .fb-gallery .g-dot {width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.45)}
.pwa-root .fb-gallery .g-dot.active {background:#fff; width:18px; border-radius:3px}
.pwa-root .fb-sticky {position:absolute; top:0; left:0; right:0; z-index:10; background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--border); padding:48px 16px 10px}
.pwa-root .fb-sticky .row {display:flex; align-items:center; gap:10px}
.pwa-root .fb-sticky .back {width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--text); background:var(--s2)}
.pwa-root .fb-sticky .s-main {flex:1; min-width:0}
.pwa-root .fb-sticky .s-addr {font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pwa-root .fb-sticky .s-price {font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--text); font-variant-numeric:tabular-nums}
.pwa-root .fb-hero {padding:18px 20px 14px; border-bottom:1px solid var(--border)}
.pwa-root .fb-hero .h-badges {display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap}
.pwa-root .fb-hero h1 {font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.5px; line-height:1.2; margin-bottom:4px}
.pwa-root .fb-hero .h-addr {font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:5px}
.pwa-root .fb-hero .h-price-row {margin-top:14px; display:flex; align-items:baseline; gap:10px}
.pwa-root .fb-hero .h-price {font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--text); letter-spacing:-.6px; font-variant-numeric:tabular-nums}
.pwa-root .fb-hero .h-ppm {font-size:12px; color:var(--muted); font-family:var(--mono); letter-spacing:.2px}
.pwa-root .fb-actions {padding:14px 20px; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; border-bottom:1px solid var(--border)}
.pwa-root .fb-qa {display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 0; background:var(--s2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:10.5px; font-weight:600; transition:all .15s}
.pwa-root .fb-qa:hover {background:var(--s3)}
.pwa-root .fb-qa.accent {background:var(--accent-dim); border-color:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent)}
.pwa-root .fb-sec {padding:18px 20px 8px}
.pwa-root .fb-sec .lbl {font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.pwa-root .fb-infos {padding:0 20px 6px; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pwa-root .fb-info {background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:12px 14px; display:flex; flex-direction:column; gap:4px}
.pwa-root .fb-info.full {grid-column:1/-1}
.pwa-root .fb-info .k {font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted)}
.pwa-root .fb-info .v {font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.2px; color:var(--text)}
.pwa-root .fb-info .v-sub {font-size:11.5px; color:var(--text-dim); font-weight:400; font-family:var(--font); letter-spacing:0; margin-top:1px}
.pwa-root .fb-info .dpe-row {display:flex; align-items:center; gap:8px}
.pwa-root .fb-info .dpe-pill {display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:800; font-size:13px; color:#fff}
.pwa-root .fb-map {margin:14px 20px 24px; height:180px; border-radius:var(--radius-lg); border:1px solid var(--border); overflow:hidden; position:relative; background: linear-gradient(135deg, #d8e4f0 0%, #e7ebf2 100%)}
.pwa-root [data-theme="noir"] .fb-map {background:linear-gradient(135deg, #1a2536 0%, #12141a 100%)}
.pwa-root .fb-map .map-svg {position:absolute; inset:0; width:100%; height:100%}
.pwa-root .fb-map .pin {position:absolute; top:50%; left:50%; transform:translate(-50%, -100%); display:flex; flex-direction:column; align-items:center}
.pwa-root .fb-map .pin .p-dot {width:14px; height:14px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.2)}
.pwa-root .fb-map .map-ctrl {position:absolute; bottom:10px; right:10px; display:flex; flex-direction:column; gap:4px}
.pwa-root .fb-map .map-btn {width:30px; height:30px; border-radius:var(--radius); background:var(--surface); color:var(--text); border:1px solid var(--border); display:grid; place-items:center; box-shadow:var(--shadow-sm)}
.pwa-root .fb-tags {padding:0 20px 8px; display:flex; flex-wrap:wrap; gap:6px}
.pwa-root .fb-tag {display:inline-flex; align-items:center; gap:5px; padding:6px 10px; background:var(--s2); border:1px solid var(--border); border-radius:999px; font-size:12px; font-weight:500; color:var(--text)}
.pwa-root /* ═══ CRÉATION ═══ */
.cr-topbar {display:flex; align-items:center; justify-content:space-between; padding:8px 12px 10px 10px; flex-shrink:0; border-bottom:1px solid var(--border)}
.pwa-root .cr-topbar .cancel {padding:8px 14px; font-size:14px; font-weight:500; color:var(--text-dim); border-radius:var(--radius); background:transparent}
.pwa-root .cr-topbar .ttl {font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.2px}
.pwa-root .cr-topbar .save {padding:8px 14px; background:var(--text); color:var(--bg); font-size:13px; font-weight:600; border-radius:var(--radius)}
.pwa-root .cr-topbar .save:disabled {opacity:.4}
.pwa-root .cr-typepicker {display:flex; gap:4px; padding:10px 14px 2px; flex-shrink:0; background:var(--bg)}
.pwa-root .cr-typepicker button {flex:1; padding:7px 0; font-size:12px; font-weight:600; color:var(--text-dim); border-radius:var(--radius); transition:all .15s}
.pwa-root .cr-typepicker button.active {background:var(--s3); color:var(--text)}
.pwa-root .cr-form {padding:10px 0 100px}
.pwa-root .cr-section {padding:8px 20px 14px; border-bottom:1px solid var(--border)}
.pwa-root .cr-section:last-of-type {border-bottom:none}
.pwa-root .cr-section .s-lbl {font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between}
.pwa-root .cr-section .s-lbl .num {font-size:9.5px; color:var(--accent); font-weight:600}
.pwa-root .cr-field {display:flex; flex-direction:column; gap:6px; padding:10px 0}
.pwa-root .cr-field + .cr-field {border-top:1px solid var(--border)}
.pwa-root .cr-field .f-lbl {font-size:11.5px; font-weight:500; color:var(--muted); font-family:var(--mono); letter-spacing:.4px; text-transform:uppercase}
.pwa-root .cr-field .f-lbl .req {color:var(--chaud); margin-left:2px}
.pwa-root .cr-field .f-input {background:transparent; border:none; padding:2px 0; font-size:15.5px; color:var(--text); width:100%; outline:none; font-weight:500}
.pwa-root .cr-field .f-input::placeholder {color:var(--muted); font-weight:400}
.pwa-root .cr-field textarea.f-input {resize:none; min-height:60px; line-height:1.5; font-size:14.5px; font-weight:400}
.pwa-root .cr-field .f-sub {font-size:11.5px; color:var(--muted); margin-top:2px}
.pwa-root .cr-row2 {display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pwa-root .cr-row2 .cr-field {border-top:none; padding-top:10px}
.pwa-root .cr-pills {display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.pwa-root .cr-pill {padding:6px 11px; background:var(--s2); border:1px solid var(--border); border-radius:999px; font-size:12.5px; font-weight:500; color:var(--text); transition:all .15s}
.pwa-root .cr-pill.active {background:var(--text); color:var(--bg); border-color:var(--text)}
.pwa-root .cr-chip-add {display:inline-flex; align-items:center; gap:6px; padding:8px 12px; background:var(--s2); border:1px dashed var(--border-hi); border-radius:var(--radius); font-size:13px; font-weight:500; color:var(--text-dim)}
.pwa-root .cr-chip-linked {display:inline-flex; align-items:center; gap:8px; padding:6px 10px 6px 6px; background:var(--s2); border:1px solid var(--border); border-radius:999px; font-size:13px; font-weight:500}
.pwa-root .cr-chip-linked .x {color:var(--muted); padding:0 2px}
.pwa-root .cr-photos {display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:8px}
.pwa-root .cr-photo {aspect-ratio:1; border-radius:var(--radius); background-size:cover; background-position:center; position:relative}
.pwa-root .cr-photo-add {aspect-ratio:1; border-radius:var(--radius); background:var(--s2); border:1px dashed var(--border-hi); display:grid; place-items:center; color:var(--muted)}
.pwa-root .cr-footer {position:absolute; left:0; right:0; bottom:0; padding:12px 16px 28px; background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-top:1px solid var(--border); display:flex; gap:8px; z-index:5}
.pwa-root .cr-footer .btn-p {flex:1; padding:13px; background:var(--text); color:var(--bg); font-size:14px; font-weight:600; border-radius:var(--radius); display:inline-flex; align-items:center; justify-content:center; gap:8px}
.pwa-root .sr-header .cancel {padding:8px 6px; font-size:14px; font-weight:500; color:var(--text)}
.pwa-root .sr-filter .f-count {font-family:var(--mono); font-size:10px; font-weight:600; opacity:.75}
.pwa-root .sr-row .sr-icon.saved {background:color-mix(in srgb, var(--tiede) 14%, var(--s2)); color:var(--tiede)}

/* ══════════════════════════════════════════════════
   v431 — Recherche globale + Notes client (design Margot)
   ══════════════════════════════════════════════════ */

/* Overlays fullscreen */
body.is-mobile.pwa-active #pwa-sr-overlay,
body.is-mobile.pwa-active #pwa-nt-overlay{
  position:fixed !important;
  inset:0 !important;
  /* [#pwa-zindex-audit v630] 100 → 100005. La tabbar PWA est à 99999 (sortie du
     stacking context de pwa-root via __pwa_tabbar_host), ce qui veut dire que
     ces overlays full-screen passaient SOUS la tabbar. Maintenant au-dessus,
     mais sous les modals critiques (100010+) et le pdf-loader (100015). */
  z-index:100005 !important;
  background:var(--bg, #f7f8fa);
  display:none !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
body.is-mobile.pwa-active #pwa-sr-overlay.open,
body.is-mobile.pwa-active #pwa-nt-overlay.open{
  display:flex !important;
}
#pwa-sr-overlay .screen,
#pwa-nt-overlay .screen{
  display:flex; flex-direction:column;
  height:100%; position:relative;
  padding-top:env(safe-area-inset-top, 0px);
}
#pwa-sr-overlay .body-x,
#pwa-nt-overlay .body-x{
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}
#pwa-sr-overlay .body-x .scroll,
#pwa-nt-overlay .body-x .scroll{
  flex:1; overflow-y:auto; min-height:0;
  -webkit-overflow-scrolling:touch;
}
/* v2.1.x — Fix bouton "Ajouter une note" caché par le tabbar PWA (z-index:9998).
   Avant v515, le tabbar était dans .pwa-root avec stacking context limité.
   Depuis v515, il est sorti dans #__pwa_tabbar_host (body direct) z-index:9998
   → le composer .nt-composer (bottom:0 dans le body-x) passait dessous.
   Fix : décale le composer de la hauteur du tabbar (62px + safe-area).
   v2.1.x bis : avec viewport interactive-widget=overlays-content, on ajoute aussi
   keyboard-inset-bottom pour que le composer monte au-dessus du clavier (sans
   redimensionner toute la PWA → la navbar reste cachée sous le clavier, c'est OK). */
body.is-mobile.pwa-active #pwa-nt-overlay .nt-composer {
  bottom: calc(max(env(keyboard-inset-bottom, 0px), 62px + env(safe-area-inset-bottom, 0px))) !important;
  padding-bottom: 10px !important;
}
/* Padding scroll pour que les dernières notes ne soient pas cachées
   sous le composer + tabbar / clavier */
body.is-mobile.pwa-active #pwa-nt-overlay .body-x .scroll {
  padding-bottom: calc(80px + max(env(keyboard-inset-bottom, 0px), 62px + env(safe-area-inset-bottom, 0px)));
}
.pwa-root /* ═══ RECHERCHE ═══ */
.sr-header {padding:8px 12px 12px; display:flex; align-items:center; gap:8px; flex-shrink:0}
.pwa-root .sr-input-wrap {flex:1; position:relative; display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--s2); border:1px solid var(--border); border-radius:var(--radius)}
.pwa-root .sr-input-wrap.focused {background:var(--surface); border-color:var(--text)}
.pwa-root .sr-input-wrap .search-ic {color:var(--muted); flex-shrink:0}
.pwa-root .sr-input-wrap input {flex:1; min-width:0; background:transparent; border:none; outline:none; font-size:15px; font-weight:500; color:var(--text)}
.pwa-root .sr-input-wrap input::placeholder {color:var(--muted); font-weight:400}
.pwa-root .sr-input-wrap .clear {width:18px; height:18px; border-radius:50%; background:var(--border-hi); color:var(--bg); display:grid; place-items:center; flex-shrink:0}
.pwa-root .sr-header .cancel {padding:8px 6px; font-size:14px; font-weight:500; color:var(--text)}
.pwa-root .sr-filters {display:flex; gap:6px; padding:0 14px 12px; overflow-x:auto; scrollbar-width:none; flex-shrink:0}
.pwa-root .sr-filters::-webkit-scrollbar {display:none}
.pwa-root .sr-filter {flex-shrink:0; padding:6px 11px; background:var(--s2); border:1px solid var(--border); border-radius:999px; font-size:12px; font-weight:600; color:var(--text-dim); display:inline-flex; align-items:center; gap:5px}
.pwa-root .sr-filter.active {background:var(--text); color:var(--bg); border-color:var(--text)}
.pwa-root .sr-filter .f-count {font-family:var(--mono); font-size:10px; font-weight:600; opacity:.75}
.pwa-root .sr-group {padding:8px 0 16px}
.pwa-root .sr-group-hdr {display:flex; align-items:center; justify-content:space-between; padding:10px 20px 6px}
.pwa-root .sr-group-hdr .title {font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted)}
.pwa-root .sr-group-hdr .more {font-size:12px; color:var(--text-dim); font-weight:500}
.pwa-root .sr-row {display:flex; align-items:center; gap:12px; padding:10px 20px}
.pwa-root .sr-row .sr-icon {width:38px; height:38px; border-radius:var(--radius); display:grid; place-items:center; background:var(--s2); color:var(--text-dim); flex-shrink:0}
.pwa-root .sr-row .sr-icon.client {background:var(--accent-dim); color:var(--accent)}
.pwa-root .sr-row .sr-icon.event {background:color-mix(in srgb, var(--froid) 14%, var(--s2)); color:var(--froid)}
.pwa-root .sr-row .sr-icon.saved {background:color-mix(in srgb, var(--tiede) 14%, var(--s2)); color:var(--tiede)}
.pwa-root .sr-row .avatar-sm {width:38px; height:38px; border-radius:50%; flex-shrink:0}
.pwa-root .sr-row .thumb-sm {width:46px; height:38px; border-radius:var(--radius); flex-shrink:0; background-size:cover; background-position:center}
.pwa-root .sr-row .r-main {flex:1; min-width:0}
.pwa-root .sr-row .r-title {font-size:14px; font-weight:600; color:var(--text); letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pwa-root .sr-row .r-title mark {background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); padding:0; border-radius:2px}
.pwa-root .sr-row .r-sub {font-size:12px; color:var(--text-dim); margin-top:1px; display:flex; align-items:center; gap:6px}
.pwa-root .sr-row .r-sub .sep {color:var(--border-hi)}
.pwa-root .sr-row .r-chev {color:var(--muted)}
.pwa-root .sr-recent {display:flex; align-items:center; gap:10px; padding:10px 20px}
.pwa-root .sr-recent .rc-ic {width:28px; height:28px; border-radius:50%; background:var(--s2); color:var(--muted); display:grid; place-items:center; flex-shrink:0}
.pwa-root .sr-recent .rc-txt {flex:1; font-size:14px; color:var(--text); font-weight:500}
.pwa-root .sr-recent .rc-remove {color:var(--muted); padding:4px}
.pwa-root .sr-empty {padding:60px 40px; text-align:center; color:var(--muted)}
.pwa-root .sr-empty .e-ic {width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--s2); display:grid; place-items:center; color:var(--muted)}
.pwa-root .sr-empty h3 {font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text); letter-spacing:-.2px; margin-bottom:4px}
.pwa-root .sr-empty p {font-size:13px; line-height:1.5}
.pwa-root /* ═══ NOTES ═══ */
.nt-header {padding:6px 14px 14px; display:flex; align-items:center; gap:4px; flex-shrink:0; border-bottom:1px solid var(--border)}
.pwa-root .nt-header .back {width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--text); background:transparent}
.pwa-root .nt-header .h-main {flex:1; min-width:0; margin-left:4px}
.pwa-root .nt-header .h-client {font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.2px}
.pwa-root .nt-header .h-sub {font-size:11px; color:var(--muted); margin-top:1px; font-family:var(--mono); letter-spacing:.3px; text-transform:uppercase}
.pwa-root .nt-feed {padding:16px 20px 120px; display:flex; flex-direction:column; gap:14px}
.pwa-root .nt-date {display:flex; align-items:center; gap:10px; margin-top:8px; margin-bottom:-4px}
.pwa-root .nt-date:first-child {margin-top:0}
.pwa-root .nt-date .line {flex:1; height:1px; background:var(--border)}
.pwa-root .nt-date .lbl {font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted)}
.pwa-root .nt-card {background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:13px 14px; display:flex; flex-direction:column; gap:8px}
.pwa-root .nt-card .nt-top {display:flex; align-items:center; gap:8px}
.pwa-root .nt-card .nt-av {width:24px; height:24px; border-radius:50%; font-size:10px; flex-shrink:0}
.pwa-root .nt-card .nt-who {font-size:12px; font-weight:600; color:var(--text)}
.pwa-root .nt-card .nt-when {font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.2px; margin-left:auto}
.pwa-root .nt-card .nt-body {font-size:14px; line-height:1.55; color:var(--text)}
.pwa-root .nt-card .nt-body em {font-style:normal; color:var(--accent); font-weight:600}
.pwa-root .nt-card.self {background:var(--s2)}
.pwa-root .nt-composer {position:absolute; left:0; right:0; bottom:0; background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-top:1px solid var(--border); padding:10px 14px 28px}
.pwa-root .nt-composer .wrap {display:flex; align-items:flex-end; gap:8px; background:var(--s2); border:1px solid var(--border); border-radius:20px; padding:8px 8px 8px 14px}
.pwa-root .nt-composer .wrap.focused {background:var(--surface); border-color:var(--text)}
.pwa-root .nt-composer textarea {flex:1; min-width:0; background:transparent; border:none; outline:none; resize:none; font-size:14.5px; line-height:1.4; color:var(--text); max-height:100px; padding:6px 0; font-family:var(--font)}
.pwa-root .nt-composer textarea::placeholder {color:var(--muted)}
.pwa-root .nt-composer .send {width:32px; height:32px; border-radius:50%; background:var(--text); color:var(--bg); display:grid; place-items:center; flex-shrink:0}
.pwa-root .nt-composer .send:disabled {opacity:.3; background:var(--border-hi)}



/* ══════════════════════════════════════════════════
   v433 — NAV BAR FIX ABSOLU
   Stratégie la plus simple : tabbar en position:fixed + bg solide,
   body PWA en padding-bottom pour pas cacher le contenu scrollable.
   ══════════════════════════════════════════════════ */

/* 1. Root PWA : remplit le viewport dynamique iOS */
body.is-mobile.pwa-active #pwa-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  background: var(--bg, #f7f8fa) !important;
  color: var(--text, #14161f);
  z-index: 50 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  /* v2.1.x — padding-bottom retiré : il créait un gap blanc visible sous le contenu.
     Le scroll des vues compense lui-même la tabbar fixed via padding-bottom (voir
     règle .scroll plus bas). */
  padding-bottom: 0 !important;
}

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

/* 2. Status bar simulée */
body.is-mobile.pwa-active #pwa-root > .sb {
  flex-shrink: 0 !important;
}

/* 3. App body scroll */
body.is-mobile.pwa-active #pwa-root > .app-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
}

/* Views */
body.is-mobile.pwa-active #pwa-root .view {
  display: none !important;
}
body.is-mobile.pwa-active #pwa-root .view.active {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Scrollable zones */
body.is-mobile.pwa-active #pwa-root .scroll,
body.is-mobile.pwa-active #pwa-root .mois-wrap,
body.is-mobile.pwa-active #pwa-root .agenda-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  /* v2.1.x — fix #68 : padding-bottom = hauteur tabbar + safe-area + marge,
     pour que la dernière ligne du contenu ne soit pas cachée derrière la
     tabbar fixed. Avant : on ne pouvait pas scroller jusqu'en bas. */
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 16px) !important;
}

/* 4. TAB BAR : POSITION FIXED BOTTOM — GARANTIE VISIBLE
   On sort la tabbar du flow flex pour qu'elle soit TOUJOURS ancrée au bas
   du viewport iOS, quel que soit l'état de la barre Safari. */
body.is-mobile.pwa-active #tabbar,
body.is-mobile.pwa-active #pwa-root .tabbar,
body.is-mobile.pwa-active #__pwa_tabbar_host .tabbar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 9998 !important;
  background: var(--surface, #ffffff) !important;
  border-top: 1px solid var(--border, #e4e7ee) !important;
  /* v2.1.x — fix #54 : padding-bottom réduit 8px → 4px pour réduire le gap blanc
     visible sous les icônes de la tabbar. La safe-area iOS reste compensée. */
  padding: 6px 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 72px 1fr 1fr !important;
  align-items: stretch !important;
  min-height: 62px !important;
}

/* Noir */
html[data-theme="noir"] body.is-mobile.pwa-active #tabbar,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root .tabbar,
html[data-theme="noir"] body.is-mobile.pwa-active #__pwa_tabbar_host .tabbar {
  background: #0a0a0c;
  border-top-color: #1f1f27;
}

/* v2.1.x — Tab styling : la couleur (et donc currentColor des SVG inline)
   est gérée par #__pwa_tabbar_host .tab[:not](.active) plus haut (lignes ~90-101).
   Pas d'override fill/stroke ici : les SVG inline injectés par applyNavOrder()
   depuis NAV_SVG[id] (outline) ou NAV_SVG[id+'-active'] (filled) ont déjà leurs
   bons attributes. Forcer fill:none ici écrase ces attributes et casse l'icône
   filled quand le tab est actif. */

/* Bouton + central */
body.is-mobile.pwa-active #tabbar .tab-plus,
body.is-mobile.pwa-active #pwa-root .tab-plus {
  align-self: center !important;
  justify-self: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
  background: var(--text, #14161f);
  color: var(--bg, #ffffff);
  display: grid !important;
  place-items: center !important;
  border: none !important;
  cursor: pointer;
  margin-top: -8px !important;
}
body.is-mobile.pwa-active #tabbar .tab-plus svg,
body.is-mobile.pwa-active #pwa-root .tab-plus svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2 !important;
}

/* v438/v440 : chips Mes clients / Mes biens — toggle visuel */
.pwa-root #pwa-clients-chip-mine,
.pwa-root #pwa-biens-chip-mine {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
}
.pwa-root #pwa-clients-chip-mine[data-active="false"],
.pwa-root #pwa-biens-chip-mine[data-active="false"] {
  background: transparent;
  color: var(--text);
  border-color: var(--border-hi);
}

/* v440 : sticky-top pour Clients et Biens (header + filters restent en haut) */
body.is-mobile.pwa-active #pwa-root .view.active > .sticky-top {
  flex-shrink: 0 !important;
  position: relative;
  z-index: 10;
  background: var(--bg, #f7f8fa);
  border-bottom: 1px solid var(--border);
}
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root .view.active > .sticky-top {
  background: #000;
  border-bottom-color: #1f1f27;
}
/* Quand sticky-top présent, le .scroll prend le reste */
body.is-mobile.pwa-active #pwa-root .view.active:has(.sticky-top) > .scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* ═══════════════════════════════════════════════════
   v441 — Agenda : masquer bouton + Nouveau, sticky top, vue Semaine
   ═══════════════════════════════════════════════════ */

/* Masquer tout bouton d'ajout dans le top agenda PWA (vient peut-être du desktop) */
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .cal-top .add-btn,
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .cal-top .agenda-add-btn,
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .cal-top button[onclick*="openAgendaForm"],
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .cal-top-r .add-btn,
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .phdr .add,
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .fab {
  display: none !important;
}

/* Top agenda sticky : cal-top + mv-bar + cal-filters toujours en haut */
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .agenda-body {
  display: flex !important;
  flex-direction: column !important;
}
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .cal-top,
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .mv-bar,
body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .cal-filters {
  flex-shrink: 0 !important;
  background: var(--bg, #f7f8fa);
  z-index: 10;
}
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .cal-top,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .mv-bar,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root .view[data-view="agenda"] .cal-filters {
  background: #000;
}

/* Cal filters : horizontal scroll si trop large */
.pwa-root .cal-filters {
  display: flex;
  gap: 6px;
  padding: 8px 14px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.pwa-root .cal-filters::-webkit-scrollbar { display: none }
.pwa-root .cal-filters .f-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .15s;
}
.pwa-root .cal-filters .f-chip .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: .4;
  transition: opacity .15s;
}
.pwa-root .cal-filters .f-chip[data-active="true"] {
  background: var(--s2);
  color: var(--text);
  border-color: var(--border-hi);
}
.pwa-root .cal-filters .f-chip[data-active="true"] .dot { opacity: 1 }
.pwa-root .cal-filters .f-chip[data-active="false"] {
  opacity: .55;
}

/* Vue Semaine : grid 7 colonnes compact */
.pwa-root #agenda-semaine {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pwa-root #agenda-semaine .sem-hdr {
  display: grid;
  grid-template-columns: 40px repeat(7, 1fr);
  gap: 0;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
  border-bottom: 1px solid var(--border);
}
.pwa-root #agenda-semaine .sem-hdr .sem-day-hdr {
  padding: 8px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-right: 1px solid var(--border);
}
.pwa-root #agenda-semaine .sem-hdr .sem-day-hdr.today {
  color: var(--text);
  background: var(--accent-dim);
}
.pwa-root #agenda-semaine .sem-hdr .sem-day-hdr .num {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}
.pwa-root #agenda-semaine .sem-body {
  padding: 10px 14px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pwa-root #agenda-semaine .sem-day-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pwa-root #agenda-semaine .sem-day-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.pwa-root #agenda-semaine .sem-day-lbl.today {
  color: var(--accent);
}
.pwa-root #agenda-semaine .sem-day-lbl .dnum {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-right: 6px;
}
.pwa-root #agenda-semaine .sem-evt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--s2);
  cursor: pointer;
}
.pwa-root #agenda-semaine .sem-evt:active {
  background: var(--s3);
}
.pwa-root #agenda-semaine .sem-evt .time {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  flex-shrink: 0;
}
.pwa-root #agenda-semaine .sem-evt .bar {
  width: 3px;
  min-height: 24px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pwa-root #agenda-semaine .sem-evt .main {
  flex: 1;
  min-width: 0;
}
.pwa-root #agenda-semaine .sem-evt .title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pwa-root #agenda-semaine .sem-evt .meta {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}
.pwa-root #agenda-semaine .sem-empty {
  padding: 14px 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* v441 : Masquer les boutons d'ajout dans l'agenda PWA */
body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .add-btn,
body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .cal-top-r .add-btn,
body.is-mobile.pwa-active #pwa-root [data-view="agenda"] button[onclick*="openAgendaForm"],
body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .agenda-add-btn,
body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .phdr .add,
body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .fab {
  display: none !important;
}

/* v441 : Top bar agenda sticky (cal-top + mv-bar + cal-filters) */
body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .cal-top,
body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .mv-bar,
body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .cal-filters {
  flex-shrink: 0 !important;
  background: var(--bg, #f7f8fa);
  z-index: 9;
}
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .cal-top,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .mv-bar,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-root [data-view="agenda"] .cal-filters {
  background: #000;
}

/* v441 : Filtres agenda PWA — style identique desktop */
.pwa-root .cal-filters {
  display: flex;
  gap: 6px;
  padding: 6px 14px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.pwa-root .cal-filters::-webkit-scrollbar { display: none; }
.pwa-root .cal-filters .f-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.pwa-root .cal-filters .f-chip[data-active="true"] {
  /* v2.1.x — fix #51 (v2) : avant background:var(--text) → noir sur thème light
     (--text=noir) et blanc sur thème noir (--text=blanc), d'où "couleurs inversées
     selon le thème" rapporté par Anthony. Pattern desktop : actif=surface (boost),
     inactif=s2 (atténué). Mêmes valeurs dans les deux thèmes. */
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-hi, var(--border));
}
.pwa-root .cal-filters .f-chip[data-active="false"] {
  background: var(--s2);
  color: var(--text-dim);
  border-color: var(--border);
  opacity: .55;
}
.pwa-root .cal-filters .f-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* v441 : Vue Semaine (colonnes 7j horizontales) */
.pwa-root .semaine-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.pwa-root .semaine-grid {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 20px;
}
.pwa-root .semaine-day {
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
}
.pwa-root .semaine-day.today {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.pwa-root .semaine-day .sd-hdr {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.pwa-root .semaine-day .sd-day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pwa-root .semaine-day.today .sd-day {
  color: var(--accent);
}
.pwa-root .semaine-day .sd-dow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 1px;
}
.pwa-root .semaine-day .sd-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.pwa-root .semaine-day .sd-empty {
  padding: 4px 0;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}
.pwa-root .semaine-day .evt-card {
  padding: 8px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.pwa-root .semaine-day .evt-card + .evt-card {
  border-top: 1px solid var(--border);
}

/* v442 : Tasks + Settings overlays (style sr-overlay) */
/* v442 : Tasks + Settings overlays — règles mobile (masqué par défaut en haut du fichier) */
/* [v636] Ajout pwa-outils-overlay (page Outils : financement + rapprochement) */
body.is-mobile.pwa-active #pwa-tasks-overlay,
body.is-mobile.pwa-active #pwa-settings-overlay,
body.is-mobile.pwa-active #pwa-compta-overlay,
body.is-mobile.pwa-active #pwa-documents-overlay,
body.is-mobile.pwa-active #pwa-outils-overlay {
  position: fixed; inset: 0;
  background: var(--bg, #f7f8fa);
  /* [#pwa-zindex-audit v630] 110 → 100005. Cf. pwa-cr/fb-overlay : la tabbar
     PWA (99999) passait par-dessus ces overlays full-screen. Maintenant
     overlay au-dessus, tabbar en dessous. */
  z-index: 100005;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.2,0.8,0.2,1);
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  /* v515 : safe areas iOS pour pas que la status bar ou la navbar bouffent le contenu */
  padding-top: env(safe-area-inset-top, 0);
  /* [v635] Plus de padding-bottom 62px pour la tabbar : depuis l'audit z-index v630,
     ces overlays (100005) passent AU-DESSUS de la tabbar (99999) qui est donc
     masquée pendant qu'ils sont ouverts. Le padding réservé pour elle laissait
     un espace vide en bas (Anthony : "faut que ça aille jusqu'en bas").
     On garde juste le safe-area pour le notch iOS. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-tasks-overlay,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-settings-overlay,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-compta-overlay,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-documents-overlay,
html[data-theme="noir"] body.is-mobile.pwa-active #pwa-outils-overlay {
  background: #000;
}
body.is-mobile.pwa-active #pwa-tasks-overlay.open,
body.is-mobile.pwa-active #pwa-settings-overlay.open,
body.is-mobile.pwa-active #pwa-compta-overlay.open,
body.is-mobile.pwa-active #pwa-documents-overlay.open,
body.is-mobile.pwa-active #pwa-outils-overlay.open {
  transform: translateX(0);
}
body.is-mobile.pwa-active #pwa-tasks-overlay .screen,
body.is-mobile.pwa-active #pwa-settings-overlay .screen,
body.is-mobile.pwa-active #pwa-compta-overlay .screen,
body.is-mobile.pwa-active #pwa-documents-overlay .screen,
body.is-mobile.pwa-active #pwa-outils-overlay .screen,
body.is-mobile.pwa-active #pwa-docs-overlay .screen {
  display: flex; flex-direction: column;
  /* v515 : 100% du parent (qui a déjà le safe-area padding), pas 100vh */
  height: 100%;
  flex: 1;
  min-height: 0;
}

/* Task row : couleurs cohérentes desktop */
.pwa-root .task-row-v2 {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.pwa-root .task-row-v2 .bar {
  width: 4px; min-width: 4px; align-self: stretch; border-radius: 2px;
}
.pwa-root .task-row-v2.urgent .bar { background: var(--chaud); }
.pwa-root .task-row-v2.tomorrow .bar { background: var(--tiede); }
.pwa-root .task-row-v2.week .bar { background: var(--froid); }
.pwa-root .task-row-v2 .main { flex: 1; min-width: 0; }
.pwa-root .task-row-v2 .title {
  font-weight: 600; font-size: 13px; color: var(--text); line-height: 1.3;
}
.pwa-root .task-row-v2 .meta {
  font-size: 11px; color: var(--muted); margin-top: 3px;
}
.pwa-root .task-row-v2 .when-pill {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .3px;
  padding: 3px 7px; border-radius: 3px;
  text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.pwa-root .task-row-v2.urgent .when-pill { background: color-mix(in srgb, var(--chaud) 15%, transparent); color: var(--chaud); }
.pwa-root .task-row-v2.tomorrow .when-pill { background: color-mix(in srgb, var(--tiede) 15%, transparent); color: var(--tiede); }
.pwa-root .task-row-v2.week .when-pill { background: color-mix(in srgb, var(--froid) 15%, transparent); color: var(--froid); }

/* Settings sections */
.pwa-root .set-section { margin-bottom: 24px; }
.pwa-root .set-section-title {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.pwa-root .set-row-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; width: 100%; cursor: pointer;
  text-align: left; font-size: 13px; color: var(--text);
  transition: background 0.12s;
}
.pwa-root .set-row-btn:hover { background: var(--s2); }
.pwa-root .set-row-btn + .set-row-btn { margin-top: 6px; }
.pwa-root .set-row-btn .lbl { flex: 1; font-weight: 500; }
.pwa-root .set-row-btn .chev { color: var(--muted); }
.pwa-root .set-row-btn .badge {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  padding: 2px 6px; background: var(--s2); border-radius: 3px;
}

.pwa-root .set-pref-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
}
.pwa-root .set-pref-row + .set-pref-row { margin-top: 6px; }
.pwa-root .set-pref-row .info { flex: 1; }
.pwa-root .set-pref-row .name {
  font-weight: 500; font-size: 13px; color: var(--text);
}
.pwa-root .set-pref-row .sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.pwa-root .set-switch {
  position: relative; width: 38px; height: 22px;
  background: var(--s3); border-radius: 11px; cursor: pointer;
  transition: background 0.18s;
  flex-shrink: 0;
}
.pwa-root .set-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pwa-root .set-switch[data-on="true"] {
  background: var(--accent);
}
.pwa-root .set-switch[data-on="true"]::after {
  transform: translateX(16px);
}

.pwa-root .set-input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  font-size: 13px; font-family: var(--font);
  box-sizing: border-box;
}
.pwa-root .set-input:focus { outline: none; border-color: var(--accent); }


/* v442 : Vue Semaine grille 7 cols à la Margot */
.pwa-root .wk-head {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.pwa-root .wk-head .hh-empty {
  border-right: 1px solid var(--border);
}
.pwa-root .wk-head .hh {
  padding: 8px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-right: 1px solid var(--border);
  position: relative;
}
.pwa-root .wk-head .hh:last-child { border-right: none; }
.pwa-root .wk-head .hh .d {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .8px;
  color: var(--muted);
  text-transform: uppercase;
}
.pwa-root .wk-head .hh .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.3px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pwa-root .wk-head .hh.today .d { color: var(--accent); }
.pwa-root .wk-head .hh.today .n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}
.pwa-root .wk-head .hh.weekend { background: var(--s2); }
.pwa-root .wk-head .hh.weekend .d,
.pwa-root .wk-head .hh.weekend .n { color: var(--muted); }

.pwa-root .wk-allday {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  min-height: 22px;
  flex-shrink: 0;
}
.pwa-root .wk-allday .lbl {
  padding: 4px 3px 0 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .3px;
  color: var(--muted);
  border-right: 1px solid var(--border);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
}
.pwa-root .wk-allday .ad-col {
  border-right: 1px solid var(--border);
  padding: 3px 2px;
  min-height: 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pwa-root .wk-allday .ad-col:last-child { border-right: none; }
.pwa-root .wk-allday .ad-col.weekend { background: var(--s2); }
.pwa-root .wk-allday .ad-pill {
  padding: 1px 4px;
  font-size: 8px;
  font-weight: 600;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  background: color-mix(in srgb, var(--c) 14%, var(--surface));
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}

.pwa-root .wk-grid-wrap {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.pwa-root .wk-grid-wrap::-webkit-scrollbar { display: none; }
.pwa-root .wk-grid {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  position: relative;
}
.pwa-root .wk-hr { display: contents; }
.pwa-root .wk-hr .hlbl {
  padding: 1px 4px 0 6px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  letter-spacing: .2px;
  min-height: 54px;
}
.pwa-root .wk-hr .hcell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 54px;
  position: relative;
}
.pwa-root .wk-hr .hcell:last-child { border-right: none; }
.pwa-root .wk-hr .hcell.weekend { background: var(--s2); }
.pwa-root .wk-hr .hcell.today {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.pwa-root .wk-hr .hcell.today.weekend {
  background: color-mix(in srgb, var(--accent) 4%, var(--s2));
}

.pwa-root .wk-ev {
  position: absolute;
  left: 1px;
  right: 1px;
  padding: 2px 3px;
  background: color-mix(in srgb, var(--c) 18%, var(--surface));
  border-left: 2.5px solid var(--c);
  border-top: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
}
.pwa-root .wk-ev .t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  color: var(--text);
  letter-spacing: -.1px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-root .wk-ev .tm {
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--text-dim);
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 1px;
}
.pwa-root .now-line {
  position: absolute;
  left: 32px;
  right: 0;
  height: 1.5px;
  background: var(--chaud);
  z-index: 3;
  pointer-events: none;
}
.pwa-root .now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chaud);
}

/* v442 : Notif bell overlay */
.pwa-root #pwa-todo-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s ease;
  pointer-events: none;
}
.pwa-root #pwa-todo-overlay.open {
  transform: translateY(0);
  pointer-events: auto;
}
.pwa-root #pwa-todo-overlay .todo-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pwa-root #pwa-todo-overlay .todo-hdr h2 {
  flex: 1;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.pwa-root #pwa-todo-overlay .todo-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
}
.pwa-root #pwa-todo-overlay .todo-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 30px;
}
.pwa-root .todo-task {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}
.pwa-root .todo-task .tbar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
}
.pwa-root .todo-task.urgent .tbar { background: var(--chaud); }
.pwa-root .todo-task.tomorrow .tbar { background: var(--tiede); }
.pwa-root .todo-task.week .tbar { background: var(--froid); }
.pwa-root .todo-task .tmain { flex: 1; min-width: 0; }
.pwa-root .todo-task .ttitle {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 3px;
}
.pwa-root .todo-task .tmeta {
  font-size: 11px;
  color: var(--muted);
}
.pwa-root .todo-task .twhen {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 3px 7px;
  border-radius: 4px;
  align-self: flex-start;
}
.pwa-root .todo-task.urgent .twhen {
  background: color-mix(in srgb, var(--chaud) 15%, transparent);
  color: var(--chaud);
}
.pwa-root .todo-task.tomorrow .twhen {
  background: color-mix(in srgb, var(--tiede) 15%, transparent);
  color: var(--tiede);
}
.pwa-root .todo-task.week .twhen {
  background: color-mix(in srgb, var(--froid) 15%, transparent);
  color: var(--froid);
}
.pwa-root .todo-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* v442 : Settings page PWA */
.pwa-root .settings-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.pwa-root .settings-section .ss-title {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.pwa-root .settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}
.pwa-root .settings-row + .settings-row {
  border-top: 1px solid var(--border);
}
.pwa-root .settings-row .sr-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.pwa-root .settings-row .sr-main { flex: 1; min-width: 0; }
.pwa-root .settings-row .sr-lbl {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.pwa-root .settings-row .sr-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.pwa-root .settings-row .sr-badge {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.pwa-root .settings-switch {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--s3);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.pwa-root .settings-switch::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .2s;
}
.pwa-root .settings-switch[data-on="true"] {
  background: var(--accent);
}
.pwa-root .settings-switch[data-on="true"]::after { left: 20px; }

/* ═══════════════════════════════════════════════════
   v442 : Vue Semaine — Layout grille Margot
   (basé sur donna Semaine Mobile.html)
   ═══════════════════════════════════════════════════ */
.pwa-root .wk-head{
  display:grid; grid-template-columns:32px repeat(7, 1fr);
  flex-shrink:0;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.pwa-root .wk-head .hh-empty{border-right:1px solid var(--border)}
.pwa-root .wk-head .hh{
  padding:8px 2px 8px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  border-right:1px solid var(--border);
  position:relative;
}
.pwa-root .wk-head .hh:last-child{border-right:none}
.pwa-root .wk-head .hh .d{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.8px; color:var(--muted); text-transform:uppercase;
}
.pwa-root .wk-head .hh .n{
  font-family:var(--font-display); font-weight:700; font-size:17px;
  letter-spacing:-.3px; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.pwa-root .wk-head .hh.today .d{color:var(--accent)}
.pwa-root .wk-head .hh.today .n{
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center;
  font-size:13px; font-weight:700;
}
.pwa-root .wk-head .hh.weekend{background:var(--s2)}
.pwa-root .wk-head .hh.weekend .d,
.pwa-root .wk-head .hh.weekend .n{color:var(--muted)}

.pwa-root .wk-allday{
  display:grid; grid-template-columns:32px repeat(7, 1fr);
  border-bottom:1px solid var(--border);
  background:var(--surface);
  min-height:22px;
  flex-shrink:0;
}
.pwa-root .wk-allday .lbl{
  padding:4px 3px 0 6px;
  font-family:var(--mono); font-size:8.5px;
  letter-spacing:.3px; color:var(--muted);
  border-right:1px solid var(--border);
  writing-mode:vertical-rl; transform:rotate(180deg);
  text-align:center;
}
.pwa-root .wk-allday .ad-col{
  border-right:1px solid var(--border);
  padding:3px 2px;
  min-height:22px;
  display:flex; flex-direction:column; gap:2px;
}
.pwa-root .wk-allday .ad-col:last-child{border-right:none}
.pwa-root .wk-allday .ad-col.weekend{background:var(--s2)}
.pwa-root .wk-allday .ad-pill{
  padding:1px 4px;
  font-size:8px; font-weight:600;
  border-radius:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.3;
  background:color-mix(in srgb, var(--c) 14%, var(--surface));
  color:var(--c);
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
}

.pwa-root .wk-grid-wrap{
  flex:1; overflow-y:auto;
  scrollbar-width:none;
}
.pwa-root .wk-grid-wrap::-webkit-scrollbar{display:none}
.pwa-root .wk-grid{
  display:grid; grid-template-columns:32px repeat(7, 1fr);
  position:relative;
}
.pwa-root .wk-hr{
  display:contents;
}
.pwa-root .wk-hr .hlbl{
  padding:1px 4px 0 6px;
  font-family:var(--mono); font-size:9px; color:var(--muted);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  letter-spacing:.2px;
  min-height:54px;
}
.pwa-root .wk-hr .hcell{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  min-height:54px;
  position:relative;
}
.pwa-root .wk-hr .hcell:last-child{border-right:none}
.pwa-root .wk-hr .hcell.weekend{background:var(--s2)}
.pwa-root .wk-hr .hcell.today{
  background:color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.pwa-root .wk-hr .hcell.today.weekend{
  background:color-mix(in srgb, var(--accent) 4%, var(--s2));
}

.pwa-root .wk-ev{
  position:absolute; left:1px; right:1px;
  padding:2px 3px;
  background:color-mix(in srgb, var(--c) 18%, var(--surface));
  border-left:2.5px solid var(--c);
  border-top:1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-right:1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-radius:3px;
  overflow:hidden;
  cursor:pointer;
  z-index:1;
}
.pwa-root .wk-ev .t{
  font-family:var(--font-display);
  font-weight:700; font-size:9px;
  color:var(--text);
  letter-spacing:-.1px;
  line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pwa-root .wk-ev .tm{
  font-family:var(--mono); font-size:7.5px;
  color:var(--text-dim);
  letter-spacing:.1px;
  white-space:nowrap; overflow:hidden;
  margin-top:1px;
}
.pwa-root .wk-ev.mini{padding:1px 3px}
.pwa-root .wk-ev.mini .t{font-size:8.5px}
/* v497 : drag & drop visual */
.pwa-root .wk-ev.dragging,
.pwa-root .ev-block.dragging,
.pwa-root .jr-ev.dragging {
  z-index: 9999 !important;
  box-shadow: 0 8px 24px rgba(20,22,31,.22), 0 0 0 2px var(--c);
  transform: scale(1.04);
  opacity: .96;
  transition: box-shadow .12s ease, transform .12s ease;
  pointer-events: none;
}

.pwa-root .now-line{
  position:absolute; left:32px; right:0;
  height:1.5px; background:var(--chaud);
  z-index:3;
  pointer-events:none;
}
.pwa-root .now-line::before{
  content:''; position:absolute; left:-4px; top:-3px;
  width:8px; height:8px; border-radius:50%;
  background:var(--chaud);
}

/* Wrapper semaine : flex column full-height */
.pwa-root .semaine-wrap {
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0;
  overflow:hidden;
}

/* ════════════════════════════════════════════════
   v487 — donna FAB (Trigger flottant Margot)
   ════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   donna FAB — Pill flottante bas-gauche (handoff Margot 27/04)
   Avant : bouton rond centré au-dessus du `+` → empilait 2 ronds,
   masquait contenu, conflit visuel avec le `+` CRM action.
   Maintenant : pill horizontale avec icône + label "donna",
   ancrée bas-gauche → zone calme, opposée aux CTA bas-droite,
   différenciation visuelle nette vs le rond du `+`, label lisible.
   ═══════════════════════════════════════════════════════════ */
#pwa-donna-fab {
  position: fixed;
  left: 14px;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  right: auto;

  display: none; /* révélé via body.app-loaded.is-mobile.pwa-active */
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 8px;
  width: auto;
  height: auto;

  background: var(--accent, #6b5cf5);
  color: #fff;
  border: none;
  border-radius: 99px;
  cursor: pointer;

  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -.1px;

  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #6b5cf5) 35%, transparent),
              0 1px 2px rgba(0, 0, 0, 0.08);

  z-index: 9999;
  transition: transform .18s ease, opacity .2s ease, background .15s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
/* Theme noir : accent légèrement plus clair pour lisibilité */
html[data-theme="noir"] #pwa-donna-fab {
  background: var(--accent, #8b7bff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #8b7bff) 40%, transparent),
              0 1px 2px rgba(0, 0, 0, 0.4);
}
/* v515 : règle "display:grid si PWA mobile" RETIRÉE — la révélation est désormais
   gérée par body.app-loaded.is-mobile.pwa-active plus bas (v511/v513).
   Ça évite que le FAB apparaisse sur la page login. */
/* Hide quand un overlay/modal/sheet est ouvert (toggle via JS body.pwa-fab-hidden) */
body.is-mobile.pwa-active.pwa-fab-hidden #pwa-donna-fab {
  display: none !important;
}
/* v2.1.x — fix #56 : raise quand un overlay AVEC footer d'actions est ouvert
   (ex: pwa-cr-overlay = "Modifier le client/bien/event"). Le footer .cr-footer
   est position:absolute bottom:0 dans l'overlay, hauteur ~85px, parent overlay
   a padding-bottom 62px+safe (place pour la tabbar). On décale le FAB à 160px
   pour qu'il passe juste au-dessus du footer (avec ~13px de marge). Toggle via
   JS body.pwa-fab-raised. */
body.is-mobile.pwa-active.pwa-fab-raised #pwa-donna-fab {
  bottom: calc(160px + env(safe-area-inset-bottom, 0px));
}
#pwa-donna-fab:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--accent, #6b5cf5) 45%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.1);
}
#pwa-donna-fab:active {
  transform: scale(.96);
}
#pwa-donna-fab:focus-visible {
  outline: 2px solid var(--accent, #6b5cf5);
  outline-offset: 3px;
}
/* v488 → désactivé en v2.1.x : les pulse rings faisaient sens sur le FAB rond
   bas-droite. Avec la pill bas-gauche, ils ne match plus la forme et créent
   du bruit visuel. La pill avec son label "donna" est déjà identifiable. */
#pwa-donna-fab::before,
#pwa-donna-fab::after {
  display: none;
}
#pwa-donna-fab .pwa-donna-fab-ic {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
}
#pwa-donna-fab svg {
  color: #fff;
  width: 13px;
  height: 13px;
}
#pwa-donna-fab .pwa-donna-fab-lbl {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.1px;
  color: #fff;
  padding-right: 2px;
}
#pwa-donna-fab .pwa-fab-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--chaud, #d64560);
  color: #fff;
  font-size: 9.5px; font-weight: 700;
  display: none;
  place-items: center;
  border: 2px solid var(--surface, #fff);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  line-height: 1;
}
#pwa-donna-fab.has-badge .pwa-fab-badge {
  display: grid;
}

/* ════════════════════════════════════════════════
   donna Panel (overlay placeholder — branché plus tard)
   ════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════
   v490 — donna Chatbot (Bottom sheet)
   ════════════════════════════════════════════════ */
#pwa-donna-panel {
  display: none;
  position: fixed; inset: 0;
  /* [#pwa-zindex-audit v630] 99996 → 100005. Le chat donna passait sous la
     tabbar (99999). Maintenant au niveau des overlays full-screen. */
  z-index: 100005;
  background: rgba(0, 0, 0, 0.45);
  -webkit-tap-highlight-color: transparent;
}
#pwa-donna-panel.open {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: pwa-dn-fade .18s ease;
}
@keyframes pwa-dn-fade { from { opacity: 0; } to { opacity: 1; } }

#pwa-donna-panel .pwa-dn-sheet {
  background: var(--surface, #fff);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  height: 80vh;
  max-height: 720px;
  animation: pwa-dn-slide .26s cubic-bezier(0.2, 0.8, 0.3, 1.05);
  overflow: hidden;
}
@keyframes pwa-dn-slide {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

#pwa-donna-panel .pwa-dn-grab {
  width: 36px; height: 4px;
  background: var(--border-hi, #d3d8e3);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
  /* [v768] Augmente la zone tactile pour le swipe-down sans toucher le visuel.
     Padding 16px en haut/bas + box-sizing pour garder la barre 4px visible. */
  padding: 12px 0;
  margin: 0 auto;
  height: 4px;
  background-clip: content-box;
  box-sizing: content-box;
  cursor: grab;
  touch-action: none;
}

#pwa-donna-panel .pwa-dn-hdr {
  padding: 12px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border, #e4e7ee);
  flex-shrink: 0;
}
#pwa-donna-panel .pwa-dn-avatar {
  width: 32px; height: 32px;
  background: transparent;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
#pwa-donna-panel .pwa-dn-avatar svg { color: var(--accent, #6b5cf5); width: 22px; height: 22px; }
#pwa-donna-panel .pwa-dn-titles { flex: 1; min-width: 0; }
#pwa-donna-panel .pwa-dn-titles .t {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--text, #14161f);
  letter-spacing: -.2px;
}
#pwa-donna-panel .pwa-dn-titles .s {
  font-size: 11px;
  color: var(--muted, #8a93ab);
  line-height: 1.3;
}
#pwa-donna-panel .pwa-dn-titles .s::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green, #22a06b);
  margin-right: 5px; vertical-align: middle;
}
#pwa-donna-panel .pwa-dn-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--s2, #f1f3f7);
  border: none;
  display: grid; place-items: center;
  color: var(--text-dim, #4a5169);
  cursor: pointer;
}
#pwa-donna-panel .pwa-dn-close svg { width: 16px; height: 16px; }

#pwa-donna-panel .pwa-dn-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

#pwa-donna-panel .pwa-dn-greet {
  text-align: center;
  padding: 12px 8px 18px;
}
#pwa-donna-panel .pwa-dn-greet .h {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 18px; letter-spacing: -.3px;
  color: var(--text, #14161f);
  margin-bottom: 4px;
}
#pwa-donna-panel .pwa-dn-greet .s {
  font-size: 12.5px;
  color: var(--text-dim, #4a5169);
}

#pwa-donna-panel .pwa-dn-suggs {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
#pwa-donna-panel .pwa-dn-sugg {
  text-align: left;
  background: var(--s2, #f1f3f7);
  border: 1px solid var(--border, #e4e7ee);
  border-radius: 10px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
  width: 100%;
}
#pwa-donna-panel .pwa-dn-sugg:hover,
#pwa-donna-panel .pwa-dn-sugg:active {
  background: var(--s3, #e7ebf2);
  border-color: var(--border-hi, #d3d8e3);
}
#pwa-donna-panel .pwa-dn-sugg .ic {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--surface, #fff);
  display: grid; place-items: center;
  color: var(--accent, #6b5cf5);
  flex-shrink: 0;
}
#pwa-donna-panel .pwa-dn-sugg .ic svg { width: 16px; height: 16px; }
#pwa-donna-panel .pwa-dn-sugg .lbl {
  font-size: 13px; font-weight: 600; color: var(--text, #14161f);
  line-height: 1.35;
}

/* Messages */
#pwa-donna-panel .pwa-dn-msgs { display: flex; flex-direction: column; gap: 10px; }
#pwa-donna-panel .pwa-dn-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
}
#pwa-donna-panel .pwa-dn-msg.user {
  align-self: flex-end;
  background: var(--text, #14161f);
  color: var(--bg, #f7f8fa);
  border-bottom-right-radius: 4px;
}
#pwa-donna-panel .pwa-dn-msg.assistant {
  align-self: flex-start;
  background: var(--s2, #f1f3f7);
  color: var(--text, #14161f);
  border: 1px solid var(--border, #e4e7ee);
  border-bottom-left-radius: 4px;
}
/* v494 : Rendu markdown propre pour les réponses donna */
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-h1,
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-h2,
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-h3 {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  letter-spacing: -.2px;
  margin: 10px 0 4px;
  color: var(--text, #14161f);
  line-height: 1.3;
}
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-h1 { font-size: 16px; }
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-h2 { font-size: 14.5px; }
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-h3 {
  font-size: 13px;
  color: var(--text-dim, #4a5169);
  text-transform: none;
}
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-h1:first-child,
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-h2:first-child,
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-h3:first-child {
  margin-top: 0;
}
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-li {
  margin: 3px 0;
  padding-left: 4px;
}
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-hr {
  border: none;
  border-top: 1px solid var(--border, #e4e7ee);
  margin: 10px 0;
}
#pwa-donna-panel .pwa-dn-msg.assistant strong {
  font-weight: 700;
  color: var(--text, #14161f);
}
#pwa-donna-panel .pwa-dn-msg.assistant em {
  font-style: italic;
  color: var(--text-dim, #4a5169);
}
#pwa-donna-panel .pwa-dn-msg.assistant a {
  color: var(--accent, #6b5cf5);
  text-decoration: underline;
}
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-code {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e4e7ee);
  padding: 1px 5px;
  border-radius: 3px;
}
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
  background: var(--surface, #fff);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border, #e4e7ee);
}
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-table th {
  background: var(--s2, #f1f3f7);
  text-align: left;
  padding: 6px 8px;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-dim, #4a5169);
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--border, #e4e7ee);
}
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #e4e7ee);
  vertical-align: top;
}
#pwa-donna-panel .pwa-dn-msg.assistant .pwa-dn-table tr:last-child td {
  border-bottom: none;
}
#pwa-donna-panel .pwa-dn-typing {
  display: flex; gap: 4px;
  padding: 12px 14px;
  background: var(--s2, #f1f3f7);
  border: 1px solid var(--border, #e4e7ee);
  border-radius: 14px; border-bottom-left-radius: 4px;
  align-self: flex-start;
  width: fit-content;
}
#pwa-donna-panel .pwa-dn-typing span {
  width: 6px; height: 6px;
  background: var(--muted, #8a93ab);
  border-radius: 50%;
  animation: pwa-dn-bounce 1.4s ease-in-out infinite;
}
#pwa-donna-panel .pwa-dn-typing span:nth-child(2) { animation-delay: .2s; }
#pwa-donna-panel .pwa-dn-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes pwa-dn-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Input */
#pwa-donna-panel .pwa-dn-input {
  /* v2.1.x — Avec viewport interactive-widget=overlays-content, le clavier
     passe par-dessus l'écran sans le redimensionner. On utilise donc
     env(keyboard-inset-bottom) pour pousser le composer au-dessus du clavier
     quand il est ouvert. Si le clavier est fermé, ça vaut 0 → fallback safe-area. */
  padding: 10px 12px calc(10px + max(env(keyboard-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  border-top: 1px solid var(--border, #e4e7ee);
  background: var(--surface, #fff);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
#pwa-donna-panel .pwa-dn-input textarea {
  flex: 1;
  background: var(--s2, #f1f3f7);
  border: 1px solid var(--border, #e4e7ee);
  border-radius: 18px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text, #14161f);
  resize: none;
  max-height: 120px;
  min-height: 38px;
  line-height: 1.4;
  -webkit-appearance: none;
  outline: none;
}
#pwa-donna-panel .pwa-dn-input textarea:focus {
  background: var(--surface, #fff);
  border-color: var(--accent, #6b5cf5);
}
#pwa-donna-panel .pwa-dn-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #6b5cf5), var(--mauve, #8257e5));
  border: none;
  display: grid; place-items: center;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s, transform .12s;
}
#pwa-donna-panel .pwa-dn-send:disabled {
  opacity: .35;
  cursor: default;
}
#pwa-donna-panel .pwa-dn-send:not(:disabled):active { transform: scale(.92); }
#pwa-donna-panel .pwa-dn-send svg { width: 18px; height: 18px; transform: translateX(1px); }

/* ════════════════════════════════════════════════
   v498 — Install PWA banner + modale instructions
   ════════════════════════════════════════════════ */
#pwa-install-banner {
  position: fixed;
  bottom: calc(82px + env(safe-area-inset-bottom));
  left: 12px; right: 80px; /* space pour le FAB donna à droite */
  z-index: 9997;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e4e7ee);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(20,22,31,.10);
  transform: translateY(20px);
  opacity: 0;
  transition: transform .25s cubic-bezier(.2,.8,.3,1.05), opacity .2s;
}
#pwa-install-banner.pwa-ib-show { transform: translateY(0); opacity: 1; }
#pwa-install-banner.pwa-ib-hide { transform: translateY(20px); opacity: 0; }
#pwa-install-banner .pwa-ib-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent, #6b5cf5), var(--mauve, #8257e5));
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
#pwa-install-banner .pwa-ib-icon svg { width: 16px; height: 16px; }
#pwa-install-banner .pwa-ib-text { flex: 1; min-width: 0; }
#pwa-install-banner .pwa-ib-t {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 12.5px;
  color: var(--text, #14161f); letter-spacing: -.1px;
}
#pwa-install-banner .pwa-ib-s {
  font-size: 10.5px; color: var(--text-dim, #4a5169);
  line-height: 1.3; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#pwa-install-banner .pwa-ib-btn {
  background: linear-gradient(135deg, var(--accent, #6b5cf5), var(--mauve, #8257e5));
  color: #fff;
  border: none;
  padding: 7px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
#pwa-install-banner .pwa-ib-btn:active { opacity: .85; }
#pwa-install-banner .pwa-ib-close {
  width: 24px; height: 24px;
  background: transparent;
  border: none;
  color: var(--muted, #8a93ab);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Modale instructions install */
#pwa-install-modal {
  position: fixed; inset: 0;
  /* [#pwa-zindex-audit v630] 99997 → 100010. Modal au-dessus de la tabbar
     et des overlays full-screen, sous le pdf-loader (100015). */
  z-index: 100010;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#pwa-install-modal.open {
  opacity: 1;
  pointer-events: auto;
}
#pwa-install-modal .pwa-im-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 24px 22px 22px;
  max-width: 380px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  transform: scale(.94);
  transition: transform .25s cubic-bezier(.2,.8,.3,1.05);
}
#pwa-install-modal.open .pwa-im-card { transform: scale(1); }
#pwa-install-modal .pwa-im-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: var(--s2, #f1f3f7);
  border: none; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--text-dim, #4a5169);
}
#pwa-install-modal .pwa-im-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent, #6b5cf5), var(--mauve, #8257e5));
  display: grid; place-items: center;
  color: #fff;
  margin: 0 0 14px;
}
#pwa-install-modal .pwa-im-icon svg { width: 28px; height: 28px; }
#pwa-install-modal h3 {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 19px; font-weight: 700;
  color: var(--text, #14161f);
  letter-spacing: -.3px;
  margin-bottom: 8px;
}
#pwa-install-modal p {
  font-size: 13.5px;
  color: var(--text-dim, #4a5169);
  line-height: 1.5;
  margin-bottom: 16px;
}
#pwa-install-modal .pwa-im-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
}
#pwa-install-modal .pwa-im-steps li {
  counter-increment: step;
  position: relative;
  padding: 10px 12px 10px 38px;
  background: var(--s2, #f1f3f7);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text, #14161f);
}
#pwa-install-modal .pwa-im-steps li::before {
  content: counter(step);
  position: absolute;
  left: 10px; top: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent, #6b5cf5);
  color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
}
#pwa-install-modal .pwa-im-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(247,201,72,.10);
  border: 1px solid rgba(247,201,72,.28);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text, #14161f);
  line-height: 1.4;
}

/* Hide banner si overlay PWA ouvert */
body.is-mobile.pwa-active.pwa-fab-hidden #pwa-install-banner {
  display: none;
}

/* ════════════════════════════════════════════════
   v499 — Ligne donna AI dans la recherche PWA mobile
   ════════════════════════════════════════════════ */
.pwa-root .pwa-sr-donna {
  display: flex; align-items: center; gap: 11px;
  margin: 8px 14px 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent, #6b5cf5) 6%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--accent, #6b5cf5) 20%, var(--border, #e4e7ee));
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pwa-root .pwa-sr-donna:active { transform: scale(.985); background: color-mix(in srgb, var(--accent, #6b5cf5) 10%, var(--surface, #fff)); }
.pwa-root .pwa-sr-donna.emph {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #6b5cf5) 11%, var(--surface, #fff)), color-mix(in srgb, var(--mauve, #8257e5) 7%, var(--surface, #fff)));
  border-color: color-mix(in srgb, var(--accent, #6b5cf5) 36%, transparent);
}
.pwa-root .pwa-sr-donna-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent, #6b5cf5), var(--mauve, #8257e5));
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.pwa-root .pwa-sr-donna-txt { flex: 1; min-width: 0; }
.pwa-root .pwa-sr-donna-t {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 12.5px;
  color: var(--accent, #6b5cf5); letter-spacing: -.1px;
  line-height: 1.2;
}
.pwa-root .pwa-sr-donna-q {
  font-size: 11px; font-style: italic;
  color: var(--text-dim, #4a5169);
  line-height: 1.3;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwa-root .pwa-sr-donna-cta {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent, #6b5cf5);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pwa-root .pwa-sr-donna-cta svg { width: 12px; height: 12px; }

/* ════════════════════════════════════════════════
   v501 — Documentation overlay
   ════════════════════════════════════════════════ */
body.is-mobile.pwa-active #pwa-docs-overlay,
#pwa-docs-overlay {
  position: fixed; inset: 0;
  background: var(--bg, #f7f8fa);
  z-index: 9000;
  display: none;
  flex-direction: column;
  /* v515 : safe-areas iOS (statusbar top + home indicator bottom) */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
body.is-mobile.pwa-active #pwa-docs-overlay.open,
#pwa-docs-overlay.open {
  display: flex;
}

.pwa-root .pwa-docs-hero {
  margin: 8px 4px 18px;
  padding: 22px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #6b5cf5) 8%, var(--surface, #fff)), color-mix(in srgb, var(--mauve, #8257e5) 4%, var(--surface, #fff)));
  border: 1px solid color-mix(in srgb, var(--accent, #6b5cf5) 18%, var(--border, #e4e7ee));
  border-radius: 14px;
  text-align: center;
}
.pwa-root .pwa-docs-hero-icon {
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent, #6b5cf5), var(--mauve, #8257e5));
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
}
.pwa-root .pwa-docs-hero-t {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 18px;
  color: var(--text, #14161f);
  letter-spacing: -.3px;
  margin-bottom: 4px;
}
.pwa-root .pwa-docs-hero-s {
  font-size: 13px; color: var(--text-dim, #4a5169);
  line-height: 1.45;
  max-width: 320px;
  margin: 0 auto;
}

.pwa-root .pwa-docs-sec {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e4e7ee);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.pwa-root .pwa-docs-sec.open {
  border-color: color-mix(in srgb, var(--accent, #6b5cf5) 28%, var(--border, #e4e7ee));
}
.pwa-root .pwa-docs-hdr {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.pwa-root .pwa-docs-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pwa-root .pwa-docs-hdr-txt { flex: 1; min-width: 0; }
.pwa-root .pwa-docs-t {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 14px;
  color: var(--text, #14161f);
  letter-spacing: -.1px;
  line-height: 1.25;
}
.pwa-root .pwa-docs-s {
  font-size: 11.5px; color: var(--text-dim, #4a5169);
  line-height: 1.3;
  margin-top: 2px;
}
.pwa-root .pwa-docs-chev {
  color: var(--muted, #8a93ab);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.pwa-root .pwa-docs-sec.open .pwa-docs-chev {
  transform: rotate(180deg);
  color: var(--accent, #6b5cf5);
}
.pwa-root .pwa-docs-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease, padding .22s ease;
  padding: 0 14px;
  font-size: 13.5px;
  color: var(--text, #14161f);
  line-height: 1.55;
}
.pwa-root .pwa-docs-sec.open .pwa-docs-body {
  max-height: 1500px;
  padding: 14px 14px 16px;
  border-top: 1px solid var(--border, #e4e7ee);
}
.pwa-root .pwa-docs-body p {
  margin: 0 0 10px;
}
.pwa-root .pwa-docs-body p:last-child { margin-bottom: 0; }
.pwa-root .pwa-docs-body b { font-weight: 700; color: var(--text, #14161f); }
.pwa-root .pwa-docs-list,
.pwa-root .pwa-docs-steps {
  margin: 0 0 12px;
  padding-left: 20px;
}
.pwa-root .pwa-docs-list li,
.pwa-root .pwa-docs-steps li {
  margin-bottom: 5px;
  line-height: 1.5;
}
.pwa-root .pwa-docs-steps {
  list-style: decimal;
}
.pwa-root .pwa-docs-list {
  list-style: disc;
}
.pwa-root .pwa-docs-tip {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent, #6b5cf5) 6%, var(--surface, #fff));
  border-left: 3px solid var(--accent, #6b5cf5);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-dim, #4a5169);
  line-height: 1.5;
}
.pwa-root .pwa-docs-tip b { color: var(--accent, #6b5cf5); }
.pwa-root .pwa-docs-violet {
  display: inline-block;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--accent, #6b5cf5) 14%, transparent);
  color: var(--accent, #6b5cf5);
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
}

.pwa-root .pwa-docs-footer {
  margin-top: 22px;
  padding: 22px 18px;
  background: var(--s2, #f1f3f7);
  border-radius: 14px;
  text-align: center;
}
.pwa-root .pwa-docs-footer-t {
  font-size: 13px; color: var(--text-dim, #4a5169);
  margin-bottom: 12px;
}
.pwa-root .pwa-docs-mail-btn {
  background: var(--text, #14161f);
  color: var(--bg, #f7f8fa);
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}

/* ════════════════════════════════════════════════
   v508 — Cache FAB donna sur écran de login
   ════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════
   v511/v513 — FAB donna PWA : PWA mobile only
   Stratégie inverse pour être robuste face aux caches SW anciens
   v513 : ajoute is-mobile.pwa-active dans le sélecteur révélateur
   pour éviter d'afficher le FAB PWA en desktop
   ════════════════════════════════════════════════ */
#pwa-donna-fab,
#pwa-donna-panel {
  display: none;
}
body.app-loaded.is-mobile.pwa-active #pwa-donna-fab {
  display: flex !important;
}
body.app-loaded.is-mobile.pwa-active.pwa-donna-panel-open #pwa-donna-panel {
  display: flex !important;
}

/* ════════════════════════════════════════════════
   v510 — Encart Alertes proactives dans donna PWA
   ════════════════════════════════════════════════ */
#pwa-donna-panel .pwa-dn-alerts {
  margin: 12px 14px 14px;
  background: linear-gradient(135deg, rgba(214, 69, 96, .06), rgba(214, 69, 96, .02));
  border: 1px solid rgba(214, 69, 96, .22);
  border-radius: 12px;
  overflow: hidden;
}
#pwa-donna-panel .pwa-dn-alerts-hdr {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px 9px;
  border-bottom: 1px solid rgba(214, 69, 96, .14);
}
#pwa-donna-panel .pwa-dn-alerts-hdr .ic {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--chaud, #d64560);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
#pwa-donna-panel .pwa-dn-alerts-hdr .t {
  font-size: 13px;
  color: var(--text);
  letter-spacing: -.1px;
}
#pwa-donna-panel .pwa-dn-alerts-hdr .t b {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: var(--chaud, #d64560);
}
#pwa-donna-panel .pwa-dn-alerts-body {
  padding: 4px;
}
#pwa-donna-panel .pwa-dn-alert {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .12s;
}
#pwa-donna-panel .pwa-dn-alert:hover,
#pwa-donna-panel .pwa-dn-alert:active {
  background: rgba(214, 69, 96, .06);
}
#pwa-donna-panel .pwa-dn-alert .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#pwa-donna-panel .pwa-dn-alert .dot.urgent { background: var(--chaud, #d64560); }
#pwa-donna-panel .pwa-dn-alert .dot.tomorrow { background: var(--tiede, #c08a2e); }
#pwa-donna-panel .pwa-dn-alert .dot.week { background: var(--froid, #3d7fc2); }
#pwa-donna-panel .pwa-dn-alert .info {
  flex: 1;
  min-width: 0;
}
#pwa-donna-panel .pwa-dn-alert .lbl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: -.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pwa-donna-panel .pwa-dn-alert .sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pwa-donna-panel .pwa-dn-alert .chev {
  color: var(--muted);
  flex-shrink: 0;
}
#pwa-donna-panel .pwa-dn-alerts-more {
  padding: 8px 12px 10px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid rgba(214, 69, 96, .1);
}

/* ════════════════════════════════════════════════
   v510 — Encart Alertes proactives dans donna welcome
   ════════════════════════════════════════════════ */
.pwa-dn-alerts {
  margin: 0 14px 14px;
  background: linear-gradient(135deg, rgba(214, 69, 96, .06), rgba(214, 69, 96, .02));
  border: 1px solid rgba(214, 69, 96, .18);
  border-radius: 12px;
  overflow: hidden;
}
.pwa-dn-alerts-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(214, 69, 96, .12);
}
.pwa-dn-alerts-hdr .ic {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(214, 69, 96, .14);
  color: #d64560;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.pwa-dn-alerts-hdr .t {
  font-size: 13px;
  color: var(--text, #14161f);
  letter-spacing: -.1px;
}
.pwa-dn-alerts-hdr .t b {
  color: #d64560;
  font-weight: 700;
}
.pwa-dn-alerts-body {
  display: flex; flex-direction: column;
}
.pwa-dn-alert {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(214, 69, 96, .07);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .12s;
}
.pwa-dn-alert:first-child { border-top: none; }
.pwa-dn-alert:active {
  background: rgba(214, 69, 96, .05);
}
.pwa-dn-alert .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pwa-dn-alert .dot.urgent { background: #d64560; }
.pwa-dn-alert .dot.tomorrow { background: #c08a2e; }
.pwa-dn-alert .dot.week { background: #3d7fc2; }
.pwa-dn-alert .info {
  flex: 1; min-width: 0;
}
.pwa-dn-alert .lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #14161f);
  letter-spacing: -.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwa-dn-alert .sub {
  font-size: 11px;
  color: var(--muted, #8a93ab);
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwa-dn-alert .chev {
  color: var(--muted, #8a93ab);
  flex-shrink: 0;
}
.pwa-dn-alerts-more {
  padding: 8px 14px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--muted, #8a93ab);
  font-style: italic;
}

/* ════════════════════════════════════════════════
   v515 — PDF Loader (overlay bloquante pendant génération)
   ════════════════════════════════════════════════ */
#pwa-pdf-loader {
  position: fixed;
  inset: 0;
  /* [#pwa-zindex-audit v630] 99998 → 100015. Loader bloquant pendant export
     PDF, doit passer au-dessus de tout (sauf bandeau impersonation à 999999). */
  z-index: 100015;
  background: rgba(20, 22, 31, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}
#pwa-pdf-loader.open { opacity: 1; }
.pwa-pdf-loader-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.32);
  max-width: 280px;
  text-align: center;
}
.pwa-pdf-loader-spin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent, #6b5cf5) 22%, transparent);
  border-top-color: var(--accent, #6b5cf5);
  animation: pwa-pdf-spin 0.85s linear infinite;
  margin-bottom: 4px;
}
@keyframes pwa-pdf-spin {
  to { transform: rotate(360deg); }
}
.pwa-pdf-loader-ttl {
  font-family: var(--font-display, sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--text, #14161f);
}
.pwa-pdf-loader-sub {
  font-size: 12.5px;
  color: var(--muted, #8a93ab);
}
html[data-theme="noir"] #pwa-pdf-loader {
  background: rgba(0,0,0,0.65);
}
html[data-theme="noir"] .pwa-pdf-loader-card {
  background: #18181c;
}

/* ═══════════════════════════════════════════════════════════════════
   v2.1.x — fix #57 : CTA Relancer sur fiche client PWA + sheet
   Wire dans pwa-relance.js
   ═══════════════════════════════════════════════════════════════════ */

.pwa-root .hero-cta-relance {
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:var(--radius-lg);
  background:var(--text);
  color:var(--bg);
  display:grid; place-items:center;
  border:none;
  cursor:pointer;
  transition:transform .15s, background .2s;
}
.pwa-root .hero-cta-relance:active {
  transform:scale(.92);
}
.pwa-root .hero-cta-relance svg {
  display:block;
}

/* Sheet "Planifier une relance" — design Margot v2.
   Pattern aligné sur .cr-field (champs en transparent + underline) et
   .cr-footer .btn-p (boutons primary text/bg, border-radius:var(--radius)). */
#pwa-relance-overlay {
  display:none;
  position:fixed; inset:0;
  /* [#pwa-zindex-audit v630] 99997 → 100010 : la sheet "Planifier une relance"
     passait SOUS la tabbar PWA (99999). Anthony l'a remonté lors du bug
     report du 1er mai : la tabbar masquait le bas de la sheet. */
  z-index:100010;
  background:rgba(20,22,31,.45);
  align-items:flex-end; justify-content:center;
}
#pwa-relance-overlay.open {
  display:flex;
}
#pwa-relance-overlay .pr-sheet {
  width:100%; max-width:560px;
  background:var(--surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:0 0 calc(16px + env(safe-area-inset-bottom)) 0;
  box-shadow:0 -8px 30px rgba(20,22,31,.18);
  max-height:88vh; overflow-y:auto;
  animation:pwaEventReadSlideUp .26s cubic-bezier(.4,0,.2,1);
}
#pwa-relance-overlay .pr-grab {
  display:flex; justify-content:center;
  padding:8px 0 4px;
}
#pwa-relance-overlay .pr-grab span {
  width:36px; height:4px;
  background:var(--border);
  border-radius:2px;
}
#pwa-relance-overlay .pr-head {
  padding:8px 20px 4px;
}
#pwa-relance-overlay .pr-title {
  font-family:var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight:700; font-size:17px;
  letter-spacing:-.3px;
  color:var(--text);
}
#pwa-relance-overlay .pr-sub {
  font-size:12px; color:var(--muted);
  margin-top:3px;
}
#pwa-relance-overlay .pr-body {
  padding:8px 20px 0;
}
/* Champs : alignés sur .cr-field — transparent + underline subtil */
#pwa-relance-overlay .pr-field {
  display:flex; flex-direction:column; gap:6px;
  padding:12px 0;
}
#pwa-relance-overlay .pr-field + .pr-field {
  border-top:1px solid var(--border);
}
#pwa-relance-overlay .pr-lbl {
  font-size:11.5px; font-weight:500;
  color:var(--muted);
  font-family:var(--mono, 'JetBrains Mono', monospace);
  letter-spacing:.4px; text-transform:uppercase;
}
#pwa-relance-overlay .pr-input {
  background:transparent; border:none;
  padding:2px 0;
  font-size:15.5px; font-weight:500;
  color:var(--text);
  font-family:inherit;
  outline:none;
  width:100%;
  flex:1;
}
#pwa-relance-overlay .pr-textarea {
  background:transparent; border:none;
  padding:2px 0;
  font-size:14.5px; font-weight:400;
  color:var(--text);
  font-family:inherit;
  outline:none;
  width:100%;
  resize:none; min-height:60px;
  line-height:1.5;
  box-sizing:border-box;
}
#pwa-relance-overlay .pr-textarea::placeholder,
#pwa-relance-overlay .pr-input::placeholder {
  color:var(--muted); font-weight:400;
}
#pwa-relance-overlay .pr-date-row {
  display:flex; gap:8px; align-items:center;
}
/* Pill "Aujourd'hui" — aligné sur .cr-pill */
#pwa-relance-overlay .pr-pill {
  padding:6px 11px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12.5px; font-weight:500;
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
  transition:all .15s;
}
#pwa-relance-overlay .pr-pill:active {
  background:var(--text); color:var(--bg); border-color:var(--text);
}
/* Footer — aligné sur .cr-footer */
#pwa-relance-overlay .pr-footer {
  display:flex; gap:8px;
  padding:14px 20px 0;
  border-top:1px solid var(--border);
  margin-top:8px;
}
#pwa-relance-overlay .pr-btn {
  flex:1;
  padding:13px;
  border-radius:var(--radius);
  font-size:14px; font-weight:600;
  cursor:pointer;
  font-family:inherit;
  border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
}
#pwa-relance-overlay .pr-btn-secondary {
  background:var(--s2);
  color:var(--text-dim);
}
#pwa-relance-overlay .pr-btn-primary {
  background:var(--text);
  color:var(--bg);
  border-color:var(--text);
}
#pwa-relance-overlay .pr-btn-primary:disabled {
  opacity:.5; cursor:not-allowed;
}

/* [#ai-score-ttl v626] Animation spinner pour score IA en cours de recalcul auto.
   Le score big affiche "⋯" qui pulse, le label montre un spinner circulaire à côté
   de "Analyse en cours…". Réutilise la même approche visuelle que le PDF spinner. */
@keyframes pwa-ai-spin {
  to { transform: rotate(360deg); }
}
.pwa-ai-loading-dots {
  animation: pwa-ai-loading-pulse 1.4s ease-in-out infinite;
}
@keyframes pwa-ai-loading-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: .85; }
}

/* ════════════════════════════════════════════════════════════
   [v636] Page Outils : Financement + Rapprochement par critères
   Accessible depuis Plus > Outils
   ════════════════════════════════════════════════════════════ */

/* Cards d'accueil */
.pwa-root .pwa-outils-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pwa-root .pwa-outils-card:active {
  transform: scale(0.98);
  background: var(--s2);
}
.pwa-root .pwa-outils-card-ic {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.pwa-root .pwa-outils-card-body { flex: 1; min-width: 0; }
.pwa-root .pwa-outils-card-ttl {
  font-family: var(--font-display, system-ui);
  font-weight: 700; font-size: 15px;
  color: var(--text);
  letter-spacing: -.2px;
  margin-bottom: 3px;
}
.pwa-root .pwa-outils-card-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
}
.pwa-root .pwa-outils-card-arr {
  flex-shrink: 0;
  color: var(--muted);
}

/* Sections de sous-pages */
.pwa-root .pwa-outils-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.pwa-root .pwa-outils-section-ttl {
  font-family: var(--font-display, system-ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: -.2px;
  margin-bottom: 4px;
}
.pwa-root .pwa-outils-section-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 16px;
}

/* Champs */
.pwa-root .pwa-outils-field {
  margin-bottom: 14px;
}
.pwa-root .pwa-outils-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: .2px;
}
.pwa-root .pwa-outils-field input[type="number"],
.pwa-root .pwa-outils-field input[type="text"] {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease;
  box-sizing: border-box;
}
.pwa-root .pwa-outils-field input:focus {
  border-color: var(--accent, #6b5cf5);
}
.pwa-root .pwa-outils-input-wrap {
  position: relative;
}
.pwa-root .pwa-outils-input-wrap input {
  padding-right: 44px;
}
.pwa-root .pwa-outils-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}
.pwa-root .pwa-outils-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.35;
}
.pwa-root .pwa-outils-row {
  display: flex;
  gap: 10px;
}

/* Bouton primary — UI 2.0 (noir/blanc) [v639]
   Style Margot 2.0 : fond texte (noir en light, blanc en noir), texte fond,
   pas de gradient, pas d'accent violet. Anthony : "j'aimerais que le bouton
   de validation soit UI 2.0 donc noir / blanc". */
.pwa-root .pwa-outils-btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--text, #14161f);
  color: var(--surface, #ffffff);
  border: none;
  border-radius: 12px;
  font-family: var(--font-display, system-ui);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
  margin-top: 4px;
}
.pwa-root .pwa-outils-btn-primary:active {
  transform: scale(0.98);
  opacity: 0.85;
}
html[data-theme="noir"] .pwa-root .pwa-outils-btn-primary {
  background: var(--text, #f2f3f7);
  color: var(--bg, #000);
}

/* Résultats financement */
.pwa-root .pwa-outils-result-big {
  background: linear-gradient(135deg, #6b5cf5, #8b7bff);
  color: #fff;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin-bottom: 14px;
}
.pwa-root .pwa-outils-result-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}
.pwa-root .pwa-outils-result-val {
  font-family: var(--font-display, system-ui);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pwa-root .pwa-outils-result-sub {
  font-size: 11.5px;
  opacity: 0.85;
  margin-top: 4px;
}
.pwa-root .pwa-outils-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.pwa-root .pwa-outils-result-cell {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.pwa-root .pwa-outils-result-cell-lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.pwa-root .pwa-outils-result-cell-val {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pwa-root .pwa-outils-disclaimer {
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  margin-top: 8px;
  padding: 0 8px;
  line-height: 1.4;
}

/* Résultats rapprochement (cards acquéreurs) */
.pwa-root .pwa-rap-acq-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 11px;
  margin-bottom: 8px;
  cursor: pointer;
}
.pwa-root .pwa-rap-acq-card:active {
  background: var(--s2);
}
.pwa-root .pwa-rap-acq-av {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-display, system-ui);
}
.pwa-root .pwa-rap-acq-body { flex: 1; min-width: 0; }
.pwa-root .pwa-rap-acq-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pwa-root .pwa-rap-acq-detail {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pwa-root .pwa-rap-acq-tags {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pwa-root .pwa-rap-acq-tag {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(34, 160, 107, .14);
  color: #1d8a5a;
  letter-spacing: .2px;
}
html[data-theme="noir"] .pwa-root .pwa-rap-acq-tag {
  background: rgba(52, 201, 140, .18);
  color: #4dd9a3;
}
.pwa-root .pwa-rap-acq-score {
  flex-shrink: 0;
  text-align: right;
}
.pwa-root .pwa-rap-acq-score-val {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pwa-root .pwa-rap-acq-score-lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.pwa-root .pwa-rap-summary {
  text-align: center;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 11px;
  margin-bottom: 12px;
}
.pwa-root .pwa-rap-summary-count {
  font-family: var(--font-display, system-ui);
  font-size: 36px;
  font-weight: 800;
  color: #22a06b;
  letter-spacing: -.8px;
  line-height: 1;
}
.pwa-root .pwa-rap-summary-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 6px;
}
.pwa-root .pwa-rap-empty {
  text-align: center;
  padding: 30px 16px;
  color: var(--muted);
}
.pwa-root .pwa-rap-empty-ic {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: .6;
}

/* ════════════════════════════════════════════════════════════
   [v639/v640] Historique des recherches Outils > Rapprochement
   Stocké en localStorage, pliable/dépliable
   ════════════════════════════════════════════════════════════ */
.pwa-root .pwa-rap-hist-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .12s ease;
}
.pwa-root .pwa-rap-hist-toggle:active {
  background: var(--s2);
}
.pwa-root .pwa-rap-hist-chev {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform .18s ease;
}
.pwa-root .pwa-rap-hist-toggle-lbl {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pwa-root .pwa-rap-hist-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  background: var(--s2);
  padding: 2px 8px;
  border-radius: 99px;
}
.pwa-root .pwa-rap-hist-list {
  margin-top: 6px;
}
.pwa-root .pwa-rap-hist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background .15s ease;
}
.pwa-root .pwa-rap-hist-item:active {
  background: var(--s2);
}
.pwa-root .pwa-rap-hist-body {
  flex: 1;
  min-width: 0;
}
.pwa-root .pwa-rap-hist-crit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pwa-root .pwa-rap-hist-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.pwa-root .pwa-rap-hist-arr {
  flex-shrink: 0;
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════
   [v640] Layout Rapprochement : top sticky (critères + history)
   + bottom scrollable (résultats)
   ════════════════════════════════════════════════════════════ */
.pwa-root #pwa-outils-rapprochement.is-active {
  display: flex !important;
}
/* Top fixe : ne scroll pas, contient history + critères */
.pwa-root .pwa-rap-top {
  flex-shrink: 0;
  padding: 16px 16px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* shadow subtile pour marquer la séparation visuelle */
  box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.08);
}
.pwa-root .pwa-rap-top .pwa-outils-section.pwa-rap-criteres {
  margin-bottom: 12px;
}
.pwa-root #pwa-rap-history {
  margin-bottom: 12px;
}
/* Bottom scroll : zone résultats. flex:1 pour prendre tout l'espace restant. */
.pwa-root .pwa-rap-bottom {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 24px;
}
.pwa-root .pwa-rap-bottom #pwa-rap-results {
  /* Toujours visible (overrider l'ancien display:none inline) */
  display: block !important;
}

/* ════════════════════════════════════════════════════════════
   [v642] Outils : segmented control (Ancien/Neuf)
   ════════════════════════════════════════════════════════════ */
.pwa-root .pwa-outils-segm {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 0;
}
.pwa-root .pwa-outils-segm button {
  flex: 1;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .18s ease;
}
.pwa-root .pwa-outils-segm button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
html[data-theme="noir"] .pwa-root .pwa-outils-segm button.active {
  background: var(--s2);
}

/* Select natif aligné avec les inputs */
.pwa-root .pwa-outils-field select {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93ab' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
  box-sizing: border-box;
}
html[data-theme="noir"] .pwa-root .pwa-outils-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8adbd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.pwa-root .pwa-outils-field input[type="date"] {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  /* iOS native date picker - normalize size */
  min-height: 42px;
}

/* ════════════════════════════════════════════════════════════
   [v643] Carte de chaleur du portefeuille
   Layout : top fixe (segm + 3 stats), bottom scroll (carte + zones)
   Carte : Mapbox Static API en fond + SVG overlay pour les pins
   ════════════════════════════════════════════════════════════ */
.pwa-root .pwa-heat-top {
  flex-shrink: 0;
  padding: 14px 16px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.08);
}
.pwa-root .pwa-heat-top .pwa-outils-segm {
  margin-bottom: 12px;
}
.pwa-root .pwa-heat-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.pwa-root .pwa-heat-stat-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
  text-align: center;
}
.pwa-root .pwa-heat-stat-val {
  font-family: var(--font-display, system-ui);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.pwa-root .pwa-heat-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.pwa-root .pwa-heat-bottom {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 24px;
}

/* Carte Mapbox + overlay SVG */
.pwa-root .pwa-heat-map-wrap {
  position: relative;
  width: 100%;
  /* ratio 4:3 pour avoir une carte lisible */
  aspect-ratio: 4 / 3;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.pwa-root .pwa-heat-map-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pwa-root #pwa-heat-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pwa-root .pwa-heat-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.pwa-root .pwa-heat-spin {
  width: 30px;
  height: 30px;
  border: 3px solid var(--border);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: pwa-heat-spin 0.8s linear infinite;
}
@keyframes pwa-heat-spin {
  to { transform: rotate(360deg); }
}

/* Légende */
.pwa-root .pwa-heat-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.pwa-root .pwa-heat-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pwa-root .pwa-heat-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Liste top zones */
.pwa-root .pwa-heat-zones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pwa-root .pwa-heat-zones-ttl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
  padding: 0 4px;
}
.pwa-root .pwa-heat-zone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pwa-root .pwa-heat-zone-rank {
  font-family: var(--font-display, system-ui);
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  width: 22px;
  flex-shrink: 0;
}
.pwa-root .pwa-heat-zone-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.pwa-root .pwa-heat-zone-bar-wrap {
  flex: 2;
  height: 6px;
  background: var(--s2);
  border-radius: 3px;
  overflow: hidden;
}
.pwa-root .pwa-heat-zone-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}
.pwa-root .pwa-heat-zone-count {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════
   [v643] Carte de chaleur du portefeuille
   Mapbox Static API (carte de fond) + SVG overlay (heatmap)
   ════════════════════════════════════════════════════════════ */
.pwa-root #pwa-outils-heatmap.is-active { display: flex !important; }

.pwa-root .pwa-heat-top {
  flex-shrink: 0;
  padding: 14px 16px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.pwa-root .pwa-heat-top .pwa-outils-segm {
  margin-bottom: 12px;
}
.pwa-root .pwa-heat-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.pwa-root .pwa-heat-stat-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.pwa-root .pwa-heat-stat-val {
  font-family: var(--font-display, system-ui);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pwa-root .pwa-heat-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.pwa-root .pwa-heat-bottom {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 24px;
}

.pwa-root .pwa-heat-map-wrap {
  position: relative;
  width: 100%;
  /* Carré-ish, max 360px de hauteur */
  aspect-ratio: 4 / 3;
  max-height: 360px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  /* [v644] Anthony : "sur PWA on peut pas bouger la map".
     Sur iOS, toucher l'image Mapbox déclenchait le scroll de la page +
     parfois un long-press → menu copier image. On bloque tout ça :
     - touch-action:manipulation → autorise tap rapide MAIS pas pinch/zoom/drag
       (avant v645 c'était :none mais ça empêchait aussi les clicks sur cercles)
     - user-select:none + drag:none + callout:none → pas de menu long-press */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pwa-root .pwa-heat-map-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* [v644] Pas de drag sur l'image elle-même */
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
.pwa-root .pwa-heat-map-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* [v645] Le SVG capture les clicks pour ouvrir la fiche zone, MAIS
     uniquement sur les cercles (pas sur le fond invisible). Les <circle>
     ont fill défini donc reçoivent les events naturellement, le fond du
     SVG est transparent → laisse passer les events ailleurs.
     pointer-events:auto sur le svg + pointer-events des cercles (defaut). */
  pointer-events: auto;
}
.pwa-root .pwa-heat-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  background: var(--s2);
  z-index: 2;
}
.pwa-root .pwa-heat-spin {
  width: 26px; height: 26px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent, #6b5cf5);
  border-radius: 50%;
  animation: pwa-heat-spin .9s linear infinite;
}
@keyframes pwa-heat-spin { to { transform: rotate(360deg); } }

.pwa-root .pwa-heat-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 11.5px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.pwa-root .pwa-heat-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pwa-root .pwa-heat-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pwa-root .pwa-heat-legend-bar {
  width: 60px; height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(234,88,12,.15), #ea580c);
}

.pwa-root .pwa-heat-zones {
  margin-top: 4px;
}
.pwa-root .pwa-heat-zones-ttl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
  padding: 0 4px;
}
.pwa-root .pwa-heat-zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
}
.pwa-root .pwa-heat-zone-cp {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  min-width: 56px;
}
.pwa-root .pwa-heat-zone-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--s2);
  border-radius: 4px;
  overflow: hidden;
}
.pwa-root .pwa-heat-zone-bar {
  height: 100%;
  background: var(--accent, #6b5cf5);
  border-radius: 4px;
  transition: width .3s ease;
}
.pwa-root .pwa-heat-zone-count {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}

.pwa-root .pwa-heat-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* [v643] Heatmap zones — éléments manquants */
.pwa-root .pwa-heat-zone-rank {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 22px;
}
.pwa-root .pwa-heat-zone-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  min-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   [v645] Sheet brief de zone (PWA)
   Bottom sheet slide-up, ouvert via tap sur cercle map ou row top zones.
   ════════════════════════════════════════════════════════════ */
body.is-mobile.pwa-active #pwa-heat-zone-sheet {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: none;
  pointer-events: none;
}
body.is-mobile.pwa-active #pwa-heat-zone-sheet.open {
  display: block !important;
  pointer-events: auto;
}
.pwa-heat-zone-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity .24s ease;
  pointer-events: none;
}
#pwa-heat-zone-sheet.open .pwa-heat-zone-sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.pwa-heat-zone-sheet-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-radius: 18px 18px 0 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.16);
  pointer-events: auto;
  /* Padding bottom = safe area iOS */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#pwa-heat-zone-sheet.open .pwa-heat-zone-sheet-content {
  transform: translateY(0);
}

.pwa-heat-zone-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}
.pwa-heat-zone-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pwa-heat-zone-sheet-title-wrap {
  flex: 1;
  min-width: 0;
}
.pwa-heat-zone-sheet-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent, #6b5cf5);
  margin-bottom: 3px;
}
.pwa-heat-zone-sheet-title {
  font-family: var(--font-display, system-ui);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--text);
}
.pwa-heat-zone-sheet-close {
  flex-shrink: 0;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted);
}
.pwa-heat-zone-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 24px;
}

/* Bloc brief IA (PWA) */
.pwa-heat-zone-brief {
  background: linear-gradient(135deg, rgba(107, 92, 245, .08), rgba(139, 123, 255, .04));
  border: 1px solid rgba(107, 92, 245, .25);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
html[data-theme="noir"] .pwa-heat-zone-brief {
  background: linear-gradient(135deg, rgba(107, 92, 245, .14), rgba(139, 123, 255, .06));
}
.pwa-heat-zone-brief-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent, #6b5cf5);
  margin-bottom: 8px;
}
.pwa-heat-zone-brief-content {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
}
.pwa-heat-zone-brief-soon {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
}

/* Stats */
.pwa-heat-zone-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 16px;
}
.pwa-heat-zone-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
}
.pwa-heat-zone-stat-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.pwa-heat-zone-stat-val {
  font-family: var(--font-display, system-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}

/* Sections (biens/acquéreurs) */
.pwa-heat-zone-section {
  margin-bottom: 16px;
}
.pwa-heat-zone-section-ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.pwa-heat-zone-section-count {
  background: var(--s2);
  color: var(--muted);
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
}
.pwa-heat-zone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 5px;
  cursor: pointer;
}
.pwa-heat-zone-item:active {
  background: var(--s2);
}
.pwa-heat-zone-item-av {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  font-family: var(--font-display, system-ui);
}
.pwa-heat-zone-item-av.bien {
  background: rgba(37, 99, 235, .15);
  color: #2563eb;
}
.pwa-heat-zone-item-av.acq {
  background: rgba(220, 38, 38, .15);
  color: #dc2626;
}
.pwa-heat-zone-item-body {
  flex: 1;
  min-width: 0;
}
.pwa-heat-zone-item-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pwa-heat-zone-item-detail {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pwa-heat-zone-item-arr {
  flex-shrink: 0;
  color: var(--muted);
}
.pwa-heat-zone-empty {
  text-align: center;
  padding: 12px;
  color: var(--muted);
  font-size: 11.5px;
  font-style: italic;
  background: var(--s2);
  border-radius: 9px;
}

/* Cercles SVG cliquables (PWA) */
.pwa-root .pwa-heat-svg-circle {
  cursor: pointer;
}
/* Rows clickable du top zones */
.pwa-root .pwa-heat-zone-row-clickable {
  cursor: pointer;
  transition: background .12s ease;
}
.pwa-root .pwa-heat-zone-row-clickable:active {
  background: var(--s2);
}

/* [v748] Navbar PWA visible sur la page tâches (Anthony : "navbar a disparu sur page taches").
   Contexte : v635 avait monté tous les overlays full-screen (#pwa-tasks-overlay,
   #pwa-settings-overlay, #pwa-compta-overlay etc.) à z-index 100005 pour passer AU-DESSUS
   de la tabbar (z:99999), avec padding-bottom retiré (Anthony alors : "faut que ça aille
   jusqu'en bas"). Anthony 5mai26 : sur la page tâches spécifiquement il veut maintenant
   la tabbar visible pour la navigation. Override ciblé sur #pwa-tasks-overlay seulement
   (les autres overlays gardent le comportement v635). Z-index 99000 (sous tabbar 99999) +
   padding-bottom pour réserver l'espace de la tabbar (62px + safe-area iOS). */
body.is-mobile.pwa-active #pwa-tasks-overlay{
  z-index:99000 !important;
  padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px)) !important;
}