/* ══════════════════════════════════════════════════════════════════════
   Donna · Tasks & Compta — design system (Light / Noir)
   Aligned on CLAUDE.md : pas d'accent violet en bouton plein, radius 4/3,
   ombres subtiles, badges color-mix.
   ══════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="light"]{
  --bg:#f7f8fa; --surface:#ffffff; --s2:#f1f3f7; --s3:#e7ebf2;
  --border:#e4e7ee; --border-hi:#d3d8e3;
  --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;
  --radius-sm:3px; --radius:4px; --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(20,22,31,.04);
  --shadow:0 4px 14px rgba(20,22,31,.07);

  --font:-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
:root[data-theme="noir"]{
  /* [v1149 Anthony "tu as oublié d'adoucir le theme noir global de donna dans
     le style du focus"] Avant : noir pur #000/#0a0a0c/#121216 (très contrasté,
     fatigant en session longue). Aligné maintenant sur les tokens dark adoucis
     du focus mode v1137 — gris-bleuté style Linear, moins fatigant pour les
     yeux, garde le contraste sur le texte. Les bordures passent aussi en
     rgba(255,255,255,.07/.12) pour matcher le rendu focus. */
  --bg:#0f1115; --surface:#16181d; --s2:#1c1e24; --s3:#23262d;
  --border:rgba(255,255,255,.07); --border-hi:rgba(255,255,255,.12);
  --text:#e7e9ee; --text-dim:#a8adbd; --muted:#6a7080;
  --accent:#8b7bff; --accent-hi:#a89dff; --accent-dim:rgba(139,123,255,.13);
  --chaud:#ff6680; --tiede:#f0c050; --froid:#5ca8ff; --green:#4fd49a;
  --radius-sm:2px; --radius:3px; --radius-lg:6px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 14px rgba(0,0,0,.5);
}

*{ box-sizing:border-box }
html, body{ margin:0; padding:0 }
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0 }
input, textarea, select{ font-family:inherit }
a{ color:inherit; text-decoration:none }

/* ════════ Theme toggle (canvas top-right) ════════ */
.theme-toggle{
  position:fixed; top:14px; right:14px; z-index:9999;
  display:flex; gap:2px; padding:3px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.theme-toggle button{
  padding:5px 10px; font-size:11.5px; font-weight:500;
  color:var(--text-dim); border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; gap:5px;
}
.theme-toggle button.active{ background:var(--s2); color:var(--text); }
.theme-toggle button:hover:not(.active){ color:var(--text); }

/* ════════ Artboard shell (utility) ════════ */
.frame{ width:100%; height:100%; background:var(--bg); overflow:hidden; }
.app{
  display:grid; grid-template-columns:200px 1fr;
  width:100%; height:100%;
}

/* ════════ Sidebar ════════ */
.sb{
  background:var(--surface); border-right:1px solid var(--border);
  padding:14px 10px; display:flex; flex-direction:column; gap:2px;
  min-width:0;
}
.sb-brand{
  display:flex; align-items:center; gap:8px; padding:4px 8px 12px;
}
.sb-brand .mark{
  width:22px; height:22px; border-radius:5px;
  background:var(--text); color:var(--bg);
  display:grid; place-items:center; font-weight:700; font-size:13px;
  font-family:'Plus Jakarta Sans', var(--font);
}
.sb-brand .name{ font-weight:600; font-size:14px; letter-spacing:-.01em; }

.sb-search{
  display:flex; align-items:center; gap:7px;
  padding:6px 9px; margin-bottom:8px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-dim); font-size:12px;
  width:100%;
}
.sb-search .lbl{ flex:1; text-align:left }
.sb-search kbd{
  font-family:var(--mono); font-size:10px;
  padding:1px 5px; border-radius:3px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted);
}

