/* ProjectDone — design system (porté du prototype validé) */
:root{--bg:#FFFFFF;--surface:#F4F4F4;--surface-2:#FAFAFA;--surface-3:#ECECEC;--hairline:rgba(0,0,0,0.06);--hairline-strong:rgba(0,0,0,0.10);--ink:#000000;--ink-2:#3C3C43;--ink-3:#8E8E93;--ink-4:#C7C7CC;--accent:#7C3AED;--accent-soft:#F3EEFE;--doing:#FF9500;--doing-soft:#FFF3E5;--done:#34C759;--done-soft:#E6F8EB;--danger:#FF3B30;--danger-soft:#FFECEA;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:26px;--r-pill:999px;--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,"SF Mono","Menlo",monospace}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);text-rendering:optimizeLegibility;overflow:hidden}
button{font-family:var(--font)}
input,textarea{font-family:var(--font)}
.app{display:grid;grid-template-columns:264px 1fr;height:100vh;height:100dvh;background:var(--bg)}
.sb{height:100%;padding:20px 14px 14px;display:flex;flex-direction:column;gap:18px;background:var(--bg);border-right:1px solid var(--hairline);overflow-y:auto}
.sb-brand{display:flex;align-items:center;gap:8px;padding:2px 6px;font-weight:700;font-size:17px;letter-spacing:-0.02em}
.sb-brand-mark{width:22px;height:22px;border-radius:7px;background:var(--ink);display:grid;place-items:center}
.sb-brand-tld{color:var(--ink-3);font-weight:500}
.sb-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:var(--surface);border-radius:var(--r-pill);color:var(--ink-3);font-size:14px;font-weight:500;cursor:text}
.sb-search kbd{margin-left:auto;font-size:11px;font-weight:500}
.sb-section{display:flex;flex-direction:column;gap:2px}
.sb-section-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-3);padding:6px 10px 6px;font-weight:600}
.sb-section-title button{background:none;border:none;color:var(--ink-3);cursor:pointer;padding:0;display:grid;place-items:center}
.sb-item{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:var(--r-md);color:var(--ink);font-size:14.5px;font-weight:500;cursor:pointer;position:relative}
.sb-item:hover{background:var(--surface-2)}
.sb-item.active{background:var(--ink);color:#fff}
.sb-item.active .sb-item-count{color:rgba(255,255,255,0.6)}
.sb-item-count{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:500}
.sb-item-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px var(--bg)}
/* A.50 — Sidebar tree : flèche dépliable + projets enfants en retrait */
.sb-item-toggle{
  width:16px;height:16px;display:grid;place-items:center;flex-shrink:0;
  background:transparent;border:none;color:var(--ink-3);cursor:pointer;
  padding:0;border-radius:4px;
}
.sb-item-toggle:hover{background:var(--surface-2);color:var(--ink-2)}
.sb-item.active .sb-item-toggle{color:rgba(255,255,255,0.55)}
.sb-item.active .sb-item-toggle:hover{background:rgba(255,255,255,0.1);color:#fff}
.sb-item-toggle-empty{visibility:hidden}
.sb-item-child{
  padding-left:34px;  /* indent + alignement avec le dot du parent */
  height:34px;font-size:13.5px;
}
.sb-item-child .sb-item-dot{width:6px;height:6px}
.sb-item-add{color:var(--ink-3);font-weight:500}
.sb-item-add:hover{color:var(--ink)}
/* A.50 — Vue d'ensemble (Home) */
/* A.56 — Hero Home : padding bottom plus généreux pour aérer avec la 1ère
   section, maintenant qu'on a retiré la grille de dossiers. */
.home-hero{padding:8px 4px 24px}
.home-cta-wrap{display:flex;gap:8px}
.home-msg-row{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--hairline-soft,rgba(0,0,0,.04));
  cursor:pointer;
}
.home-msg-row:last-child{border-bottom:none}
.home-msg-row:hover .home-msg-body{color:var(--ink)}
.home-msg-line{font-size:12px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.home-msg-name{font-weight:600;color:var(--ink-2)}
.home-msg-proj{display:inline-flex;align-items:center;gap:4px}
.home-msg-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.home-msg-body{font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.home-msg-time{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:500}
/* A.56 — Tag mention pour les messages où je suis @-mentionné */
.home-msg-tag{display:inline-block;padding:1px 6px;background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:700;border-radius:4px;letter-spacing:0.02em}
.home-msg-mention{background:linear-gradient(90deg,var(--accent-soft) 0%,transparent 60%);border-radius:8px;margin:0 -8px;padding-left:12px;padding-right:12px}
/* Picker dossier (mNewProjectPick) */
.pick-row{
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 14px;
  background:transparent;border:1px solid var(--hairline);border-radius:14px;
  cursor:pointer;font:inherit;text-align:left;margin-bottom:6px;
  transition:border-color 140ms ease,background 140ms ease;
}
.pick-row:hover{border-color:var(--hairline-strong);background:var(--surface)}
.pick-row-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.pick-row-name{flex:1;font-size:14.5px;font-weight:600;color:var(--ink)}
.pick-row-meta{font-size:12px;color:var(--ink-3);font-weight:500}
/* A.51 — Picker filtre canal dans la discussion du dossier */
.disc-filter-row{
  display:flex;gap:6px;padding:0 4px 14px;overflow-x:auto;scrollbar-width:none;
}
.disc-filter-row::-webkit-scrollbar{display:none}
.disc-chip{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:7px 12px;border-radius:999px;border:1px solid var(--hairline);
  background:var(--bg);color:var(--ink-2);font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;transition:all 140ms ease;
}
.disc-chip:hover{border-color:var(--hairline-strong);color:var(--ink)}
.disc-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.disc-chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* Chip canal sur message (quand vue depuis le fil racine) */
.msg-chan{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;background:var(--surface);border:1px solid var(--hairline);padding:3px 8px;border-radius:999px;color:var(--ink-2);cursor:pointer}
.msg-chan .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.msg-chan:hover{border-color:var(--fc,var(--accent));color:var(--fc,var(--accent))}
/* A.43 — Pastille accent pour les tâches assignées à moi (Inbox).
   Petite, vibrante, à côté du compteur total. Invisible si = 0. */
.sb-item-badge{
  display:inline-grid;place-items:center;
  background:var(--accent);color:#fff;
  font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  margin-left:auto;line-height:1;letter-spacing:-.02em;
}
.sb-item-badge + .sb-item-count{margin-left:6px}
.sb-item.active .sb-item-badge{background:#fff;color:var(--ink)}
.sb-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid var(--hairline)}
.sb-foot-name{font-size:14px;font-weight:600}
.sb-foot-sub{font-size:12px;color:var(--ink-3);font-weight:500}
.main{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:18px 36px;min-height:62px;flex-wrap:wrap}
.top-crumb{color:var(--ink-3);font-size:14px;font-weight:500}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;background:var(--surface);border:none;border-radius:var(--r-pill);font-size:13.5px;color:var(--ink);font-weight:600;cursor:pointer;letter-spacing:-0.01em;white-space:nowrap}
.btn:hover{background:var(--surface-3)}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#1A1A1A}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--surface)}
.btn-icon-only{width:38px;padding:0;justify-content:center}
.main-scroll{overflow-y:auto;padding:6px 36px 48px;flex:1;position:relative;scroll-behavior:smooth}
.has-dock .main-scroll{padding-bottom:170px}
.wrap{max-width:880px;margin-left:auto;margin-right:auto}
.colwrap{max-width:none;margin:0}
.h1{font-weight:700;font-size:36px;letter-spacing:-0.03em;line-height:1.05;margin:0}
.h1-sm{font-weight:700;font-size:26px;letter-spacing:-0.025em;line-height:1.12;margin:0}
.subtle{color:var(--ink-3);font-size:14.5px;font-weight:500}
.eyebrow{font-size:12.5px;color:var(--ink-3);font-weight:600}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{height:34px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;background:var(--surface);border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;border:none}
.pill:hover{background:var(--surface-3)}
.pill.active{background:var(--ink);color:#fff}
.pill-count{color:var(--ink-3);font-size:12px;font-weight:500}
.pill.active .pill-count{color:rgba(255,255,255,0.6)}
.card{background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-lg)}
.dark .card{background:var(--surface-2)}
.card-white{background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-lg)}
.section-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 10px;font-weight:700;font-size:16px;letter-spacing:-0.02em}
.section-h .count{font-weight:500;font-size:13.5px;color:var(--ink-3);margin-left:8px}
.task-card{padding:4px 18px;margin-bottom:18px}
/* A.41 — Mini-bouton « Voir les X tâches terminées » discret + bloc des
   terminées en opacité réduite juste sous les en cours. */
.done-toggle{
  display:inline-flex;align-items:center;gap:6px;margin:-4px 0 14px;padding:6px 10px;
  border:none;background:transparent;color:var(--ink-3);font:inherit;font-size:12.5px;
  font-weight:500;cursor:pointer;border-radius:8px;transition:background-color .14s ease,color .14s ease;
}
.done-toggle:hover{background:var(--surface-2);color:var(--ink-2)}
.done-toggle svg{transition:transform .2s ease}
.done-toggle:hover svg{transform:translateY(1px)}
.task-card-done{opacity:.55;transition:opacity .2s ease}
.task-card-done:hover{opacity:.9}
.task-card-done .task{cursor:pointer}
/* A.43 — Quand le bloc vient d'être déplié, ses .task arrivent en cascade
   (comme un revealing list). Une seule fois au mount, classe consommée. */