.sb-section{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:10px 8px 4px; font-weight:600;
}
.sb-item{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:var(--radius);
  font-size:12.5px; color:var(--text-dim); cursor:pointer;
  transition:background .12s, color .12s;
}
.sb-item:hover{ background:var(--s2); color:var(--text); }
.sb-item[data-active="true"]{ background:var(--s2); color:var(--text); font-weight:500; }
.sb-item svg{ width:14px; height:14px; flex:0 0 14px; }
.sb-item .c{
  margin-left:auto; font-size:10.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.sb-user{
  margin-top:auto; padding:8px;
  display:flex; align-items:center; gap:8px;
  border-top:1px solid var(--border);
}
.sb-user .av{
  width:26px; height:26px; border-radius:50%;
  background:var(--s3); color:var(--text);
  display:grid; place-items:center; font-weight:600; font-size:11px;
}
.sb-user-meta{ flex:1; min-width:0; }
.sb-user-name{ font-size:12px; font-weight:500; color:var(--text); }
.sb-user-role{ font-size:10.5px; color:var(--muted); }

/* ════════ Page header ════════ */
.pg{ padding:18px 22px 22px; display:flex; flex-direction:column; gap:14px; min-width:0; overflow:auto; }
/* [v1022] .pg-hero et .pg-hero-r supprimés (legacy mort, migré vers .ph Margot
   en v957). Cf CSS_HIERARCHY.md §2.3. Le commentaire désactivé v681b est
   également retiré, n'a plus de pertinence. */

/* ════════ Buttons (per CLAUDE.md) ════════ */
.b{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; font-size:12px; font-weight:500;
  border-radius:var(--radius); border:1px solid transparent;
  transition:background .12s, color .12s, border-color .12s;
  white-space:nowrap;
}
.b svg{ width:12px; height:12px; }

/* primary: text-color filled, NO accent, NO shadow */
.b.primary{ background:var(--text); color:var(--bg); }
.b.primary:hover{ background:var(--text-dim); }

/* secondary: surface + border */
.b.secondary{ background:var(--s2); color:var(--text); border-color:var(--border); }
.b.secondary:hover{ background:var(--s3); }

/* ghost: transparent */
.b.ghost{ color:var(--text-dim); }
.b.ghost:hover{ background:var(--s2); color:var(--text); }

.b.icon{ padding:6px; }
.b.sm{ padding:4px 8px; font-size:11.5px; }

/* ════════ KPI strip ════════ */
.ca-strip{
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px;
}
.ca-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:12px 14px;
  position:relative; min-width:0;
}
.ca-card .l{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600; margin-bottom:6px;
}
.ca-card .v{
  font-size:22px; font-weight:700; letter-spacing:-.015em;
  color:var(--text); font-variant-numeric:tabular-nums;
  font-family:'Plus Jakarta Sans', var(--font);
  display:flex; align-items:baseline; gap:3px;
}
.ca-card .v .u{ font-size:13px; font-weight:500; color:var(--text-dim); }
.ca-card .net{
  margin-top:6px; padding-top:6px; border-top:1px dashed var(--border);
  font-size:11px; color:var(--text-dim);
  display:flex; align-items:center; gap:6px;
  font-variant-numeric:tabular-nums;
}
.ca-card .net strong{
  font-size:9.5px; letter-spacing:.06em; color:var(--muted);
  font-weight:600;
}

/* color accents on left bar */
.ca-card::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 2px 2px 0; background:var(--c, var(--accent));
}
.ca-card.encaisse{ --c:var(--green); }
.ca-card.prod{ --c:var(--accent); }
.ca-card.offre{ --c:var(--tiede); }
.ca-card.previ{ --c:var(--froid); }
.ca-card.agence{ --c:var(--text); }

.ca-card .badge{
  position:absolute; top:12px; right:12px;
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--c, var(--accent)) 15%, transparent);
  color:var(--c, var(--accent));
}

/* ════════ Toolbar ════════ */
.cs-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 10px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
}
.cs-search{
  display:flex; align-items:center; gap:7px;
  padding:5px 10px; min-width:240px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-dim);
}
.cs-search input{
  border:none; background:none; outline:none;
  font-size:12px; color:var(--text); flex:1; min-width:0;
}
.cs-search input::placeholder{ color:var(--muted); }

.cs-divider{
  width:1px; height:20px; background:var(--border); margin:0 2px;
}
.cs-chips{ display:flex; gap:3px; align-items:center; }
.cs-chip{
  padding:5px 10px; font-size:11.5px; font-weight:500;
  color:var(--text-dim); border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .12s, color .12s, border-color .12s;
  display:inline-flex; align-items:center; gap:5px;
}
.cs-chip:hover{ background:var(--s2); color:var(--text); }
.cs-chip[data-active="true"]{
  background:var(--s2); color:var(--text);
  border-color:var(--border-hi);
}
.cs-chip.subtle{ font-size:11px; color:var(--muted); }
.cs-chip.subtle[data-active="true"]{ color:var(--text); }

.cs-actions{ margin-left:auto; display:flex; gap:4px; }

/* ════════ Compta table ════════ */
.cs-tbl-wrap{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.cs-tbl{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:11.5px;
}
.cs-tbl thead th{
  position:sticky; top:0; z-index:1;
  text-align:left; padding:9px 10px;
  font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted);
  background:var(--surface); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.cs-tbl thead th .sort{ font-size:9px; color:var(--muted); margin-left:4px; opacity:.6; }
.cs-tbl tbody td{
  padding:10px; border-bottom:1px solid var(--border);
  color:var(--text); vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
.cs-tbl tbody tr:last-child td{ border-bottom:none; }
.cs-tbl tbody tr:hover td{ background:var(--s2); }

/* Vente cell w/ pipeline */
.vente-cell{
  display:flex; flex-direction:column; gap:5px; min-width:200px;
}

/* Pipeline segments */
.pipe-seg{ display:flex; gap:3px; }
.pipe-seg .seg{
  flex:1; height:5px; border-radius:2px;
  background:var(--s3);
  transition:background .15s;
}
.pipe-seg .seg.done{ background:var(--accent); }
/* [v687] "now" : green (vert) — Anthony : "c'est bleu au lieu de vert".
   Le vert signifie "ok, en cours, la suite naturelle" et c'est cohérent avec
   l'usage donna pour les états positifs. Contraste bien avec le violet done. */
.pipe-seg .seg.now{
  background:var(--green);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--green) 25%, transparent);
}

/* Year/Type badges */
.year-chip{
  display:inline-block; padding:1px 7px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:10px; font-size:10.5px; font-weight:500;
  color:var(--text-dim);
}
.type-badge{
  display:inline-block; padding:1px 6px;
  font-size:9.5px; font-weight:700; letter-spacing:.04em;
  border-radius:3px; text-transform:uppercase;
}
.type-badge.exclu{
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.type-badge.simple{
  background:var(--s2); color:var(--text-dim);
  border:1px solid var(--border);
}
.type-badge.delegation{
  background:color-mix(in srgb, var(--froid) 13%, transparent);
  color:var(--froid);
  border:1px solid color-mix(in srgb, var(--froid) 25%, transparent);
}

/* Date cells */
.date-cell{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--text);
  white-space:nowrap;
}
.date-cell.empty::before{
  content:"—"; color:var(--muted);
}
.jminus{
  font-size:9.5px; font-weight:700;
  padding:1px 5px; border-radius:3px;
  background:var(--s2); color:var(--text-dim);
  border:1px solid var(--border);
}
.jminus.warm{
  background:color-mix(in srgb, var(--tiede) 14%, transparent);
  color:var(--tiede); border-color:color-mix(in srgb, var(--tiede) 25%, transparent);
}
.jminus.urgent{
  background:color-mix(in srgb, var(--chaud) 14%, transparent);
  color:var(--chaud); border-color:color-mix(in srgb, var(--chaud) 25%, transparent);
}

/* ════════ Graph view ════════ */
.cs-graph-wrap{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 20px 14px;
}
.cs-graph-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.cs-graph-title{
  font-size:14px; font-weight:600; color:var(--text);
  font-family:'Plus Jakarta Sans', var(--font);
}
.cs-graph-title .y{ color:var(--muted); font-weight:500; margin-left:4px; }
.cs-graph-legend{ margin-left:auto; display:flex; gap:14px; font-size:11px; color:var(--text-dim); }
.cs-graph-legend .li{ display:inline-flex; align-items:center; gap:6px; }
.cs-graph-legend .sw{
  width:10px; height:10px; border-radius:2px; background:var(--s3);
}
.cs-graph-legend .sw.encaisse{ background:var(--green); }
.cs-graph-legend .sw.prod{ background:var(--accent); }
.cs-graph-legend .sw.previ{
  background:repeating-linear-gradient(45deg, var(--froid) 0 3px, color-mix(in srgb, var(--froid) 40%, transparent) 3px 6px);
}

.bar-chart{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:10px;
  height:240px; align-items:end;
  padding:0 4px 26px;
  position:relative;
}
.bar-chart::before, .bar-chart::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:var(--border);
}
.bar-chart::before{ top:0; }
.bar-chart::after{ bottom:26px; }