.task-card-done.cascade-in .task{
  opacity:0;animation:prItemIn .42s cubic-bezier(.22,.78,.36,1) forwards;
}
.task-card-done.cascade-in .task:nth-child(1){animation-delay:0ms}
.task-card-done.cascade-in .task:nth-child(2){animation-delay:50ms}
.task-card-done.cascade-in .task:nth-child(3){animation-delay:100ms}
.task-card-done.cascade-in .task:nth-child(4){animation-delay:150ms}
.task-card-done.cascade-in .task:nth-child(5){animation-delay:200ms}
.task-card-done.cascade-in .task:nth-child(6){animation-delay:250ms}
.task-card-done.cascade-in .task:nth-child(7){animation-delay:300ms}
.task-card-done.cascade-in .task:nth-child(8){animation-delay:350ms}
.task{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--hairline);cursor:pointer;min-height:54px}
.task-card .task:last-child{border-bottom:none}
.task-title{font-size:14.5px;font-weight:500;letter-spacing:-0.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.chip-msg{background:var(--accent-soft);color:var(--accent)}
.task-meta{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:13px;font-weight:500;flex-shrink:0}
.task-done .task-title{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4)}
.task .col-title{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.task .col-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.task-sub{font-size:12.5px;color:var(--ink-3);font-weight:500}
.cb{width:22px;height:22px;border-radius:50%;border:1.8px solid var(--ink-4);flex-shrink:0;display:grid;place-items:center;cursor:pointer;background:transparent;transition:all 120ms}
.cb.client{border-color:var(--accent)}
.cb.checked{background:var(--ink);border-color:var(--ink)}
/* A.56 — Checkbox désactivée pour les non-propriétaires non-assignés */
.cb.cb-disabled{opacity:.35;cursor:not-allowed}
.cb.cb-disabled:hover{opacity:.45}
.cb.checked.client{background:var(--accent);border-color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;background:var(--surface);color:var(--ink-2);letter-spacing:-0.01em}
.chip-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip-accent{background:var(--accent-soft);color:var(--accent)}
.chip-doing{background:var(--doing-soft);color:var(--doing)}
.chip-done{background:var(--done-soft);color:var(--done)}
.chip-danger{background:var(--danger-soft);color:var(--danger)}
/* A.45 — Tâche privée : chip discret avec cadenas (juste icône dans la liste,
   icône + label dans la sidebar de détail). */
.chip-private{background:var(--surface);color:var(--ink-3);padding:0 6px;height:20px;font-size:11px}
.chip-private svg{opacity:.85}
.chip-toggle{cursor:pointer;border:none;font:inherit}
.chip-toggle:hover{background:var(--surface-2)}
/* A.48 — Le toggle "Mes / Toutes" réutilise désormais .tabs-seg.has-hl
   (pastille glissante .seg-hl) pour le même look que les onglets
   Overview/Tâches/Discussion. Seuls quelques styles complémentaires : */
.scope-seg{margin-bottom:14px}
.scope-seg .seg-n{
  margin-left:6px;background:var(--surface-2);color:var(--ink-3);
  padding:1px 7px;border-radius:8px;font-size:11px;font-weight:700;
  min-width:18px;text-align:center;display:inline-block;
}
.scope-seg .tab-seg.active .seg-n{background:var(--accent-soft);color:var(--accent)}
/* Toggle-row : bouton-ligne réutilisable dans les modals .field — chip à
   gauche (icône + texte), pastille on/off à droite (style iOS). */
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:12px 14px;border:1px solid var(--hairline);
  border-radius:var(--r-md);background:var(--bg);cursor:pointer;font:inherit;
  text-align:left;transition:border-color 140ms ease,background 140ms ease;
}
.toggle-row:hover{border-color:var(--hairline-strong)}
.toggle-row-l{display:flex;align-items:flex-start;gap:11px;flex:1;min-width:0}
.toggle-row-t{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.toggle-row-s{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.toggle-pill{
  width:42px;height:26px;border-radius:999px;background:var(--surface-2);
  position:relative;flex-shrink:0;transition:background 180ms ease;
}
.toggle-pill.on{background:var(--accent)}
.toggle-knob{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform 180ms cubic-bezier(.22,.78,.36,1);
}
.toggle-pill.on .toggle-knob{transform:translateX(16px)}
/* A.49 — Sous-dossiers : ligne horizontale scrollable de tiles cliquables
   affichée en haut de la vue projet, sur tous les onglets. */
.subp-row{margin:0 0 16px;padding:0}
.subp-h{
  display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--ink-3);letter-spacing:-0.005em;margin:0 4px 8px;
}
.subp-h .subp-count{
  background:var(--surface);color:var(--ink-3);padding:1px 7px;
  border-radius:999px;font-size:11px;font-weight:700;
}
.subp-list{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:2px 0 4px;
}
.subp-list::-webkit-scrollbar{display:none}
.subp-tile{
  flex-shrink:0;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 12px;
  background:var(--bg);border:1px solid var(--hairline);border-radius:14px;
  cursor:pointer;font:inherit;transition:border-color 140ms ease,background 140ms ease;
  max-width:220px;
}
.subp-tile:hover{border-color:var(--hairline-strong);background:var(--surface)}
.subp-dot{
  width:8px;height:8px;border-radius:999px;flex-shrink:0;
}
.subp-meta{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.subp-name{
  font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.subp-sub{font-size:11px;color:var(--ink-3);font-weight:500}
.subp-add{
  border-style:dashed;background:transparent;color:var(--ink-3);
}
.subp-add span{font-size:12.5px;font-weight:600}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;background:var(--ink);border:2px solid var(--bg)}
.av-sm{width:22px;height:22px;font-size:10px;border-width:1.5px}
.av-lg{width:34px;height:34px;font-size:13px}
.av-client{background:var(--accent)}
.av-team{background:#6E6E73}
.av-stack{display:inline-flex}
.av-stack .av:not(:first-child){margin-left:-8px}
/* A15.6 — Stack des présents en live dans le header du dossier */
.proj-head{display:flex;align-items:center;gap:14px}
/* A.44 — Header dossier sticky : nom + onglets restent collés en haut quand
   on scroll dans les tâches/discussion. Le contenu (tabpane) passe dessous. */
.proj-header-sticky{
  position:sticky;top:0;z-index:30;
  background:var(--bg);
  padding:8px 0 12px;
  margin:0 0 6px;
  /* Légère ombre/border quand on scroll en dessous, sinon transparent */
  border-bottom:1px solid transparent;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.proj-header-sticky.scrolled{
  border-bottom-color:var(--hairline);
  box-shadow:0 1px 0 0 var(--hairline);
}
.proj-htx{flex:1 1 auto;min-width:0}
.presence-stack{display:inline-flex;align-items:center;gap:0;flex:0 0 auto}
.presence-stack .presence-av{margin-left:-8px;position:relative;box-shadow:0 0 0 2px var(--bg)}
.presence-stack .presence-av:first-child{margin-left:0}
.presence-stack .presence-me{outline:2px solid var(--accent);outline-offset:1px}
.presence-more{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface);color:var(--ink-3);font-size:10px;font-weight:700;margin-left:-6px;border:2px solid var(--bg)}
.av-pulse{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:#34D399;border:1.5px solid var(--bg);box-shadow:0 0 0 0 rgba(52,211,153,.55);animation:av-pulse 2s infinite}
.av{position:relative}
@keyframes av-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
/* A15.7 — Indicateur typing dans la discussion */
.typing-indicator{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:12px;color:var(--ink-3);font-style:italic}
.typing-dots{display:inline-flex;gap:3px}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--ink-3);opacity:.5;animation:typing-bounce 1.2s infinite ease-in-out}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.30s}
@keyframes typing-bounce{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-3px);opacity:1}}
.composer{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--surface);border-radius:var(--r-pill);color:var(--ink-3);font-size:14.5px;font-weight:500;margin-bottom:18px}
.composer input{flex:1;border:none;background:transparent;font-size:14.5px;color:var(--ink);outline:none}
.composer-plus{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex-shrink:0}
.progress{height:8px;background:var(--surface);border-radius:var(--r-pill);overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,#C4B5FD,#7C3AED);border-radius:inherit;transition:width 350ms}
.stat-row{display:flex;gap:34px;flex-wrap:wrap}
.stat-k{font-weight:700;font-size:38px;letter-spacing:-0.03em;line-height:1}
.stat-k .u{color:var(--ink-3);font-size:18px;font-weight:600}
.stat-l{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:6px;letter-spacing:0.01em}
.client-banner{display:flex;align-items:center;gap:10px;margin:0 36px;margin-top:14px;padding:13px 18px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600;border-radius:var(--r-md)}
.tabs-seg{display:inline-flex;background:var(--surface);border-radius:var(--r-pill);padding:5px;gap:6px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.dark .tabs-seg{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--hairline)}
.tabs-seg::-webkit-scrollbar{display:none}
.tab-seg{padding:9px 17px;font-size:13.5px;font-weight:600;color:var(--ink-3);border-radius:var(--r-pill);cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:none;background:none;white-space:nowrap;transition:color 120ms}
.tab-seg:hover{color:var(--ink-2)}
.tab-seg.active{background:var(--bg);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,0.1),0 0 0 1px rgba(0,0,0,0.04);font-weight:700}
.tab-seg-count{color:var(--ink-3);font-weight:500}
/* A.56 — Badge "non-lu" sur l'onglet Discussion. Mode standard (rouge),
   mode mention (violet + pulse) si l'user est @mentionné. */
.tab-unread{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;margin-left:4px;background:#FF3B30;color:#fff;font-size:11px;font-weight:700;border-radius:9px;line-height:1;letter-spacing:-0.01em}
.tab-unread-mention{background:var(--accent);animation:tabUnreadPulse 1.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(124,58,237,.5)}
@keyframes tabUnreadPulse{
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,.55); transform: scale(1); }
  50%  { box-shadow: 0 0 0 6px rgba(124,58,237,0);  transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0);    transform: scale(1); }
}
/* A.56 — Dot non-lu dans la sidebar : petit cercle rouge à côté du nom du
   projet. Variante violette pulsante si l'user est @mentionné dans un
   message non lu. */
.sb-unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF3B30;margin:0 6px;flex-shrink:0}
.sb-unread-mention{background:var(--accent);animation:sbUnreadPulse 1.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(124,58,237,.5)}
@keyframes sbUnreadPulse{
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,.6); }
  50%  { box-shadow: 0 0 0 5px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}