.bar-month .total{
  font-size:10px; font-weight:600; color:var(--text-dim);
  margin-bottom:3px; min-height:13px;
  font-variant-numeric:tabular-nums;
}
.bar-month.current .total{ color:var(--text); font-weight:700; }

.bar-stack .seg{ width:100%; }
.bar-stack .seg.encaisse{ background:var(--green); }
.bar-stack .seg.prod{ background:var(--accent); }
.bar-stack .seg.previ{
  background:repeating-linear-gradient(45deg, var(--froid) 0 4px, color-mix(in srgb, var(--froid) 35%, transparent) 4px 8px);
}
.bar-month .lbl{
  position:absolute; bottom:-22px;
  font-size:10.5px; color:var(--muted); font-weight:500;
}
.bar-month.current .lbl{ color:var(--text); font-weight:600; }

.cs-graph-foot{
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.cs-graph-stat .l{
  font-size:10.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; margin-bottom:4px;
}
.cs-graph-stat .v{
  font-size:18px; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.cs-graph-stat.green .v{ color:var(--green); }
.cs-graph-stat.accent .v{ color:var(--accent); }

/* ════════════════════════════════════════════════════════════════════
   TASKS
   ════════════════════════════════════════════════════════════════════ */

/* ── Task row — atom partagé ── */
.tsk{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 12px;
  border-radius:var(--radius);
  transition:background .12s;
  position:relative;
  cursor:pointer;
}
.tsk:hover{ background:var(--s2); }
.tsk + .tsk{ border-top:1px solid var(--border); border-radius:0; }
.tsk + .tsk:hover{ border-top-color:transparent; }
.tsk:hover + .tsk{ border-top-color:transparent; }

.tsk-check{
  width:16px; height:16px; flex:0 0 16px;
  margin-top:1px;
  border-radius:50%;
  border:1.5px solid var(--border-hi);
  background:var(--surface);
  display:grid; place-items:center;
  cursor:pointer; transition:all .15s;
  color:transparent;
}
.tsk-check:hover{ border-color:var(--text-dim); background:var(--s2); }
.tsk-check.checked{
  background:var(--green); border-color:var(--green); color:#fff;
}
.tsk.is-done .tsk-title{ text-decoration:line-through; color:var(--muted); }
.tsk.is-done .tsk-meta{ opacity:.6; }

.tsk-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.tsk-title-row{ display:flex; align-items:center; gap:6px; min-width:0; }
.tsk-prio-dot{
  width:6px; height:6px; flex:0 0 6px; border-radius:50%;
  background:var(--chaud);
}
.tsk-prio-dot.low{ background:var(--muted); opacity:.6; }
.tsk-title{
  font-size:12.5px; font-weight:500; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tsk-title-row .ai{
  display:inline-flex; align-items:center; gap:3px;
  font-size:9.5px; font-weight:700; letter-spacing:.04em;
  padding:1px 6px; border-radius:3px;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent); flex:0 0 auto;
  text-transform:uppercase;
}

.tsk-meta{
  display:flex; align-items:center; gap:7px;
  font-size:11px; color:var(--text-dim);
}
.tsk-meta .sep{ color:var(--muted); }

/* Due chips */
.due{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:500;
  padding:1px 6px; border-radius:3px;
  background:var(--s2); color:var(--text-dim);
  border:1px solid var(--border);
  white-space:nowrap;
}
.due svg{ width:10px; height:10px; }
.due.overdue{
  background:color-mix(in srgb, var(--chaud) 12%, transparent);
  color:var(--chaud);
  border-color:color-mix(in srgb, var(--chaud) 25%, transparent);
}
.due.today{
  background:color-mix(in srgb, var(--tiede) 12%, transparent);
  color:var(--tiede);
  border-color:color-mix(in srgb, var(--tiede) 25%, transparent);
}
.due.upcoming{
  background:var(--s2); color:var(--text-dim);
  border-color:var(--border);
}
.due.nodate{ color:var(--muted); }

/* Context chip (linked entity) */
.ctx{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; color:var(--text-dim);
  max-width:280px;
}
.ctx-i{
  width:14px; height:14px; flex:0 0 14px;
  border-radius:3px;
  display:grid; place-items:center;
  font-size:9px; font-weight:700; color:#fff;
}
.ctx-i.vendeur{ background:var(--accent); }
.ctx-i.acquereur{ background:var(--tiede); }
.ctx-i.bien{ background:var(--froid); }
.ctx-name{
  color:var(--text); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ctx-addr{ color:var(--muted); }

/* [v744] S2 fix : sur PWA mobile, masquer l'adresse longue (codes postaux liste).
   Sur les tâches "Relance bien" avec 5 codes postaux, l'adresse wrappait en 2 lignes
   dans un layout étroit illisible. Le titre contient déjà l'arrondissement principal
   et la pill client suffit à différencier. Tap → fiche détaillée pour le contexte complet.
   Desktop garde l'affichage standard (place suffisante). */
body.is-mobile.pwa-active .ctx-addr{ display:none; }

/* ════════════════════════════════════════════════════════════════════
   [v746] Refonte UI tâches PWA — Anthony 5mai26 (ZIP donna__3_.zip)
   Match le design Margot Tasks v2.1 (référentiel _pwa-handoff-max/tasks).
   Restyle visuellement les .tsk existants en mode PWA seulement, sans toucher
   à la structure HTML (donc pas de risque sur desktop). Cibles principales :
   - Container .pwa-tasks avec border + radius pour l'effet "card groupée"
   - .tsk : padding généreux 14px, min-height 60px
   - .tsk-check : carré radius-sm 24×24 (vs rond)
   - .tsk-title : font 14px line-clamp 2 lignes
   - .tsk-meta : 11.5px
   - .tsk.is-ai : gradient subtle + barre accent gauche
   ════════════════════════════════════════════════════════════════════ */

/* Container : transformer la liste plate en card groupée bordurée */
body.is-mobile.pwa-active #pwa-aujourdhui-tasks-list,
body.is-mobile.pwa-active #page-tasks .t-group-list,
body.is-mobile.pwa-active #page-tasks .t-groups{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
body.is-mobile.pwa-active #pwa-aujourdhui-tasks-list .tsk + .tsk,
body.is-mobile.pwa-active #page-tasks .t-group-list .tsk + .tsk{
  border-top:1px solid var(--border);
  border-radius:0;
}

/* [v747/v748] Page tâches PWA : chaque tâche est une CARD INDIVIDUELLE blanche
   (Anthony : "fond blanc sur chaque tâche comme celle donna"). On override
   l'encart groupé hérité du bloc précédent : container transparent, .tsk
   avec son propre background + border + radius + gap entre.
   [v748] Découverte importante : la page tâches PWA n'est PAS #page-tasks
   (qui est la page desktop dans .shellv2-main) mais l'overlay #pwa-tasks-overlay
   (cf pwaOpenTasks ligne 12391, rendu via pwaRenderTasksList ligne 12425 qui
   produit .task-group + .task-list — pas .t-group + .t-group-list). Donc mes
   selectors v747 ne matchaient PAS la vraie page tasks PWA. v748 ajoute
   #pwa-tasks-overlay .task-list / .task-group pour cibler le vrai DOM.
   L'aujourd'hui PWA garde l'encart groupé (#pwa-aujourdhui-tasks-list inchangé). */
body.is-mobile.pwa-active #page-tasks .t-group-list,
body.is-mobile.pwa-active #page-tasks .t-groups,
body.is-mobile.pwa-active #pwa-tasks-overlay .task-list,
body.is-mobile.pwa-active #pwa-tasks-overlay .task-group{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
  gap:6px;
}
body.is-mobile.pwa-active #page-tasks .t-group-list .tsk,
body.is-mobile.pwa-active #pwa-tasks-overlay .task-list .tsk{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden; /* clip le ::before des .is-ai (barre violette) au radius */
}
body.is-mobile.pwa-active #page-tasks .t-group-list .tsk + .tsk,
body.is-mobile.pwa-active #pwa-tasks-overlay .task-list .tsk + .tsk{
  border-top:1px solid var(--border) !important; /* override la séparation par bordure intérieure du bloc précédent */
}

/* .tsk en mode PWA : padding généreux + alignement top */
body.is-mobile.pwa-active .tsk{
  padding:14px;
  gap:12px;
  align-items:flex-start;
  min-height:60px;
  border-radius:0;
}
body.is-mobile.pwa-active .tsk:hover{ background:var(--surface); } /* pas de hover bg sur mobile */
body.is-mobile.pwa-active .tsk:active{ background:var(--s2); }     /* feedback tap visuel */

/* Checkbox : carrée 24×24 avec radius-sm (vs rond 16×16 desktop) */
body.is-mobile.pwa-active .tsk-check{
  width:24px; height:24px; flex:0 0 24px;
  border-radius:var(--radius-sm);
  margin-top:1px;
  transition:all .15s;
}
body.is-mobile.pwa-active .tsk-check svg{ width:13px; height:13px; }

/* [v747] Titre flex:1 pour que les éléments suivants (DONNA badge, note icon)
   soient poussés à droite du row (Anthony : "icone donna il faut les mettre
   plus à droite"). */
body.is-mobile.pwa-active .tsk-title{
  flex:1;
  min-width:0;
  font-size:14px;
  letter-spacing:-.1px;
  line-height:1.35;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:initial;
}

/* Meta : 11.5px, autorise wrap (due-chip + ctx peut passer à la ligne sur très petit écran) */
body.is-mobile.pwa-active .tsk-meta{
  font-size:11.5px;
  flex-wrap:wrap;
  gap:6px;
}