.feed{display:flex;flex-direction:column}
.feed-item{display:grid;grid-template-columns:30px 1fr;gap:13px;padding:16px 0;position:relative}
.feed-item:not(:last-child)::after{content:'';position:absolute;left:14.5px;top:42px;bottom:-2px;width:1px;background:var(--hairline)}
.feed-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.feed-name{font-size:14px;font-weight:700}
.feed-time{font-size:12px;color:var(--ink-3);font-weight:500}
.feed-event{font-size:13.5px;color:var(--ink-3);font-weight:500}
.feed-body{font-size:14.5px;color:var(--ink);line-height:1.55;white-space:pre-wrap}
.feed-attach{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;max-width:460px}
.feed-sys-ico{width:30px;height:30px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--ink-3)}
.imgph{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(0,0,0,0.03) 10px 11px),var(--surface);border-radius:var(--r-md);display:grid;place-items:center;color:var(--ink-3);font-family:var(--font-mono);font-size:11px;text-align:center;padding:6px;white-space:pre-line}
.cred{border-radius:var(--r-md);background:var(--bg);border:1px solid var(--hairline);overflow:hidden;margin-top:12px;max-width:520px}
.cred-h{display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:12px;color:var(--ink-2);font-weight:600;border-bottom:1px solid var(--hairline)}
.cred-h .sec{margin-left:auto;color:var(--done);display:flex;align-items:center;gap:4px;font-size:11px}
.cred-row{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--hairline)}
.cred-row:last-child{border-bottom:none}
.cred-label{font-size:12px;color:var(--ink-3);font-weight:500}
.cred-value{font-family:var(--font-mono);font-size:13px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.cred-mask{letter-spacing:0.1em}
.cred-actions{display:flex;gap:6px}
.cred-btn{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:none;border-radius:var(--r-pill);height:28px;padding:0 10px;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
.cred-btn:hover{background:var(--surface-3)}
.icn-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2);cursor:pointer;background:transparent;border:none}
.icn-btn:hover{background:var(--surface-3)}
.icn-btn:active{transform:scale(0.92)}
.fab-round{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;border:none;flex-shrink:0}
.link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:500}
.empty{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink-3);padding:32px 20px}
.empty .ic{width:56px;height:56px;border-radius:50%;background:var(--surface);display:grid;place-items:center;margin-bottom:18px;color:var(--ink-3)}
.empty .t{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.empty .s{font-size:13.5px;margin-top:6px;color:var(--ink-3);max-width:320px;line-height:1.5}
.empty .mt-16{margin-top:20px}
.empty .btn{height:42px;padding:0 20px}
/* Tahoe folders */
.tfolders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:34px 14px;padding:8px 4px;justify-items:center}
.tfolder-wrap{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer;width:186px}
.tfolder-wrap:active{transform:scale(0.98)}
.tfolder{
  width:180px;
  height:150px;
  position:relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tfolder-back {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 20%;
  bottom: 5%;
  border-radius: 50%;
  filter: blur(28px);
  -webkit-filter: blur(28px);
  opacity: 0.45;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.tfolder-backplate {
  position: absolute;
  left: 0;
  right: 0;
  top: 33px;
  bottom: 0;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 0 12px 18px 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 2;
}
.dark .tfolder-backplate {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.tfolder-tab {
  position: absolute;
  top: 12px;
  left: 0;
  width: 82px;
  height: 22px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px 12px 0 0;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.tfolder-tab::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: -1.5px;
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
  z-index: 3;
}
.dark .tfolder-tab {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.dark .tfolder-tab::after {
  background: rgba(255, 255, 255, 0.03);
}
.tfolder-papers {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
}
.tfolder-paper {
  position: absolute;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tfolder-paper.p1 {
  width: 105px;
  height: 85px;
  background: rgba(255, 255, 255, 0.95);
  top: 24px;
  left: 14px;
  transform: rotate(-6deg);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.tfolder-paper.p2 {
  width: 100px;
  height: 88px;
  background: #FFFFFF;
  top: 22px;
  right: 16px;
  transform: rotate(3deg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.dark .tfolder-paper.p1 {
  background: rgba(45, 45, 50, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}
.dark .tfolder-paper.p2 {
  background: rgba(35, 35, 40, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
}
.tfolder-paper::before, .tfolder-paper::after {
  content: '';
  display: block;
  height: 3px;
  border-radius: 1.5px;
  background: rgba(0, 0, 0, 0.08);
}
.tfolder-paper::before { width: 70%; }
.tfolder-paper::after { width: 45%; }
.dark .tfolder-paper::before, .dark .tfolder-paper::after {
  background: rgba(255, 255, 255, 0.12);
}
.tfolder-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 58px;
  bottom: 0;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 10px 10px 18px 18px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 8px 32px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  z-index: 4;
  transition: background-color 0.32s ease, border-color 0.32s ease, box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark .tfolder-body {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.2);
}
.tfolder-cover-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.tfolder-cert {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,#5BE393,#34C759);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  z-index: 5;
}
.tfolder-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
}
.tfolder-share {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-2);
}
.dark .tfolder-share {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}
.tfolder-count {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.dark .tfolder-count {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

/* Tahoe Hover Animations */
.tfolder-wrap:hover .tfolder {
  transform: translateY(-8px) scale(1.03);
}
.tfolder-wrap:hover .tfolder-back {
  transform: scale(1.15);
  opacity: 0.7;
}
.tfolder-wrap:hover .tfolder-body {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 16px 40px rgba(0, 0, 0, 0.12);
}
.dark .tfolder-wrap:hover .tfolder-body {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 16px 40px rgba(0, 0, 0, 0.4);
}
.tfolder-wrap:hover .p1 {
  transform: translateY(-10px) rotate(-8deg) scale(1.03);
}
.tfolder-wrap:hover .p2 {
  transform: translateY(-12px) rotate(5deg) scale(1.03);
}
/* Discussion */
.thread{display:flex;flex-direction:column;gap:18px;padding:8px 0 4px}
/* A.36 — Fade progressif sur les vieux messages pour focuser visuellement
   sur les récents (les 5 derniers restent à 100 %). Les plus anciens
   passent à 0.45 d'opacité avec un très léger blur. Pas trop fort, juste
   un effet "ancien". Le hover sur un vieux message le ramène à plein. */
.thread .msg{opacity:.92;transition:opacity .25s ease,filter .25s ease}
.thread .msg:nth-last-child(-n+5){opacity:1;filter:none}
.thread .msg:nth-last-child(n+6){opacity:.72}
.thread .msg:nth-last-child(n+10){opacity:.55;filter:blur(.3px)}
.thread .msg:nth-last-child(n+16){opacity:.45;filter:blur(.6px)}
.thread .msg:hover{opacity:1 !important;filter:none !important}
.msg{display:flex;gap:12px;max-width:680px}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg-bubble{position:relative;background:var(--surface-2);border:1px solid var(--hairline);border-radius:18px;padding:12px 15px;min-width:0}
.msg-del{position:absolute;top:6px;right:8px;width:24px;height:24px;display:grid;place-items:center;border:none;background:transparent;color:var(--ink-3);border-radius:6px;cursor:pointer;opacity:0;transition:opacity .15s ease,color .15s ease,background .15s ease}
.msg:hover .msg-del{opacity:.6}
.msg-del:hover{opacity:1;color:var(--danger);background:var(--danger-soft)}
@media (hover:none){ .msg-del{opacity:.6} }
.dark .msg-bubble{background:var(--surface)}
.msg.me .msg-bubble{background:#FFFFFF;border:1px solid var(--hairline-strong);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.dark .msg.me .msg-bubble{background:#000000;border:1px solid var(--hairline-strong);box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.msg-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.msg-name{font-size:13px;font-weight:700}
.msg-time{font-size:11.5px;color:var(--ink-3);font-weight:500}
.msg-body{font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.msg-tasks{margin-top:12px;border-top:1px solid var(--hairline);padding-top:10px;display:flex;flex-direction:column;gap:2px}
.msg-tasks-h{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:5px}
.msg-task{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer}
.msg-task .cb{width:18px;height:18px}
.msg-task .tt{font-size:13.5px;font-weight:500}
.msg-task.done .tt{text-decoration:line-through;color:var(--ink-3)}
.msg-task .dd{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:600}
.ai-pending{margin-top:12px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:14px;padding:14px}
.ai-pending-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:3px}
.ai-pending-s{font-size:12px;color:var(--ink-2);font-weight:500;margin-bottom:10px}
.ai-line{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid rgba(124,58,237,0.16)}
.ai-line:first-of-type{border-top:none}
.ai-line .tgl{width:34px;height:21px;border-radius:999px;background:var(--accent);position:relative;flex-shrink:0;cursor:pointer;border:none}
.ai-line .tgl.off{background:var(--ink-4)}
.ai-line .tgl::after{content:'';position:absolute;top:2.5px;left:15px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left 140ms}
.ai-line .tgl.off::after{left:2.5px}
.ai-line input.ti{flex:1;border:none;background:rgba(255,255,255,0.6);border-radius:8px;padding:7px 9px;font-size:13px;font-weight:500;color:var(--ink);outline:none;min-width:0}
.dark .ai-line input.ti{background:rgba(255,255,255,0.08)}
.ai-line input.di{width:96px;border:none;background:rgba(255,255,255,0.6);border-radius:8px;padding:7px 8px;font-size:12px;color:var(--ink-2);outline:none}
.dark .ai-line input.di{background:rgba(255,255,255,0.08)}
.ai-pending-foot{display:flex;gap:8px;margin-top:12px}
.msg-composer{position:sticky;bottom:0;background:var(--bg);padding-top:12px;border-top:1px solid var(--hairline);margin-top:8px}
.msg-composer textarea{width:100%;border:1px solid var(--hairline-strong);background:var(--surface);border-radius:16px;padding:13px 15px;font-size:14.5px;color:var(--ink);outline:none;resize:none;min-height:52px}
.msg-composer textarea:focus{border-color:var(--ink)}
.cl-line{display:flex;align-items:center;gap:8px;margin-top:8px}
.cl-line .dotc{width:16px;height:16px;border-radius:50%;border:1.8px solid var(--ink-4);flex-shrink:0}
.cl-line input{flex:1;border:none;border-bottom:1px solid var(--hairline-strong);background:transparent;padding:6px 2px;font-size:13.5px;color:var(--ink);outline:none}
.cl-line .rm{background:none;border:none;color:var(--ink-3);cursor:pointer;padding:4px}
.msg-composer-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.composer-tag{font-size:12px;color:var(--ink-3);font-weight:600;display:inline-flex;align-items:center;gap:5px}
/* Docked command composer (Xcode/Liquid style) */
/* Dock (composer bas) — suit le thème clair/sombre */
.dock{position:absolute;left:36px;right:36px;bottom:16px;max-width:880px;margin:0 auto;background:var(--bg);border:1px solid var(--hairline-strong);border-radius:22px;padding:10px 12px;color:var(--ink);box-shadow:0 18px 46px -18px rgba(0,0,0,0.28);z-index:30}
.dark .dock{box-shadow:0 18px 46px -16px rgba(0,0,0,0.7)}
.dock-h{display:flex;align-items:center;gap:9px;padding:1px 3px 8px;border-bottom:1px solid var(--hairline)}
.dock-icn{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25)}
.dock-meta{min-width:0;flex:1}
.dock-title{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-sub{font-size:11px;color:var(--ink-3);font-weight:500;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-clear{height:26px;padding:0 12px;border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:12px;font-weight:600;border:none;cursor:pointer;flex-shrink:0}
.dock-clear:hover{background:var(--surface-3)}
.dock-btn{height:32px;padding:0 11px;display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600;border:none;cursor:pointer;white-space:nowrap}
.dock-btn:hover{background:var(--surface-3);color:var(--ink)}
.dock-btn:active{transform:scale(0.95)}
.dock textarea{width:100%;border:none;background:transparent;color:var(--ink);font-family:var(--font);font-size:14.5px;font-weight:500;line-height:1.4;outline:none;resize:none;min-height:24px;max-height:120px;padding:9px 4px 8px}
.dock textarea::placeholder{color:var(--ink-3)}
.dock-cl{margin:2px 2px 10px}
.dock-cl-line{display:flex;align-items:center;gap:9px;padding:6px 0}
.dock-cl-line .dotc{width:15px;height:15px;border-radius:50%;border:1.6px solid var(--ink-4);flex-shrink:0}
.dock-cl-line input{flex:1;border:none;background:transparent;border-bottom:1px solid var(--hairline-strong);color:var(--ink);font-family:var(--font);font-size:13.5px;padding:5px 2px;outline:none}
.dock-cl-line input::placeholder{color:var(--ink-3)}
.dock-cl-line .rm{background:none;border:none;color:var(--ink-3);cursor:pointer;padding:4px}
.dock-row{display:flex;align-items:center;gap:7px;padding:4px 2px 1px;flex-wrap:wrap}
.dock-tag{font-size:11.5px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:5px;padding-left:4px}
.dock-tag.ai{color:var(--accent)}
.btn-back{padding-left:12px;padding-right:14px}
.btn-back svg{transition:transform .18s ease}
.btn-back:hover svg{transform:translateX(-2px)}
/* Messages système (réponses meet, notifs auto) — centrés, discrets */
.msg-sys{display:flex;justify-content:center;max-width:100%}
.msg-sys-bubble{display:inline-flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink-2);font-size:13px;font-style:italic;padding:8px 14px;border-radius:999px;max-width:90%;text-align:center}
.msg-sys-time{font-size:11px;color:var(--ink-3);font-style:normal;margin-left:6px}
.dark .msg-sys-bubble{background:var(--surface)}

/* Picker date/heure + créneau initial — page publique meet-respond */
.meet-orig{background:var(--surface-2);border:1px solid var(--hairline);border-radius:14px;padding:14px 16px;margin:0 0 18px}
.meet-orig-h{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:0.04em;margin-bottom:4px}
.meet-orig-when{font-size:15.5px;font-weight:600;color:var(--ink);text-transform:capitalize}
.meet-orig-sub{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.meet-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.meet-pick-l{display:flex;flex-direction:column;gap:6px}
.meet-pick-l>span{font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:0.04em;text-transform:uppercase}
.meet-pick-l>input{appearance:none;-webkit-appearance:none;width:100%;border:1px solid var(--hairline-strong);border-radius:14px;padding:13px 16px;font:inherit;font-size:15px;color:var(--ink);outline:none;background:var(--bg);font-family:var(--font)}
.meet-pick-l>input:focus{border-color:var(--ink)}
.dark .meet-pick-l>input{background:var(--surface-2)}
.dark .meet-pick-l>input::-webkit-calendar-picker-indicator{filter:invert(.85)}
@media (max-width:480px){ .meet-pick{grid-template-columns:1fr} }

/* Bannière d'erreurs persistante (errorReport) — A15.4 : auto-dismiss + croix */
.err-banner{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:var(--danger);color:#fff;padding:10px 14px 10px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:600;box-shadow:0 6px 24px -4px rgba(255,59,48,.4);z-index:250;max-width:92vw;text-align:center;display:inline-flex;align-items:center;gap:12px}
.err-banner-msg{flex:1 1 auto;min-width:0}
.err-banner-close{flex:0 0 auto;background:rgba(255,255,255,.18);border:none;color:#fff;width:22px;height:22px;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-weight:400;transition:background .15s ease}
.err-banner-close:hover{background:rgba(255,255,255,.32)}

/* Badge d'état réseau (offline-first) — coin bas-droite, discret */
.net-badge{position:fixed;right:14px;bottom:14px;width:10px;height:10px;border-radius:50%;background:var(--done);box-shadow:0 0 0 2px var(--bg);z-index:120;pointer-events:auto;cursor:default;transition:background .2s ease,transform .2s ease}
.net-badge.ok{background:var(--done)}
.net-badge.syncing{background:var(--doing);animation:netPulse 1.2s ease-in-out infinite}
.net-badge.off{background:var(--danger);transform:scale(1.15)}
@keyframes netPulse{0%,100%{opacity:.7}50%{opacity:1}}
@media (max-width:820px){ .net-badge{bottom:80px} }

/* Mention @meet dans une bulle de message */
.mention-meet{display:inline-flex;align-items:center;font-weight:600;color:var(--danger);background:var(--danger-soft);padding:0 6px;border-radius:6px;letter-spacing:-0.005em;font-size:0.94em}
.mention-meet svg{color:var(--ink-3)}
/* Phase 8 — @user mentions : accent doux, cohérent avec le tag #. */
.mention-user{font-weight:600;color:var(--accent);background:var(--accent-soft);padding:0 5px;border-radius:5px;letter-spacing:-0.005em;font-size:0.94em}
/* Popover autocomplete @ dans le dock composer */
.mention-pop{position:absolute;left:14px;right:14px;bottom:calc(100% + 6px);background:var(--bg);border:1px solid var(--hairline-strong);border-radius:14px;box-shadow:0 18px 46px -16px rgba(0,0,0,.32);padding:6px;z-index:60;max-height:240px;overflow:auto;animation:dockPopIn .14s ease-out}
.mention-it{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer;border-radius:9px;text-align:left}
.mention-it:hover{background:var(--surface-2)}
.mention-pop-key{font-weight:700;color:var(--accent)}
.mention-pop-name{font-weight:600;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mention-pop-em{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:500}

/* Édition inline du titre de tâche */
.task-title-edit{outline:none;border-radius:8px;padding:2px 6px;margin:-2px -6px;transition:background .15s ease,box-shadow .15s ease;cursor:text}
.task-title-edit:hover{background:var(--surface-2)}
.task-title-edit:focus{background:var(--bg);box-shadow:inset 0 0 0 1px var(--hairline-strong)}

/* Context menu (clic droit) */
.ctx-menu{position:fixed;min-width:220px;max-width:280px;background:var(--bg);border:1px solid var(--hairline-strong);border-radius:12px;box-shadow:0 16px 40px -12px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.06);padding:6px;z-index:300;display:flex;flex-direction:column;gap:1px;animation:ctxIn .12s ease-out}
@keyframes ctxIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.ctx-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:none;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;border-radius:8px;cursor:pointer;text-align:left;width:100%}
.ctx-item:hover{background:var(--surface-2)}
.ctx-item.on{background:var(--surface-2);font-weight:600}
.ctx-item.danger{color:var(--danger)}
.ctx-item.danger:hover{background:var(--danger-soft)}
.ctx-sep{height:1px;background:var(--hairline);margin:4px 6px}
.ctx-h{font-size:11.5px;color:var(--ink-3);font-weight:700;letter-spacing:0.02em;text-transform:uppercase;padding:8px 10px 6px}
.ctx-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block}
.dark .ctx-menu{background:var(--surface-2);border-color:var(--hairline-strong);box-shadow:0 16px 40px -12px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4)}
.dock-send{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;border:none;cursor:pointer;flex-shrink:0;transition:background .15s ease,transform .12s ease;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dock-send:hover{background:#1A1A1A}
.dock-send:active{transform:scale(.92)}
.dock-send.disabled{opacity:.4;cursor:default}
.dark .dock-send{background:#fff;color:#000}
.dark .dock-send:hover{background:#F0F0F0}
/* #tags */
.taglink{color:var(--fc,var(--accent));font-weight:700;cursor:pointer}
.taglink:hover{text-decoration:underline}
.tagchip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:700;cursor:pointer}
.sb-tag{display:flex;align-items:center;gap:9px;height:34px;padding:0 12px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.sb-tag:hover{background:var(--surface-2)}
.sb-tag.active{background:var(--accent);color:#fff}
.sb-tag .h{color:var(--accent);font-weight:800}
.sb-tag.active .h{color:#fff}
.sb-tag .sb-item-count{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:600}
.sb-tag.active .sb-item-count{color:rgba(255,255,255,0.7)}
.tagsec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:6px}
.tag-big{font-weight:800;font-size:34px;letter-spacing:-0.03em;color:var(--accent)}
/* Secret content */
.doc{border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--surface-2);padding:16px 18px;font-size:14.5px;line-height:1.65;color:var(--ink);outline:none;min-height:90px;white-space:pre-wrap}
.dark .doc{background:var(--surface)}
.doc:focus{border-color:var(--ink-3)}
.doc:empty:before{content:attr(data-ph);color:var(--ink-3)}
.doc-tools{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.doc-tool{height:32px;padding:0 11px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600;border:none;cursor:pointer}
.doc-tool:hover{background:var(--surface-3);color:var(--ink)}
.doc-tool b{font-size:14px}
.secret{background:var(--ink);color:var(--ink);border-radius:6px;padding:0 7px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;font-family:var(--font-mono);font-size:0.92em;letter-spacing:0.06em}
.secret:before{content:"•••••• 👁";color:#fff;font-family:var(--font);letter-spacing:normal}
.secret>*{display:none}
.secret.revealed{background:var(--accent-soft);color:var(--accent);font-family:var(--font-mono);letter-spacing:normal}
.secret.revealed:before{content:none}
.secret.revealed>*{display:inline}
.secbox{margin-top:14px}
.secbox-add{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.secbox-add input{flex:1;min-width:120px;border:1px solid var(--hairline-strong);background:var(--bg);border-radius:var(--r-md);padding:9px 11px;font-size:13.5px;color:var(--ink);outline:none;font-family:var(--font)}
/* ─────────────── Auth (login, code, consentement) ─────────────── */
.auth{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 20px;background:var(--bg);animation:authIn .35s cubic-bezier(.22,.61,.36,1)}
.auth-card{width:100%;max-width:384px;display:flex;flex-direction:column}
.auth-brand{font-size:13px;font-weight:600;letter-spacing:-0.005em;color:var(--ink-3);text-align:center;margin-bottom:56px}
.auth-h{font-size:30px;font-weight:700;letter-spacing:-0.025em;line-height:1.1;color:var(--ink);text-align:center;margin:0 0 10px}
.auth-sub{font-size:14.5px;color:var(--ink-3);line-height:1.55;text-align:center;margin:0 0 28px}
.auth-sub b{color:var(--ink);font-weight:600}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-input{width:100%;height:52px;padding:0 18px;border:1px solid var(--hairline-strong);background:var(--bg);border-radius:14px;font-size:15.5px;font-weight:500;color:var(--ink);outline:none;font-family:var(--font);transition:border-color .15s ease}
.auth-input::placeholder{color:var(--ink-4)}
.auth-input:focus{border-color:var(--ink)}
.auth-cta{width:100%;height:52px;border:none;border-radius:14px;background:var(--ink);color:#fff;font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:-0.01em;cursor:pointer;transition:background .15s ease,transform .12s ease}
.auth-cta:hover{background:#1A1A1A}
.auth-cta:active{transform:scale(.99)}
.auth-cta[disabled]{opacity:.45;cursor:default;transform:none}
.auth-err{font-size:13px;color:var(--danger);font-weight:600;text-align:center;line-height:1.4}
/* A18.5 — Ring countdown OTP : remplace le bouton « Recevoir le code »
   pendant les 60 s de cooldown. Cercle SVG qui se vide linéairement,
   décompte numérique tabular au centre. */
.otp-cooldown{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0 2px}
.otp-ring-wrap{position:relative;width:96px;height:96px}
.otp-ring{width:100%;height:100%;transform:rotate(-90deg);transform-origin:center}
.otp-ring-bg{fill:none;stroke:var(--surface-3);stroke-width:5}
.otp-ring-fg{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.dark .otp-ring-fg{stroke:#fff}
.otp-ring-fg.rate-limited{stroke:var(--danger)}
.otp-ring-text{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.otp-ring-sub{font-size:12.5px;color:var(--ink-3);font-weight:500;text-align:center;line-height:1.45;max-width:230px}
.auth-link{margin-top:22px;background:none;border:none;color:var(--ink-3);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;align-self:center;padding:8px 12px;border-radius:8px;transition:color .15s ease,background .15s ease}
.auth-link:hover{color:var(--ink);background:var(--surface-2)}
.otp-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp{height:56px;width:100%;min-width:0;border:1px solid var(--hairline-strong);background:var(--bg);border-radius:14px;font-size:22px;font-weight:600;color:var(--ink);text-align:center;outline:none;font-family:var(--font);font-feature-settings:"tnum";transition:border-color .15s ease,background .15s ease}
.otp:focus{border-color:var(--ink)}
.otp:not(:placeholder-shown){background:var(--surface-2)}
.auth-check{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.55;text-align:left;padding:2px 2px 4px;cursor:pointer;user-select:none}
.auth-check input{margin-top:2px;width:18px;height:18px;accent-color:var(--ink);flex-shrink:0;cursor:pointer}
.auth-check a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink-4);text-underline-offset:2px}
.auth-check a:hover{text-decoration-color:var(--ink)}
@keyframes authIn{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .auth{animation:none} }
.dark .auth-input,.dark .otp{background:var(--surface-2)}
.dark .auth-input:focus,.dark .otp:focus{border-color:#fff}
.dark .auth-cta{background:#fff;color:#000}
.dark .auth-cta:hover{background:#F0F0F0}
.dark .auth-link:hover{background:var(--surface-3)}
.radio-card{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--hairline-strong);border-radius:var(--r-md);cursor:pointer;margin-top:10px}
.radio-card.sel{border-color:var(--accent);background:var(--accent-soft)}
.radio-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-4);flex-shrink:0;margin-top:1px}
.radio-card.sel .radio-dot{border-color:var(--accent);background:radial-gradient(circle at center,var(--accent) 0 5px,transparent 6px)}
.radio-card .rt{font-size:14px;font-weight:700}
.radio-card .rs{font-size:12.5px;color:var(--ink-3);margin-top:2px}
/* A.47 — Stack de radio-cards pour le picker privacy mode du dossier.
   Les radio inputs natifs sont cachés ; la sélection visuelle vient de
   la classe .sel posée par JS au render. */
.radio-stack{display:flex;flex-direction:column;gap:4px}
.radio-stack input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.radio-stack .radio-card{margin-top:0}
/* Suivi visuel de la sélection sans re-render (l'input pose :checked) */
.radio-stack .radio-card:has(input[type="radio"]:checked){
  border-color:var(--accent);background:var(--accent-soft);
}
/* Modal / sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,0.28);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;z-index:80;padding:20px}
.dark .scrim{background:rgba(0,0,0,0.6)}
.modal{width:560px;max-width:100%;background:var(--bg);border-radius:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,0.4),0 0 0 1px var(--hairline);overflow:hidden;max-height:90vh;display:flex;flex-direction:column}
.modal-h{padding:18px 22px 0;display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:14px 22px 18px;overflow-y:auto}
.modal-input{width:100%;border:none;background:transparent;font-size:21px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);outline:none;padding:6px 0}
.modal-input::placeholder{color:var(--ink-3)}
.modal-desc{width:100%;border:none;background:transparent;font-size:14px;color:var(--ink-2);padding:4px 0;outline:none;resize:none;min-height:38px}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 22px;background:var(--surface);border-top:1px solid var(--hairline)}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:-0.005em}
.field input{border:1px solid var(--hairline-strong);background:var(--bg);border-radius:var(--r-md);padding:11px 13px;font-size:14.5px;color:var(--ink);outline:none}
.field input:focus{border-color:var(--ink)}
.meta-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:var(--surface);border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;border:1px dashed transparent}
.meta-chip.filled-accent{background:var(--accent-soft);color:var(--accent)}
.meta-chip input{border:none;background:none;font:inherit;color:inherit;outline:none;width:130px}
.swatches{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.swatch{width:32px;height:32px;border-radius:9px;cursor:pointer;border:2px solid transparent}
.swatch.sel{border-color:var(--ink)}
/* Partage — liste des membres */
.m-list{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.m-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--hairline)}
.m-row:last-child{border-bottom:none}
.m-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--ink-3);flex-shrink:0;letter-spacing:-0.01em}
.m-av-me{background:var(--ink)}
.m-meta{flex:1;min-width:0}
.m-em{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-st{font-size:12px;color:var(--ink-3);margin-top:2px;display:flex;align-items:center;gap:6px}
.m-pill{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:-0.005em}
.m-pill.m-active{background:var(--done-soft);color:var(--done)}
.m-pill.m-invited{background:var(--surface-3);color:var(--ink-2)}
.m-add{display:flex;gap:8px;margin-top:6px}
.m-add input{flex:1;border:1px solid var(--hairline-strong);background:var(--bg);border-radius:var(--r-md);padding:11px 13px;font-size:14px;color:var(--ink);outline:none;font-family:var(--font)}
.m-add input:focus{border-color:var(--ink)}
.m-add .btn{flex-shrink:0}
.dark .m-av{background:var(--surface-3);color:var(--ink)}
.dark .m-av-me{background:#fff;color:#000}

.toggle{position:relative;width:46px;height:28px;border-radius:999px;background:var(--ink-4);cursor:pointer;flex-shrink:0;transition:background 150ms;border:none}
.toggle.on{background:var(--accent)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left 150ms}
.toggle.on::after{left:21px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;background:var(--surface);border-radius:var(--r-md);margin-top:10px;font-size:15px;font-weight:600}
.set-row .s{font-size:12.5px;color:var(--ink-3);font-weight:500;margin-top:3px}
.bug-fab{position:absolute;right:28px;bottom:24px;width:330px;max-width:calc(100vw - 40px);background:var(--bg);border-radius:var(--r-lg);box-shadow:0 24px 60px -16px rgba(0,0,0,0.28),0 0 0 1px var(--hairline);overflow:hidden;z-index:60}
.bug-fab-h{display:flex;align-items:center;gap:12px;padding:15px 17px;cursor:pointer}
.bug-fab-ico{width:38px;height:38px;border-radius:50%;background:var(--danger-soft);color:var(--danger);display:grid;place-items:center;flex-shrink:0}
.bug-fab-body{padding:0 17px 16px;display:none}
.bug-fab.open .bug-fab-body{display:block}
.bug-fab-body textarea{width:100%;border:1px solid var(--hairline-strong);border-radius:var(--r-md);background:var(--surface);padding:10px 12px;font-size:13.5px;color:var(--ink);outline:none;resize:none;min-height:58px}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;box-shadow:0 12px 32px -8px rgba(0,0,0,0.3);z-index:200;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90vw;text-align:center;line-height:1.4}
.toast.show{opacity:1}
.toast.toast-err{background:var(--danger);color:#fff;box-shadow:0 12px 32px -8px rgba(255,59,48,.4)}
.toast.toast-ok{background:var(--done);color:#fff;box-shadow:0 12px 32px -8px rgba(52,199,89,.35)}
.dark .toast{background:#fff;color:#000}
.dark .toast.toast-err{background:var(--danger);color:#fff}
.dark .toast.toast-ok{background:var(--done);color:#fff}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.wrapf{flex-wrap:wrap}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-32{gap:32px}
.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}.mt-18{margin-top:18px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.muted{color:var(--ink-3)}.mono{font-family:var(--font-mono)}.bold{font-weight:700}.semibold{font-weight:600}
/* Mobile chrome */
.mtop{display:none;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--hairline);min-height:56px}
.mtop .ttl{font-size:17px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar{display:none}
.dark{--bg:#000000;--surface:#1C1C1E;--surface-2:#141414;--surface-3:#2C2C2E;--hairline:rgba(255,255,255,0.08);--hairline-strong:rgba(255,255,255,0.14);--ink:#FFFFFF;--ink-2:#EBEBF5;--ink-3:#98989F;--ink-4:#48484A;--accent:#BF9BFF;--accent-soft:rgba(191,155,255,0.16);--doing:#FF9F0A;--doing-soft:rgba(255,159,10,0.18);--done:#30D158;--done-soft:rgba(48,209,88,0.18);--danger:#FF453A;--danger-soft:rgba(255,69,58,0.18)}
.dark body,.dark .app,.dark .sb,.dark .main{background:var(--bg)}
.dark .btn-primary{background:#fff;color:#000}
.dark .btn-primary:hover{background:#eee}
.dark .pill.active,.dark .sb-item.active{background:#fff;color:#000}
.dark .pill.active .pill-count,.dark .sb-item.active .sb-item-count{color:rgba(0,0,0,0.55)}
.dark .composer-plus,.dark .fab-round{background:#fff;color:#000}
.dark .tab-seg.active{background:#fff;color:#000;box-shadow:0 1px 6px rgba(0,0,0,0.5)}
.dark .tab-seg.active .tab-seg-count{color:rgba(0,0,0,0.5)}
.dark .progress-bar{background:linear-gradient(90deg,#6B4ED1,#BF9BFF)}
.dark .av{border-color:var(--bg)}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sb{display:none}
  .mtop{display:flex}
  .top{display:none}
  .main-scroll{padding:14px 16px 96px}
  .has-dock .main-scroll{padding-bottom:230px}
  .dock{left:16px;right:16px}
  .client-banner{margin:12px 16px 0}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:10px;height:60px;background:rgba(255,255,255,0.93);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:var(--r-pill);box-shadow:0 10px 32px -8px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.05);z-index:70}
  .dark .tabbar{background:rgba(28,28,30,0.94);box-shadow:0 10px 32px -8px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.06)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:var(--ink-3);font-size:10px;font-weight:600;cursor:pointer}
  .tabbar button.active{color:var(--ink)}
  .h1{font-size:30px}
  .modal{width:100%;border-radius:24px 24px 0 0;position:fixed;bottom:0;left:0;max-height:88vh}
  .scrim{align-items:flex-end;padding:0}
  .bug-fab{right:12px;left:12px;width:auto;bottom:80px}
  .msg{max-width:100%}
  .stat-row{gap:24px}
  .stat-k{font-size:32px}
  .feed-attach{grid-template-columns:repeat(2,1fr)}
  .dock{left:12px;right:12px;bottom:84px}
}

/* ───────── Transitions & polish (clair↔sombre fluide, vues animées) ───────── */
body,.app,.sb,.main,.top,.mtop,.card,.card-white,.task-card,.dock,.modal,
.tabbar,.tabs-seg,.tab-seg,.btn,.pill,.chip,.set-row,.sb-tag,.msg-bubble,
.cred,.composer,.toast,.progress,.progress-bar,.tfolder-body,.tfolder-tab,
.bug-fab,input,textarea,.toggle{
  transition:background-color .32s ease, color .22s ease, border-color .32s ease,
             box-shadow .32s ease;
}
svg{transition:stroke .22s ease, fill .22s ease}

/* A.40 — Anim de vue : pas d'anim globale sur .main (on évite le bug visuel
   du "tout qui bouge en même temps"). À la place, chaque enfant (task,
   dossier, message) apparaît un par un en cascade fluide (stagger). Le
   .main lui-même est posé immédiatement. */

@keyframes prItemIn{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}
  to  {opacity:1;transform:none}
}

/* Items dans une vue qui vient de changer : opacity 0 initial puis cascade.
   On ne cible PAS .card.task-card (qui contient les .task) — sinon double
   anim card + tâches qui se cumulent visuellement et brouillent l'effet.
   On inclut .proj-head et .tabs-seg pour que le HEADER d'un dossier anime
   aussi (sinon l'utilisateur a l'impression que la vue dossier ne bouge
   pas, juste les tâches en dessous). */
.main.view-in .task,
.main.view-in .tfolder-wrap,
.main.view-in .msg,
.main.view-in .feed-item,
.main.view-in .proj-head,
.main.view-in .tabs-seg,
.main.view-in .section-h{
  opacity:0;
  animation:prItemIn .45s cubic-bezier(.22,.78,.36,1) forwards;
  will-change:opacity,transform;
}
/* Header du dossier en premier, puis tabs, puis section-h, puis les tasks
   en cascade. Évite que .proj-head reste static pendant que .task animent. */
.main.view-in .proj-head{animation-delay:0ms}
.main.view-in .tabs-seg{animation-delay:60ms}
.main.view-in .section-h{animation-delay:120ms}
/* Stagger : chaque enfant 55 ms après le précédent. Au-delà de 10, on
   skip le délai (apparition simultanée) pour ne pas paraître lent. */
.main.view-in .task:nth-child(1),.main.view-in .tfolder-wrap:nth-child(1),
.main.view-in .msg:nth-child(1),.main.view-in .feed-item:nth-child(1){animation-delay:0ms}
.main.view-in .task:nth-child(2),.main.view-in .tfolder-wrap:nth-child(2),
.main.view-in .msg:nth-child(2),.main.view-in .feed-item:nth-child(2){animation-delay:55ms}
.main.view-in .task:nth-child(3),.main.view-in .tfolder-wrap:nth-child(3),
.main.view-in .msg:nth-child(3),.main.view-in .feed-item:nth-child(3){animation-delay:110ms}
.main.view-in .task:nth-child(4),.main.view-in .tfolder-wrap:nth-child(4),
.main.view-in .msg:nth-child(4),.main.view-in .feed-item:nth-child(4){animation-delay:165ms}
.main.view-in .task:nth-child(5),.main.view-in .tfolder-wrap:nth-child(5),
.main.view-in .msg:nth-child(5),.main.view-in .feed-item:nth-child(5){animation-delay:220ms}
.main.view-in .task:nth-child(6),.main.view-in .tfolder-wrap:nth-child(6),
.main.view-in .msg:nth-child(6),.main.view-in .feed-item:nth-child(6){animation-delay:275ms}
.main.view-in .task:nth-child(7),.main.view-in .tfolder-wrap:nth-child(7),
.main.view-in .msg:nth-child(7),.main.view-in .feed-item:nth-child(7){animation-delay:330ms}
.main.view-in .task:nth-child(8),.main.view-in .tfolder-wrap:nth-child(8),
.main.view-in .msg:nth-child(8),.main.view-in .feed-item:nth-child(8){animation-delay:385ms}

/* A.42 — prSoftFade supprimé : .proj-head, .tabs-seg, .section-h sont
   maintenant inclus dans le cascade prItemIn avec leur propre délai.
   Plus de double anim qui se cumulait visuellement. */

@media (prefers-reduced-motion: reduce){
  .main.view-in *,.main.view-in{animation:none!important}
  *{transition:none!important}
}

/* A.40 — Dock : slide-up depuis le bas de l'écran au premier mount d'une
   vue. Effet "le dock sort de l'écran". On déclenche via classe .dock-in
   posée par le JS uniquement au changement de vue (sigChanged), pas à
   chaque render normal (sinon ça animerait à chaque clic = ennuyeux). */
@keyframes prDockUp{
  from{opacity:0;transform:translate3d(0,calc(100% + 32px),0)}
  to  {opacity:1;transform:none}
}
.dock.dock-in{animation:prDockUp .5s cubic-bezier(.22,.85,.3,1.05) both;will-change:opacity,transform}

/* Hover/click micro-feedback (instantané, donne le sentiment de répondre). */
.task,.tfolder-wrap,.feed-item{transition:background-color .14s ease,
  transform .14s ease, box-shadow .14s ease}
.tfolder-wrap{cursor:pointer}
.tfolder-wrap:hover{transform:translateY(-1px)}
.tfolder-wrap:active{transform:translateY(0);transition-duration:.05s}

/* tap feedback fluide */
.task,.sb-item,.tab-seg,.pill,.set-row,.tfolder-wrap{transition:background-color .2s ease,transform .12s ease}
.task:active,.sb-item:active,.tfolder-wrap:active,.tab-seg:active,.pill:active,.set-row:active{transform:scale(.985)}

/* ───────── Sidebar : normale ↔ repliée (hamburger + overlay) ───────── */
.sb{overflow-x:hidden}
.sb,.sb *{white-space:nowrap}
.sb-collapse{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;
  border:none;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:8px;flex-shrink:0}
.sb-collapse:hover{background:var(--surface-2);color:var(--ink)}

/* Replié : pas de sidebar, juste le hamburger ; survol → overlay flottant */
.app.collapsed{grid-template-columns:1fr}
.sbwrap{position:fixed;left:0;top:0;bottom:0;z-index:80;display:flex;align-items:flex-start}
.ham{position:fixed;left:14px;top:14px;width:42px;height:42px;display:grid;place-items:center;
  border:none;border-radius:13px;background:var(--bg);color:var(--ink);cursor:pointer;
  box-shadow:0 6px 20px -8px rgba(0,0,0,0.25),0 0 0 1px var(--hairline);z-index:2;
  transition:opacity .18s ease, transform .12s ease}
.ham:active{transform:scale(.94)}
.sbwrap .sb{position:fixed;left:0;top:0;bottom:0;width:264px;
  transform:translateX(-112%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.4)}
/* zone de déclenchement large à gauche pour ouvrir au survol */
.sbwrap::before{content:"";position:fixed;left:0;top:0;bottom:0;width:18px}
.sbwrap:hover .sb,.sbwrap:focus-within .sb{transform:none}
.sbwrap:hover .ham{opacity:0;pointer-events:none}
@media (hover:none){ .ham{opacity:1!important;pointer-events:auto!important} }
.app{transition:grid-template-columns .24s cubic-bezier(.22,.61,.36,1)}

/* Vue d'ensemble dossier */
.proj-dot{width:16px;height:16px;border-radius:6px;flex-shrink:0}
.ov-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}
.ov-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:16px}
.ov-card .stat-k{font-size:26px}
@media(max-width:820px){ .ov-stats{grid-template-columns:repeat(2,1fr)} }

/* Pioche couleur libre dans les modales */
.swatch{appearance:none;-webkit-appearance:none;padding:0}
.swatch-custom{position:relative;width:34px;height:34px;border-radius:9px;overflow:hidden;
  cursor:pointer;border:2px dashed var(--hairline-strong);display:inline-grid;place-items:center}
.swatch-custom input[type=color]{position:absolute;inset:-6px;width:calc(100% + 12px);
  height:calc(100% + 12px);border:none;padding:0;background:none;cursor:pointer}

/* ───────── En-tête dossier + onglets fluides ───────── */
.proj-head{display:flex;align-items:center;gap:13px;padding-top:8px}
.proj-dot{width:30px;height:30px;border-radius:9px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.proj-htx{min-width:0}
.proj-htx .h1-sm{margin:0;line-height:1.15}
.proj-htx .subtle{margin-top:2px}
.tab-seg-count:empty{display:none}
.tab-gear{padding:9px 12px;margin-left:4px;color:var(--ink-3)}
.tab-gear:hover{color:var(--ink)}
.tabpane{will-change:transform,opacity}
.tabpane.tab-in{animation:prTab .26s cubic-bezier(.22,.61,.36,1)}
/* A.48 — Variante non-tabpane (slide horizontal d'un sous-bloc, ex.
   contenu Mes/Toutes dans la tab Tâches d'un dossier). */
.scope-anim.tab-in{animation:prTab .26s cubic-bezier(.22,.61,.36,1)}
@keyframes prTab{from{opacity:0;transform:translateX(var(--tdx,22px))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .tabpane.tab-in,.scope-anim.tab-in{animation:none}
}

/* Segmented control façon iOS : la pastille blanche GLISSE */
.tabs-seg.has-hl{position:relative;margin-bottom:18px}
.tabs-seg.has-hl .tab-seg{background:transparent!important;box-shadow:none!important;position:relative;z-index:1}
.seg-hl{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;
  background:var(--bg);box-shadow:0 1px 4px rgba(0,0,0,0.10),0 0 0 1px rgba(0,0,0,0.05);
  transition:transform .30s cubic-bezier(.22,.61,.36,1),width .30s cubic-bezier(.22,.61,.36,1);
  z-index:0;pointer-events:none}
.dark .seg-hl{background:#fff}
.dark .tabs-seg.has-hl .tab-seg.active{color:#000}
@media (prefers-reduced-motion: reduce){ .seg-hl{transition:none} }

/* ───────── Dock : barre d'actions discrète ───────── */
.dock-bar{position:relative;display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:6px 2px 1px}
/* mini toggle Tâche/Discussion — discret, fluide, façon tabs en plus petit */
.dock-mode{position:relative;display:inline-flex;background:var(--surface);border-radius:999px;padding:2px;gap:0}
.dock-mode .dm{position:relative;z-index:1;height:24px;padding:0 10px;border:none;background:transparent;color:var(--ink-3);font-size:11.5px;font-weight:600;cursor:pointer;border-radius:999px;transition:color .22s}
.dock-mode .dm.on{color:var(--ink)}
.dark .dock-mode .dm.on{color:#000}
.dm-hl{position:absolute;z-index:0;top:2px;left:0;height:calc(100% - 4px);width:0;border-radius:999px;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.10);transition:transform .26s cubic-bezier(.22,.61,.36,1),width .26s cubic-bezier(.22,.61,.36,1)}
.dark .dm-hl{background:#fff}
.dock-chip{height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:12px;font-weight:600;border:1px solid transparent;cursor:pointer}
.dock-chip:hover{background:var(--surface-3)}
.dock-chip.on{background:var(--fc,var(--accent));color:#fff}
.dock-chip .dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
/* A16.1 / A18.1 — Wrapper relatif : .dock-pop est ancré sur le chip qui l'a ouvert.
   On centre le popup sur le chip (left:50% + translateX(-50%)) — sinon avec un
   chip étroit "Date" et un popup 220px de large, le popup débordait clairement
   à droite (effet "décalé"). On clamp aussi via max-width pour mobile. */
.dock-chip-wrap{position:relative;display:inline-flex;flex-shrink:0}
.dock-pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg);border:1px solid var(--hairline-strong);border-radius:14px;box-shadow:0 18px 46px -16px rgba(0,0,0,.32);padding:6px;z-index:50;min-width:220px;max-width:min(320px, 90vw);max-height:280px;overflow:auto;animation:dockPopIn .14s ease-out}
@keyframes dockPopIn{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.asg-it{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:transparent;color:var(--ink);font-size:13.5px;font-weight:500;cursor:pointer;border-radius:9px;text-align:left}
.asg-it:hover{background:var(--surface-2)}
.asg-it.on{background:var(--surface-3)}
.asg-it .av{margin:0}
.asg-it .dot{width:11px;height:11px;border-radius:4px;flex-shrink:0}
.asg-it svg{margin-left:auto}

/* ───────── Actions rapides au survol : à gauche, décale la ligne ───────── */
.task{position:relative;transition:padding-right .18s cubic-bezier(.22,.61,.36,1)}
.task-qa{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;
  opacity:0;pointer-events:none;transition:opacity .16s ease}
.task:hover{padding-right:70px}
.task:hover .task-qa{opacity:1;pointer-events:auto}
/* A16.2/A16.3 — Quand un popover est ouvert dans la ligne, on garde .task-qa
   visible même sans hover, et on conserve le padding-right pour ne pas
   provoquer un saut visuel. */
.task:has(.qa-pop){padding-right:70px;z-index:100;position:relative}
.task:has(.qa-pop) .task-qa{opacity:1;pointer-events:auto}
/* A.38 — La task-card hôte du popover monte aussi en z-index, sinon une
   AUTRE task-card rendue plus loin (ex. groupe "Terminé") passe devant et
   coupe le popup. Stacking context isolé uniquement quand utile. */
.task-card:has(.qa-pop){position:relative;z-index:100}
/* A.38 — Pas de quick-actions hover sur les tâches terminées : lecture seule,
   pas besoin de changer la date ni l'assigné. */
.task-done .task-qa{display:none}
.task.task-done:hover{padding-right:0}
/* A.38 — Supprimé : `.task-card{position:relative;z-index:0}` isolait un
   stacking context qui empêchait le popover d'une card de déborder par-dessus
   les autres cards. Maintenant on cible uniquement la card qui CONTIENT le
   popup (cf. règle ci-dessus). */
.qa-b{width:28px;height:28px;display:grid;place-items:center;border:none;background:transparent;color:var(--ink-3);border-radius:8px;cursor:pointer;flex-shrink:0;position:relative}
.qa-b:hover{background:var(--surface-3);color:var(--ink)}
.qa-b.on{background:var(--surface-3);color:var(--ink)}
@media (hover:none){ .task-qa{display:none} .task:hover{padding-right:0} }
/* A16.2/A16.3 + A18.2 — Popover quick-action ancré SOUS le bouton (et non au-dessus :
   sur les tâches du haut de liste, le popup était coupé par le top de la viewport).
   On laisse animation dockPopIn (translateY) ; pas de translateX ici puisque
   right:0 cale le popup au bord droit du bouton. */
.qa-pop{position:absolute;top:calc(100% + 6px);bottom:auto;right:0;background:var(--bg);border:1px solid var(--hairline-strong);border-radius:12px;box-shadow:0 18px 46px -16px rgba(0,0,0,.32);padding:6px;z-index:50;min-width:220px;max-width:min(320px, 90vw);max-height:300px;overflow:auto;opacity:1;pointer-events:auto;animation:qaPopIn .14s ease-out;text-align:left}
@keyframes qaPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.qa-pop .asg-it{font-weight:500}
.qa-pop .asg-it.danger{color:var(--danger)}
.qa-pop .asg-it.danger:hover{background:var(--danger-soft)}
.qa-pop-d{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:500}
.qa-date-row{padding:6px 8px;border-top:1px solid var(--hairline)}
.qa-date-input{width:100%;padding:6px 8px;border:1px solid var(--hairline-strong);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px}

/* ───────── IA : étincelle discrète au survol du message ───────── */
.msg-bubble{position:relative}
.msg-spark{position:absolute;bottom:-12px;right:16px;top:auto;width:26px;height:26px;display:grid;place-items:center;
  border:none;border-radius:50%;background:var(--bg);color:var(--ink-3);cursor:pointer;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.3),0 0 0 1px var(--hairline);
  opacity:0;transform:scale(.7);pointer-events:none;
  transition:opacity .16s ease,transform .16s cubic-bezier(.34,1.56,.64,1),color .15s}
.msg.me .msg-spark{right:auto;left:16px}
.msg:hover .msg-spark{opacity:1;transform:scale(1);pointer-events:auto}
.msg-spark:hover{color:var(--accent)}
.msg-spark.hot{color:var(--accent);opacity:.5;transform:scale(.85);pointer-events:auto}
.msg:hover .msg-spark.hot{opacity:1;transform:scale(1)}
.msg-spark.busy{opacity:1;transform:scale(1);pointer-events:none;animation:prSpin 1s linear infinite}
@keyframes prSpin{to{transform:rotate(360deg)}}
.steps-box{border:1px solid var(--hairline-strong);border-radius:var(--r-lg);padding:14px 16px}
.steps-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.steps-t{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink-2)}
.steps-ai{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:none;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:700;cursor:pointer}
.steps-ai:hover{filter:brightness(.97)}
.steps{display:flex;flex-direction:column;margin-top:10px}
.step{display:flex;align-items:center;gap:11px;padding:9px 2px;border-top:1px solid var(--hairline);cursor:pointer;font-size:14px}
.step:first-child{border-top:none}
.step .cb{width:20px;height:20px;flex-shrink:0}
.step.done .st{text-decoration:line-through;color:var(--ink-3)}
.step:hover{background:var(--surface-2);border-radius:8px}

/* Sous-tâches = MÊME design que les tâches, juste préfixées d'une flèche ↵ */
.step-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;margin-left:2px;
  border:1px solid var(--hairline-strong);border-radius:999px;background:transparent;color:var(--ink-3);
  font-size:11px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;transition:all .15s}
.step-chip:hover{background:var(--fc,var(--accent));color:#fff;border-color:transparent}
.task.subtask:hover{padding-right:0}           /* pas de gutter qa pour une sous-tâche */
.task.subtask .sub-ret{display:grid;place-items:center;width:20px;color:var(--ink-4);flex-shrink:0;margin-right:-2px}
.task.subtask .task-title{font-size:14px;color:var(--ink-2)}
.task.subtask.task-done .task-title{color:var(--ink-3)}
.task.subtask.subadd{cursor:text}
.task.subtask.subadd .cb{border:1.7px dashed var(--ink-4)}
.task.subtask.subadd input{flex:1;border:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);outline:none}
.task.subtask.subadd input::placeholder{color:var(--ink-3)}
@media (prefers-reduced-motion: reduce){ .task.subtask{animation:none} .msg-spark{transition:none} }

/* ───────── Fichiers (façon WeTransfer, expiration auto) ───────── */
.files-box{border:1px solid var(--hairline-strong);border-radius:var(--r-lg);padding:14px 16px}
.files{display:flex;flex-direction:column;gap:8px}
.file-it{display:flex;align-items:center;gap:11px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--hairline);border-radius:12px}
.file-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--surface);color:var(--ink-3);flex-shrink:0}
.file-meta{min-width:0;flex:1}
.file-nm{display:block;width:100%;max-width:100%;background:transparent;border:none;padding:0;margin:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-nm:hover{color:var(--accent);text-decoration:underline}
.file-nm:focus{outline:none;color:var(--accent)}
.file-it--tinted{background:var(--fc-soft,var(--surface-2));border-color:var(--hairline)}
.file-it--tinted .file-ic{background:var(--fc-soft,var(--surface));color:var(--fc,var(--ink-3))}

/* ── Cartes rendez-vous (@meet) ─────────────────────────────────── */
.meets{display:flex;flex-direction:column;gap:8px}
.meet-card{background:var(--mc-soft,var(--surface-2));border:1px solid var(--hairline);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.meet-h{display:flex;align-items:center;gap:8px}
.meet-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--mc-soft,var(--surface));color:var(--mc,var(--ink-3));flex-shrink:0}
.meet-title{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;flex:1}
.meet-pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:-0.005em}
.meet-pill-proposed{background:var(--surface-3);color:var(--ink-2)}
.meet-pill-confirmed{background:var(--done-soft);color:var(--done)}
.meet-pill-declined{background:var(--danger-soft);color:var(--danger)}
.meet-pill-alternative{background:var(--accent-soft);color:var(--accent)}
.meet-pill-canceled,.meet-pill-expired{background:var(--surface-3);color:var(--ink-3)}
.meet-meta{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--ink-2);line-height:1.45}
.meet-when{font-weight:600;color:var(--ink);text-transform:capitalize}
.meet-who b{color:var(--ink)}
.meet-link a{color:var(--mc,var(--accent));text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.meet-alt{margin-top:4px;font-size:12.5px;color:var(--ink-2);background:var(--surface);padding:8px 10px;border-radius:8px}
.meet-alt i{color:var(--ink-3);font-style:normal;font-weight:600;margin-right:4px}
.dark .meet-card{background:var(--surface)}
.dark .meet-alt{background:var(--surface-2)}
.file-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.file-warn{color:var(--danger);font-weight:700}
.file-x{width:26px;height:26px;display:grid;place-items:center;border:none;background:transparent;color:var(--ink-3);border-radius:50%;cursor:pointer;flex-shrink:0}
.file-x:hover{background:var(--surface-3);color:var(--ink)}
.dock-chip{position:relative;overflow:hidden}
.dock-chip input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ───────── Section "Mis en avant" (pinned_items) ───────── */
/* A.56 — Cards INVERSE du mode : fond noir + texte blanc en light, fond
   blanc + texte noir en dark. Crée un contraste visuel fort vs le reste
   de l'UI → vraie "mise en avant". L'icône de type prend la teinte du
   dossier pour rappel d'appartenance. */
.pin-list{display:flex;flex-direction:column;gap:8px}
.pin-row{
  position:relative;
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;
  background:var(--ink);    /* inverse : noir en light, blanc en dark */
  color:var(--bg);          /* texte inverse */
  border:1px solid var(--ink);
  border-radius:12px;
  cursor:pointer;
  transition:transform .1s ease, box-shadow .15s ease, opacity .12s;
}
.pin-row:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(0,0,0,.18);opacity:.96}
/* Icône de type : teinte de la couleur du dossier, rendue sur fond
   translucide blanc (sur card sombre) ou noir (sur card claire) */
.pin-kind{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.14);color:var(--kind-accent,var(--accent));border:1px solid rgba(255,255,255,.10);flex-shrink:0}
.dark .pin-kind{background:rgba(0,0,0,.10);border-color:rgba(0,0,0,.12)}
.pin-meta{flex:1;min-width:0}
.pin-title{font-size:15px;font-weight:700;color:var(--bg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-0.005em}
.pin-body{font-size:13.5px;color:var(--bg);opacity:.75;margin-top:3px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* A.56 — URL et liens : couleur inverse-bg (= ink) avec underline pour lisibilité sur fond ink */
.pin-url{font-size:13px;color:var(--bg);opacity:.85;text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;margin-top:3px;font-weight:500}
.pin-url:hover{opacity:1}
.pin-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* Boutons icon (pin/x) : couleur inverse + hover translucide */
.pin-toggle, .pin-x{width:28px;height:28px;display:grid;place-items:center;border:none;background:transparent;color:var(--bg);border-radius:50%;cursor:pointer;flex-shrink:0;opacity:0;transition:opacity .15s ease,background .12s}
.pin-row:hover .pin-toggle, .pin-row:hover .pin-x{opacity:.8}
.pin-toggle:hover, .pin-x:hover{background:rgba(255,255,255,.16);opacity:1}
.dark .pin-toggle:hover, .dark .pin-x:hover{background:rgba(0,0,0,.12)}
.pin-toggle.on{opacity:1;color:var(--bg)}
/* Date masquée par défaut, révélée au hover de la card */
.pin-time{font-size:11.5px;color:var(--bg);opacity:0;font-weight:500;flex-shrink:0;margin-right:2px;transition:opacity .15s ease}
.pin-row:hover .pin-time{opacity:.55}
/* Lien inline dans body (linkify) — sur card inverse, on garde une underline ink */
.pin-link-inline{color:var(--bg);text-decoration:underline;font-weight:600}
.pin-link-inline:hover{opacity:.85}
/* Box creds dans modal view (identifiant / mot de passe / URL) */
.creds-box{margin-bottom:12px;padding:10px 12px;background:var(--surface-2);border-radius:10px;border:1px solid var(--hairline)}
.creds-lab{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:4px}
.creds-val{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);word-break:break-all}
.creds-val code{flex:1;font-family:var(--font-mono);font-size:13.5px;background:transparent;padding:0}
.creds-mask{flex:1;font-family:var(--font-mono);font-size:14px;letter-spacing:2px;color:var(--ink-2)}
.creds-eye-btn,.creds-copy{flex-shrink:0}
/* Bouton œil dans le modal de création (creds password input) */
.creds-pwd-wrap{position:relative}
.creds-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;background:transparent;border:none;color:var(--ink-3);cursor:pointer;border-radius:6px}
.creds-eye:hover{background:var(--surface-2);color:var(--ink)}
.pin-sort{display:inline-flex;gap:4px;margin:8px 0 6px;padding:3px;background:var(--surface);border-radius:999px}
.pin-sort-b{
  padding:5px 10px;border-radius:999px;border:none;background:transparent;
  color:var(--ink-3);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
}
.pin-sort-b:hover{color:var(--ink-2)}
.pin-sort-b.on{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pin-grouph{
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  color:var(--ink-3);letter-spacing:0.05em;text-transform:uppercase;
  padding:10px 6px 4px;
}
.pin-grouph:first-child{padding-top:4px}
/* A.53 — Modal lecture pin (mPinnedView) */
.pin-view-url{
  display:block;color:var(--accent);text-decoration:none;font-size:14px;
  padding:14px 0;word-break:break-all;
}
.pin-view-url:hover{text-decoration:underline}
.pin-view-body{
  font-size:14px;color:var(--ink-2);line-height:1.55;padding:8px 0;
}
.pin-view-secret{
  display:flex;align-items:center;gap:10px;padding:14px 0;
  font-family:ui-monospace,Menlo,monospace;
}
.pin-view-secret code{
  background:var(--surface-2);padding:6px 10px;border-radius:6px;
  font-size:13.5px;color:var(--ink);
}
.pin-view-mask{
  letter-spacing:2px;color:var(--ink-3);font-size:16px;
}
/* A.54 — Bouton pin/unpin sur chaque post + divider section pinned/recents */
.pin-toggle{
  width:26px;height:26px;display:grid;place-items:center;border:none;
  background:transparent;color:var(--ink-4);border-radius:50%;cursor:pointer;
  flex-shrink:0;opacity:0;transition:opacity .12s,color .12s;
}
.pin-row:hover .pin-toggle{opacity:1}
.pin-toggle:hover{background:var(--surface-3);color:var(--ink)}
.pin-toggle.on{opacity:1;color:var(--accent)}
.pin-toggle.on svg{fill:var(--accent)}
.pin-divider{
  height:1px;background:var(--hairline);margin:8px 6px;
}
.pin-show-all{
  display:block;width:100%;padding:10px 6px;margin-top:4px;
  border:none;background:transparent;color:var(--ink-3);font:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer;border-radius:8px;
  text-align:center;
}
.pin-show-all:hover{background:var(--surface-2);color:var(--ink-2)}

/* Chip "canal" sur un message dans la discussion racine */
.msg-chan{margin-bottom:6px;font-size:11.5px;height:22px;padding:0 9px;cursor:pointer;border:1px solid var(--hairline);background:var(--surface-2)}
.msg-chan:hover{border-color:var(--fc,var(--accent));color:var(--fc,var(--accent))}
.msg-chan .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}

/* ───────── Permissions fines à l'invitation (mShare 2 toggles) ───────── */
.perm-rows{display:flex;flex-direction:column;gap:6px;margin:12px 0 10px;padding:10px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.perm-row{display:flex;align-items:center;gap:14px;padding:6px 2px;cursor:pointer}
.perm-meta{flex:1;min-width:0}
.perm-t{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.perm-d{font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.perm-row .tgl{width:34px;height:21px;border-radius:999px;background:var(--accent);position:relative;flex-shrink:0;cursor:pointer;border:none}
.perm-row .tgl.off{background:var(--ink-4)}
.perm-row .tgl::after{content:'';position:absolute;top:2.5px;left:15px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left 140ms}
.perm-row .tgl.off::after{left:2.5px}

/* ───────── A.56 — Modal Partager 2 étapes (liste + formulaire) ────────── */
.modal-share{max-width:460px}
.modal-back{margin-right:4px}

/* Étape liste : header compteur + grille de membres + bouton + */
.mb-listh{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0.02em;text-transform:uppercase;margin:0 0 10px}
.mb-list{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.mb-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;transition:background .12s ease}
.mb-row:hover{background:var(--surface-2)}
.mb-row-me{background:var(--surface-2)}
.mb-av{position:relative;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.mb-av-me{background:var(--accent)}
.mb-dot{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--bg)}
.mb-dot-on{background:#34C759}
.mb-dot-pending{background:#FFB020}
.mb-meta{flex:1;min-width:0}
.mb-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-you{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.mb-sub{font-size:12px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-role{font-weight:600;color:var(--ink-2,var(--ink-3))}
/* Select rôle inline : compact, dropdown natif stylé */
.mb-role-sel{background:var(--surface-2);border:1px solid var(--hairline);border-radius:8px;padding:5px 24px 5px 10px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;flex-shrink:0;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 8px center;background-size:9px}
.mb-role-sel:hover{background-color:var(--surface)}
.mb-role-sel:disabled{opacity:0.55;cursor:not-allowed}
.mb-role-pill{padding:5px 10px;background:var(--accent-soft);color:var(--accent);border-radius:8px;font-size:12.5px;font-weight:700;flex-shrink:0}
.mb-role-owner{background:var(--ink);color:var(--bg)}
.mb-x{background:transparent;border:none;width:28px;height:28px;border-radius:8px;color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s ease,color .12s ease;margin-left:4px}
.mb-x:hover{background:var(--surface);color:var(--danger)}

.mb-add{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;background:var(--ink);color:#fff;border:none;border-radius:12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .12s ease}
.mb-add:hover{opacity:0.9}
.mb-add-ic{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.16)}

/* Étape formulaire : compact, inputs sans labels (placeholders inside) */
.invite-form-c{display:flex;flex-direction:column;gap:10px}
.invite-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.invite-inp{width:100%;border:1px solid var(--hairline-strong);border-radius:10px;padding:11px 13px;font:inherit;font-size:14px;color:var(--ink);outline:none;background:var(--bg);transition:border-color .12s ease;box-sizing:border-box}
.invite-inp:focus{border-color:var(--accent)}
.invite-inp-full{width:100%}

.invite-section{margin-top:6px}
.invite-section-h{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:6px}

/* Chips preset (rôle) compactes */
.prs-chips{display:flex;gap:6px;flex-wrap:wrap}
.prs-chip{padding:7px 14px;background:var(--surface-2);border:1px solid transparent;border-radius:999px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .12s ease}
.prs-chip:hover{background:var(--surface)}
.prs-chip.sel{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Pills permissions icônes : éteintes (gris) → allumées (accent) */
.pp-row{display:flex;flex-wrap:wrap;gap:6px}
.pp{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--surface-2);border:1px solid transparent;border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:all .12s ease}
.pp:hover{background:var(--surface)}
.pp.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pp-lab{line-height:1}

.invite-submit{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
.invite-foot-note{font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:5px}

@media (max-width:520px){
  .invite-grid{grid-template-columns:1fr}
  .prs-chip{flex:1;text-align:center}
}

/* Email secondaire sous le nom dans la liste membres (legacy mShare) */
.m-em2{margin-top:2px}

/* Section profil dans Settings (prénom/nom user courant) */
.set-profile{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--hairline);border-radius:14px;margin-top:14px}
.set-profile-h{font-size:14px;font-weight:700;color:var(--ink)}
.set-profile-d{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:-4px}
.set-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:520px){.set-profile-grid{grid-template-columns:1fr}}

/* Landing page invitation : spinner basique */
.invite-landing-spin{width:32px;height:32px;border:3px solid var(--hairline);border-top-color:var(--accent);border-radius:50%;animation:landing-spin 0.9s linear infinite;margin:18px auto 0}
@keyframes landing-spin{to{transform:rotate(360deg)}}