/* Priorité dot : aligné top du titre */
body.is-mobile.pwa-active .tsk-prio-dot{
  margin-top:6px;
}

/* AI tasks : gradient subtle + barre accent à gauche */
body.is-mobile.pwa-active .tsk.is-ai{
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, var(--surface)) 0%, var(--surface) 60%);
  position:relative;
}
body.is-mobile.pwa-active .tsk.is-ai::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--accent);
}

.tsk-act{
  display:flex; gap:1px; opacity:0;
  transition:opacity .12s;
  align-self:center;
}
/* [v742] S1 fix : hover seulement sur devices qui supportent hover.
   Sur iOS Safari/PWA, un tap déclenche un :hover collé qui reste après
   le tap suivant → icônes Modifier/Supprimer visibles en permanence sur
   la dernière tâche tapée. @media (hover: hover) cible uniquement les
   devices avec un vrai pointeur (souris desktop). */
@media (hover: hover) {
  .tsk:hover .tsk-act{ opacity:1; }
}
/* [v749] Sur PWA mobile, les boutons modifier/supprimer ne sont jamais accessibles
   (pas de hover, le tap ouvre la fiche détail). Or .tsk-act garde display:flex avec
   opacity:0, donc ses ~50px de boutons modifier/supprimer occupent l'espace à droite
   du DOM dans le layout flex de .tsk. Anthony 5mai26 (screen IMG_3276 avec trait rouge) :
   "décale l'indication donna vers le trait rouge" — le trait rouge est dessiné contre le
   bord intérieur de la card, pile à l'endroit où .tsk-act mange la place. Solution :
   display:none sur PWA pour récupérer l'espace, DONNA + icône note sont alors poussés
   au bord droit grâce au .tsk-title { flex:1 } existant. */
body.is-mobile.pwa-active .tsk-act{ display:none !important; }
.tsk-act button{
  width:24px; height:24px; border-radius:var(--radius-sm);
  display:grid; place-items:center;
  color:var(--muted); transition:background .12s, color .12s;
}
.tsk-act button:hover{ background:var(--s3); color:var(--text); }
.tsk-act svg{ width:12px; height:12px; }

/* ── Page Mes tâches ── */
.pg-tasks{
  display:grid; grid-template-columns:248px 1fr; /* [v997] 200→248 = même largeur que Clients/Biens (Anthony) */
  gap:18px;
  min-height:0;
  /* [v767] align-items:start pour que la sidebar puisse être en sticky.
     Sans ça, le grid item s'étire et le sticky ne fonctionne pas. */
  align-items:start;
}
.t-aside{
  display:flex; flex-direction:column; gap:2px;
  /* [v997] Anthony : fond blanc card style Clients/Biens (au lieu d'items
     posés sur le bg). Surface + border + radius pour matcher .fside.
     [v999] padding:6px retiré — créait un gap blanc visible en haut de la
     card avant la section "VUES" (qui a déjà son propre padding 10px).
     Le contenu (.t-aside-section + .t-aside-item) gère son propre padding. */
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden; /* coupe les coins arrondis des items au hover */
  /* [v767] Anthony 6mai26 : "la sidebar filtre doit être fixe".
     Reste visible quand on scroll dans la liste de tâches. */
  position:sticky;
  top:8px;
  align-self:start;
  max-height:calc(100vh - 16px);
  overflow-y:auto;
  scrollbar-width:thin;
}
.t-aside-section{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:600;
  padding:10px 8px 4px;
}
.t-aside-item{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:var(--radius);
  font-size:12px; color:var(--text-dim); cursor:pointer;
  transition:background .12s, color .12s;
}
.t-aside-item:hover{ background:var(--s2); color:var(--text); }
.t-aside-item[data-active="true"]{ background:var(--s2); color:var(--text); font-weight:500; }
.t-aside-item .c{
  margin-left:auto; font-size:10.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
  padding:0 5px; border-radius:8px;
  background:var(--surface); border:1px solid var(--border);
  min-width:18px; text-align:center;
}
.t-aside-item[data-active="true"] .c{ background:var(--bg); }
.t-aside-item.ai-pin{
  margin-top:8px;
  background:color-mix(in srgb, var(--accent) 6%, transparent);
}
.t-aside-item.ai-pin .ai-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  flex:0 0 6px;
}
.t-aside-item.ai-pin[data-active="true"]{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--text);
}

.t-main{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.t-toolbar{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  flex-wrap:wrap;
}
.t-prio-seg{
  display:flex; gap:1px;
  background:var(--s2); border-radius:var(--radius); padding:2px;
}
.t-prio-seg button{
  padding:4px 9px; font-size:11px; font-weight:500;
  color:var(--text-dim); border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; gap:4px;
}
.t-prio-seg button.active{
  background:var(--surface); color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.t-prio-seg .pdot{
  width:6px; height:6px; border-radius:50%;
}
.t-prio-seg .pdot.haute{ background:var(--chaud); }
.t-prio-seg .pdot.normale{ background:var(--text-dim); }
.t-prio-seg .pdot.basse{ background:var(--muted); opacity:.6; }
.t-prio-seg .pdot.all{ background:transparent; border:1.5px solid var(--text-dim); }

.t-toggle{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px;
  font-size:11.5px; font-weight:500;
  color:var(--text-dim);
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--s2);
}
.t-toggle:hover{ color:var(--text); background:var(--s3); }
.t-toggle.on{ color:var(--text); background:var(--surface); }
.t-switch{
  width:22px; height:12px; border-radius:7px;
  background:var(--border-hi);
  position:relative; flex:0 0 22px;
  transition:background .15s;
}
.t-switch::after{
  content:""; position:absolute; top:1px; left:1px;
  width:10px; height:10px; border-radius:50%;
  background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:transform .15s;
}
.t-toggle.on .t-switch{ background:var(--text); }
.t-toggle.on .t-switch::after{ transform:translateX(10px); }

/* Task groups */
.t-groups{
  display:flex; flex-direction:column; gap:14px;
}
.t-group{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.t-group-head{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.t-group-title{
  font-size:12px; font-weight:600; color:var(--text);
}
.t-group-title.urgent{ color:var(--chaud); }
.t-group-title.urgent::before{
  content:"●"; margin-right:5px; color:var(--chaud);
}
.t-group-count{
  font-size:10.5px; color:var(--muted);
  padding:0 6px; border-radius:8px;
  background:var(--s2); border:1px solid var(--border);
  min-width:18px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.t-group-spacer{ flex:1; }

.t-group-list{ padding:6px; }
.t-group .tsk + .tsk{ border-top:none; }

/* Empty inline (AI suggestions) */
.t-ai-banner{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius:var(--radius-lg);
  font-size:12px; color:var(--text);
}
.t-ai-banner .ai-icon{
  width:22px; height:22px; flex:0 0 22px;
  display:grid; place-items:center;
  background:var(--surface);
  border-radius:5px;
  color:var(--accent);
}
.t-ai-banner b{ font-weight:600; }
.t-ai-banner .more{ color:var(--text-dim); }
.t-ai-banner .b{ margin-left:auto; }

/* ── Widget tasks (mockup intégrable) ── */
.t-widget{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.t-widget-head{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
}
.t-widget-title{
  font-size:12.5px; font-weight:600; color:var(--text);
}
.t-widget-count{
  font-size:10.5px; color:var(--muted);
  padding:0 6px; border-radius:8px;
  background:var(--s2); border:1px solid var(--border);
}
.t-widget-actions{ margin-left:auto; display:flex; gap:1px; }
.t-widget-actions button{
  width:22px; height:22px; border-radius:var(--radius-sm);
  display:grid; place-items:center; color:var(--muted);
}
.t-widget-actions button:hover{ background:var(--s2); color:var(--text); }

.t-widget-list{ padding:4px; max-height:none; }
.t-widget-add{
  display:flex; align-items:center; gap:6px;
  padding:9px 14px;
  font-size:11.5px; color:var(--muted);
  border-top:1px solid var(--border);
  width:100%; cursor:pointer;
  transition:color .12s, background .12s;
}
.t-widget-add:hover{ color:var(--text); background:var(--s2); }
.t-widget-add svg{ width:11px; height:11px; }

.t-widget-foot-link{
  padding:7px 14px; font-size:11px; color:var(--text-dim);
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:5px;
  cursor:pointer; transition:color .12s;
}
.t-widget-foot-link:hover{ color:var(--text); }
.t-widget-foot-link svg{ width:10px; height:10px; }

/* ── Quick add row ── */
.t-quick{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:12px; color:var(--text);
  transition:border-color .12s;
}
.t-quick:focus-within{ border-color:var(--text-dim); }
.t-quick svg{ color:var(--muted); }
.t-quick input{
  flex:1; border:none; outline:none; background:none;
  font-size:12.5px; color:var(--text);
}
.t-quick input::placeholder{ color:var(--muted); }
.t-quick .hints{ display:flex; gap:5px; }
.t-quick .hint{
  padding:1px 5px; border-radius:3px;
  font-size:10px; color:var(--muted);
  background:var(--s2); border:1px solid var(--border);
  font-family:var(--mono);
}

/* ── Vue widget : page contexte (background fake) ── */

.fiche-fake .row{ display:flex; gap:14px; }
.fiche-fake .photo{
  width:130px; height:90px; border-radius:var(--radius);
  background:var(--s3); flex:0 0 130px;
}
.fiche-fake .info{ flex:1; display:flex; flex-direction:column; gap:7px; }
.fiche-fake .line{
  height:9px; border-radius:3px; background:var(--s2);
}
.fiche-fake .line.s{ width:50%; }
.fiche-fake .line.m{ width:75%; }

.fiche-fake .block{
  height:46px; border-radius:var(--radius);
  background:var(--s2);
}

/* ── Modal create task ── */
.modal-shell{
  width:480px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; gap:8px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.modal-head .title{
  font-size:13.5px; font-weight:600; color:var(--text);
  font-family:'Plus Jakarta Sans', var(--font);
}
.modal-head .close{
  margin-left:auto; width:24px; height:24px; border-radius:var(--radius-sm);
  display:grid; place-items:center; color:var(--muted);
}
.modal-head .close:hover{ background:var(--s2); color:var(--text); }

.modal-ctx{
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; border-bottom:1px solid var(--border);
  background:var(--s2); font-size:11.5px;
}
.modal-ctx-l{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.modal-ctx-v{ color:var(--text); font-weight:500; }
.modal-ctx-edit{ margin-left:auto; font-size:11px; color:var(--text-dim); }
.modal-ctx-edit:hover{ color:var(--text); text-decoration:underline; }

.modal-body{ padding:16px; display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-l{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600;
}
.field-input{
  padding:7px 10px; font-size:12.5px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text); width:100%;
  outline:none; transition:border-color .12s;
}
.field-input:focus{ border-color:var(--text-dim); }
.field-input.title{ font-size:14px; font-weight:500; padding:9px 12px; }
.field textarea.field-input{ resize:vertical; min-height:60px; font-size:12px; }

.shortcuts{ display:flex; gap:5px; flex-wrap:wrap; }
.shortcut{
  padding:5px 10px; font-size:11.5px; font-weight:500;
  background:var(--s2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-dim);
}
.shortcut:hover{ background:var(--s3); color:var(--text); }
.shortcut.active{
  background:var(--text); color:var(--bg); border-color:var(--text);
}

.dual{ display:grid; grid-template-columns:1fr 100px; gap:8px; }

.modal-foot{
  display:flex; gap:8px; justify-content:flex-end;
  padding:12px 16px;
  border-top:1px solid var(--border);
  background:var(--s2);
}

/* ── Empty state ── */
.t-empty{
  padding:40px 20px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; color:var(--text-dim);
}
.t-empty-icon{
  width:48px; height:48px; border-radius:50%;
  background:color-mix(in srgb, var(--green) 12%, transparent);
  color:var(--green);
  display:grid; place-items:center;
}
.t-empty .h{ font-size:13px; font-weight:600; color:var(--text); }
.t-empty .s{ font-size:11.5px; color:var(--text-dim); max-width:280px; }