/* ============================================================================
   SEMANTIC TONE MAP (WI-01) - one colour per meaning, applied across chips,
   notices, statuses and borders. Never pick a hue for looks; pick the meaning.
     indigo  (--accent) = brand, selected, tier
     violet  (--booth)  = team and group
     green   (--ok)     = ok, live
     amber   (--mine)   = attention, expiry, "sans mot de passe", non-live status
     red     (--bad)    = danger and confidentiel ONLY
   TOKEN LAYER (WI-01): type (--fs-*), spacing (--sp-*), radii (--r-xs..--r-xl),
   control heights (--h-sm/--h-md/--h-lg) live in :root and are mirrored in the
   dark and high-contrast blocks. All px font-sizes and radii below resolve to a
   token; clamp() display ramps are kept as-is.
   ============================================================================ */
/* artefact.dedale.app · "Soft-3D Editorial" design system.
/* INC12b hotfix: honour the hidden attribute so JS-toggled overlays (Cmd-K palette, etc.) start
   closed even when a class sets display; without this a display:flex rule defeats [hidden]. */
[hidden]{display:none!important}
   Ported from forge.dedale.app/product/flex-dedale. First-party only: self-hosted fonts,
   no external resource of any kind (strict CSP: default-src 'self'). Colours are stored as
   "R G B" channels and consumed as rgb(var(--x) / a) so one token drives many alpha uses. */

/* ---------- fonts (self-hosted; real system fallback so chrome holds if woff2 absent) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/_hub/assets/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/_hub/assets/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/_hub/assets/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;
  src:url("/_hub/assets/fonts/space-grotesk-600.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("/_hub/assets/fonts/space-grotesk-700.woff2") format("woff2")}

/* ---------- palette: LIGHT ---------- */
:root{
  --bg:244 242 238;            /* #F4F2EE */
  --surface:251 250 248;       /* #FBFAF8 */
  --surface-2:239 237 232;     /* #EFEDE8 */
  --border:225 222 215;        /* #E1DED7 */
  --border-strong:201 197 188; /* #C9C5BC */
  --ink:28 27 25;              /* #1C1B19 text */
  --text:var(--ink);           /* alias used by the tone chips/pills (color-mix toward the theme ink) */
  --muted:86 83 77;            /* #56534D ink-2 */
  --ink-muted:95 91 84;        /* #5F5B54 WCAG-safe secondary text */
  --faint:138 134 126;         /* #8A867E decorative/tertiary only */
  --accent:75 73 230;          /* #4B49E6 indigo brand */
  --accent-press:58 56 196;    /* #3A38C4 */
  --accent-tint:236 236 253;   /* #ECECFD */
  --accent-fg:255 255 255;
  --brand-glow:110 107 255;    /* #6E6BFF */
  --ok:47 163 107;             /* #2FA36B available */
  --mine:224 151 42;           /* #E0972A amber */
  --booked:155 150 145;        /* #9B9691 */
  --bad:194 81 81;             /* #C25151 blocked/red */
  --booth:147 92 214;          /* #935CD6 violet */

  /* elevation ramp (shadows only) */
  --e1:0 1px 2px rgba(28,27,25,.04),0 1px 1px rgba(28,27,25,.06);
  --e2:0 8px 24px rgba(28,27,25,.08),0 2px 6px rgba(28,27,25,.06);
  --e3:0 24px 64px rgba(28,27,25,.14),0 8px 20px rgba(28,27,25,.10);
  --glow:0 0 0 1px rgb(var(--accent)/.25),0 8px 40px -8px rgb(var(--accent)/.35);

  /* radii */
  --r-chip:12px; --r:20px; --r-pill:999px; --r-focus:8px;
  /* radius scale (WI-01): xs 6, sm 8 (=focus), md 12 (=chip), lg 16, xl 20 (=r), pill */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;

  /* motion */
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-snap:cubic-bezier(.34,1.56,.64,1);

  /* type */
  --ff-b:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-d:"Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-m:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* type scale (WI-01) - see mapping in the header comment */
  --fs-xs:11px; --fs-sm:12px; --fs-13:13px; --fs-md:15px; --fs-lg:17px;
  --fs-d3:18px; --fs-d2:22px; --fs-d1:clamp(24px,3.6vw,30px); --fs-kpi:28px;

  /* spacing (4px grid, WI-01) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* control heights (WI-01): sm 32, md 38 (btn/input), lg 44 (search/btn.lg) */
  --h-sm:32px; --h-md:38px; --h-lg:44px;

  color-scheme:light;
}

/* ---------- palette: DARK (explicit toggle) ---------- */
:root[data-theme="dark"]{
  --bg:22 21 26;               /* #16151A deep blue-charcoal, not black */
  --surface:32 31 38;          /* #201F26 */
  --surface-2:25 24 32;        /* #191820 */
  --border:44 43 52;           /* #2C2B34 */
  --border-strong:58 57 69;    /* #3A3945 */
  --ink:243 241 238;           /* #F3F1EE */
  --muted:180 176 174;         /* #B4B0AE */
  --ink-muted:158 154 150;     /* #9E9A96 WCAG-safe */
  --faint:124 120 115;         /* #7C7873 */
  --accent:139 137 255;        /* #8B89FF lifted */
  --accent-press:110 107 255;  /* #6E6BFF */
  --accent-tint:35 34 68;      /* #232244 */
  --accent-fg:18 17 24;        /* #121118 */
  --brand-glow:139 137 255;
  --booth:179 136 255;         /* #B388FF */
  --e1:0 1px 2px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.30);
  --e2:0 8px 24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  --e3:0 24px 64px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.45);
  /* geometric token layer mirrored (WI-01; identical to light, theme-independent) */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --fs-xs:11px; --fs-sm:12px; --fs-13:13px; --fs-md:15px; --fs-lg:17px;
  --fs-d3:18px; --fs-d2:22px; --fs-d1:clamp(24px,3.6vw,30px); --fs-kpi:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --h-sm:32px; --h-md:38px; --h-lg:44px;
  color-scheme:dark;
}
/* ---------- palette: DARK (system default, no explicit choice) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:22 21 26; --surface:32 31 38; --surface-2:25 24 32;
    --border:44 43 52; --border-strong:58 57 69;
    --ink:243 241 238; --muted:180 176 174; --ink-muted:158 154 150; --faint:124 120 115;
    --accent:139 137 255; --accent-press:110 107 255; --accent-tint:35 34 68; --accent-fg:18 17 24;
    --brand-glow:139 137 255; --booth:179 136 255;
    --e1:0 1px 2px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.30);
    --e2:0 8px 24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
    --e3:0 24px 64px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.45);
    /* geometric token layer mirrored (WI-01; identical to light, theme-independent) */
    --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
    --fs-xs:11px; --fs-sm:12px; --fs-13:13px; --fs-md:15px; --fs-lg:17px;
    --fs-d3:18px; --fs-d2:22px; --fs-d1:clamp(24px,3.6vw,30px); --fs-kpi:28px;
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
    --h-sm:32px; --h-md:38px; --h-lg:44px;
    color-scheme:dark;
  }
}

/* ---------- high-contrast ---------- */
:root[data-contrast="high"]{
  --border:var(--border-strong);
  --muted:var(--ink);
  --faint:var(--muted);
  /* geometric token layer mirrored (WI-01; identical to light, theme-independent) */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --fs-xs:11px; --fs-sm:12px; --fs-13:13px; --fs-md:15px; --fs-lg:17px;
  --fs-d3:18px; --fs-d2:22px; --fs-d1:clamp(24px,3.6vw,30px); --fs-kpi:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --h-sm:32px; --h-md:38px; --h-lg:44px;
}

/* ---------- reset & base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background:
    radial-gradient(60rem 60rem at 82% -12%, rgb(var(--accent)/.10), transparent 60%),
    radial-gradient(52rem 52rem at -12% 18%, rgb(var(--booth)/.07), transparent 60%),
    radial-gradient(40rem 40rem at 50% 120%, rgb(var(--mine)/.05), transparent 60%),
    rgb(var(--bg));
  background-attachment:fixed;
  color:rgb(var(--ink));
  font:400 var(--fs-md)/1.6 var(--ff-b);
  font-feature-settings:"cv02" 1,"cv03" 1,"cv04" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* brand signature: 3px top gradient hairline accent -> violet -> bad */
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:3px;z-index:200;
  background:linear-gradient(90deg,rgb(var(--accent)),rgb(var(--booth)),rgb(var(--bad)));
}
a{color:rgb(var(--accent));text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
::selection{background:rgb(var(--accent)/.24)}
.tnum{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid rgb(var(--border));
  background:rgb(var(--surface)/.80);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  padding:12px clamp(16px,4vw,32px);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-d);font-weight:700;
  letter-spacing:-.02em;font-size:var(--fs-lg);color:rgb(var(--ink))}
.brand a{color:inherit}
.brand a:hover{text-decoration:none}
.logo{width:26px;height:26px;flex:none;filter:drop-shadow(0 4px 10px rgb(var(--accent)/.35))}
header nav{display:flex;gap:4px;flex-wrap:wrap}
header nav a{color:rgb(var(--ink-muted));font-size:var(--fs-13,13px);font-weight:500;padding:6px 10px;border-radius:var(--r-chip)}
header nav a:hover{color:rgb(var(--ink));background:rgb(var(--surface-2));text-decoration:none}
.spacer{margin-left:auto}
.me{color:rgb(var(--ink-muted));font-size:var(--fs-13);font-weight:500;display:inline-flex;align-items:center;gap:8px}
.me .dot{width:7px;height:7px;border-radius:var(--r-pill);background:rgb(var(--ok));box-shadow:0 0 0 3px rgb(var(--ok)/.18)}
.toggles{display:inline-flex;gap:6px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border-radius:var(--r-pill);border:1px solid rgb(var(--border));background:rgb(var(--surface));
  color:rgb(var(--ink-muted));cursor:pointer;transition:border-color .18s var(--ease-out-soft),color .18s,background .18s}
.icon-btn:hover{color:rgb(var(--ink));border-color:rgb(var(--border-strong))}
.icon-btn svg{width:17px;height:17px}
.site-foot{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:var(--sp-6,24px) 0 var(--sp-4,16px);
  color:rgb(var(--ink-muted));font-size:var(--fs-13)}
.lang-switch{display:inline-flex;align-items:center;height:34px;padding:2px;border-radius:var(--r-pill);border:1px solid rgb(var(--border));background:rgb(var(--surface))}
.lang-opt{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 8px;border-radius:var(--r-pill);
  color:rgb(var(--ink-muted));font-size:var(--fs-12,12px);font-weight:600;letter-spacing:.04em;text-decoration:none;transition:color .18s,background .18s}
.lang-opt:hover{color:rgb(var(--ink));text-decoration:none}
.lang-opt.on,.lang-opt[aria-current="true"]{color:rgb(var(--ink));background:rgb(var(--surface-2));box-shadow:inset 0 0 0 1px rgb(var(--border-strong))}
.lang-opt:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px}

/* ---------- layout ---------- */
main{max-width:1180px;margin:0 auto;padding:clamp(24px,4vw,40px) clamp(16px,4vw,32px) 96px;overflow-x:clip}
h1{font-family:var(--ff-d);font-weight:700;letter-spacing:-.02em;font-size:var(--fs-d1);
  line-height:1.15;margin:0 0 6px}
h2{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--ink-muted));
  font-weight:600;margin:38px 0 14px}
h3{margin:0;font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em}
.sub{color:rgb(var(--ink-muted));margin:0 0 26px;max-width:70ch}
.lead{font-size:var(--fs-md)}
.links{margin:20px 0 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sep{color:rgb(var(--faint))}

/* ---------- cards & glass ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.card{
  background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--r);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:8px;box-shadow:var(--e1);
  transition:transform .22s var(--ease-out-soft),box-shadow .22s var(--ease-out-soft),border-color .22s;
}
a.card,.card.link{cursor:pointer}
/* Whole-card click: the title link stretches over the card; every other control is raised above it. */
.card.link{position:relative}
.card.link a.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0}
.card.link a:not(.stretch),.card.link button,.card.link summary,.card.link details,.card.link form,.card.link input,.card.link select{position:relative;z-index:1}
.card.link a.stretch:focus-visible{outline:none}
.card.link:has(a.stretch:focus-visible){outline:2px solid rgb(var(--accent));outline-offset:2px}
.grid .card:hover,a.card:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:rgb(var(--border-strong))}
.card h3 a{color:rgb(var(--ink))}
.card h3 a:hover{color:rgb(var(--accent));text-decoration:none}
.card p{margin:0;color:rgb(var(--ink-muted));font-size:var(--fs-13);flex:1}
:root[data-contrast="high"] .card,:root[data-contrast="high"] .glass{border-width:2px}
.glass{
  background:rgb(var(--surface)/.80);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgb(var(--border)/.9);border-radius:var(--r);padding:var(--sp-4) var(--sp-5);box-shadow:var(--e3);
}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* ---------- pill buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--h-md);padding:0 20px;border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--ff-b);font-size:var(--fs-md);font-weight:500;line-height:1;white-space:nowrap;
  cursor:pointer;text-decoration:none;user-select:none;
  transition:transform .16s var(--ease-out-soft),box-shadow .16s,filter .16s,background .16s,border-color .16s,color .16s}
.btn:hover{text-decoration:none}
.btn.sm{height:var(--h-sm);padding:0 14px;font-size:var(--fs-13)}
.btn.lg{height:var(--h-lg);padding:0 28px;font-size:var(--fs-md)}
.btn.primary{color:rgb(var(--accent-fg));border-color:rgb(var(--accent-press)/.6);
  background:linear-gradient(180deg,rgb(var(--brand-glow)) 0%,rgb(var(--accent)) 52%,rgb(var(--accent-press)) 100%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.28),inset 0 -2px 4px rgb(var(--accent-press)/.5),0 6px 16px -4px rgb(var(--accent)/.5)}
.btn.primary:hover{filter:brightness(1.035)}
.btn.primary:active{filter:brightness(.96);box-shadow:inset 0 2px 6px rgb(var(--accent-press)/.7)}
.btn.ghost{color:rgb(var(--ink));background:transparent}
.btn.ghost:hover{background:rgb(var(--surface-2))}
.btn.outline{color:rgb(var(--ink));border-color:rgb(var(--border-strong));background:rgb(var(--surface))}
.btn.outline:hover{border-color:rgb(var(--accent)/.6);color:rgb(var(--accent))}
.btn.danger{color:#fff;background:rgb(var(--bad));border-color:rgb(var(--bad))}
.btn.danger:hover{filter:brightness(1.05)}

/* ---------- chips / tags ---------- */
.chip,.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:500;line-height:1;letter-spacing:.01em;
  font-variant-numeric:tabular-nums lining-nums;
  background:rgb(var(--surface-2));color:rgb(var(--ink-muted));border:1px solid rgb(var(--border))}
/* Tone chips/pills: opaque tint bg + tone text mixed toward the theme ink so contrast clears WCAG AA
   in BOTH light (text darkens) and dark (text lightens) automatically, no per-tone -tx/-soft tokens. */
.chip.ok,.tag.ok{background:color-mix(in srgb,rgb(var(--ok)) 15%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--ok)) 66%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--ok)) 40%,transparent)}
/* WI-01: .chip.warn is amber attention (alias of --mine, same treatment as .chip.mine); red danger is .chip.danger (WI-02 tone plumbing). */
.chip.warn,.tag.warn{background:color-mix(in srgb,rgb(var(--mine)) 16%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--mine)) 62%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--mine)) 42%,transparent)}
.chip.accent,.tag.accent{background:color-mix(in srgb,rgb(var(--accent)) 14%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--accent)) 68%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--accent)) 40%,transparent)}
.chip.violet,.tag.violet{background:color-mix(in srgb,rgb(var(--booth)) 15%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--booth)) 66%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--booth)) 40%,transparent)}
.chip.mine,.tag.mine{background:color-mix(in srgb,rgb(var(--mine)) 16%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--mine)) 62%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--mine)) 42%,transparent)}

/* ---------- dense tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid rgb(var(--border));border-radius:var(--r);background:rgb(var(--surface));box-shadow:var(--e1)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
th,td{text-align:left;padding:var(--sp-2) 14px;border-bottom:1px solid rgb(var(--border));vertical-align:top}
thead th{color:rgb(var(--ink-muted));font-weight:600;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;
  background:rgb(var(--surface-2));position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgb(var(--accent)/.04)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums lining-nums}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:500;border:1px solid rgb(var(--border));color:rgb(var(--ink-muted));
  background:rgb(var(--surface-2))}
.pill.ok{color:color-mix(in srgb,rgb(var(--ok)) 66%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--ok)) 40%,transparent);background:color-mix(in srgb,rgb(var(--ok)) 15%,rgb(var(--surface)))}
.pill.bad{color:color-mix(in srgb,rgb(var(--bad)) 66%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--bad)) 40%,transparent);background:color-mix(in srgb,rgb(var(--bad)) 14%,rgb(var(--surface)))}
.pill.warn{color:color-mix(in srgb,rgb(var(--mine)) 70%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--mine)) 45%,transparent);background:color-mix(in srgb,rgb(var(--mine)) 16%,rgb(var(--surface)))}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}

/* ---------- code ---------- */
code{font:var(--fs-sm)/1.5 var(--ff-m);background:rgb(var(--surface-2));border:1px solid rgb(var(--border));
  padding:1px 6px;border-radius:var(--r-xs);color:rgb(var(--ink))}
pre{background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5);overflow-x:auto;font:var(--fs-sm)/1.6 var(--ff-m);box-shadow:var(--e1);color:rgb(var(--ink))}
pre code{background:none;border:0;padding:0}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:22px 0 10px}
.kpi{background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--r);
  padding:var(--sp-5) var(--sp-5);box-shadow:var(--e2);display:flex;flex-direction:column;gap:4px}
.kpi b{font-family:var(--ff-d);font-weight:700;font-size:var(--fs-d1);line-height:1;letter-spacing:-.02em;
  color:rgb(var(--ink));font-variant-numeric:tabular-nums lining-nums}
.kpi span{color:rgb(var(--ink-muted));font-size:var(--fs-sm)}

/* ---------- callouts ---------- */
.callout,.note{border:1px solid rgb(var(--border));border-radius:var(--r);padding:14px 16px;margin:16px 0;
  background:rgb(var(--surface));box-shadow:var(--e1);font-size:var(--fs-13);color:rgb(var(--muted))}
.callout{border-left:3px solid rgb(var(--accent));background:rgb(var(--accent-tint)/.5)}
.note{border-left:3px solid rgb(var(--booked))}

/* ---------- empty state ---------- */
.empty{color:rgb(var(--ink-muted));padding:48px 24px;text-align:center;border:1px dashed rgb(var(--border));
  border-radius:var(--r);background:rgb(var(--surface)/.5)}

/* ---------- hero / login aura utility ---------- */
.bg-aura{background:
  radial-gradient(60rem 60rem at 82% -12%, rgb(var(--accent)/.10), transparent 60%),
  radial-gradient(52rem 52rem at -12% 18%, rgb(var(--booth)/.07), transparent 60%),
  radial-gradient(40rem 40rem at 50% 120%, rgb(var(--mine)/.05), transparent 60%),
  rgb(var(--bg))}

/* ---------- focus ring (draw-on) ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px;border-radius:var(--r-focus);
  animation:focus-draw .12s var(--ease-out-soft)}
@keyframes focus-draw{from{outline-offset:6px}to{outline-offset:2px}}

/* ---------- skeleton shimmer ---------- */
.skeleton{position:relative;overflow:hidden;background:rgb(var(--surface-2));border-radius:var(--r-chip)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgb(var(--ink)/.06),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- entrance motion ---------- */
.fade-up{animation:fade-up .5s var(--ease-out-soft) both}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:640px){
  header{gap:12px;padding:10px 16px}
  .grid{grid-template-columns:1fr}
  h2{margin-top:30px}
  main{padding-bottom:72px}
}
@media (pointer:coarse){
  header nav a{padding:var(--sp-2) var(--sp-3)}
  .icon-btn{width:40px;height:40px}
  .btn.sm{height:36px}
}

/* ---------- reduced motion: disable ALL animation/transition ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .grid .card:hover{transform:none}
}

/* Print: drop interactive chrome, flatten to ink-on-paper, keep tag/kpi fills legible. */
@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#fff}
  .topbar,.theme-toggle,.contrast-toggle,nav,.btn{display:none!important}
  body{background:#fff;color:#111}
  main{max-width:none;padding:0}
  .card,.kpi,.chip,.tag,.pill{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:#111;text-decoration:underline}
  table{font-size:10.5pt}
}

/* ---------- discovery: catalogue search, facets, views, blind matches (Increment 2) ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.discover{margin:0 0 20px;display:flex;flex-direction:column;gap:12px}
.discover-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{flex:1 1 320px;display:flex;align-items:center;gap:10px;height:var(--h-lg);padding:0 16px;
  background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--r-pill);box-shadow:var(--e1);
  transition:border-color .18s var(--ease-out-soft),box-shadow .18s var(--ease-out-soft)}
.search:focus-within{border-color:rgb(var(--accent)/.7);box-shadow:var(--glow)}
.search svg{width:18px;height:18px;flex:none;color:rgb(var(--ink-muted))}
.search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:rgb(var(--ink));font:inherit;font-size:var(--fs-md)}
.search input:focus-visible{outline:none;animation:none}
.search input::placeholder{color:rgb(var(--faint))}
.view-toggle{display:inline-flex;padding:3px;gap:2px;margin-left:auto;background:rgb(var(--surface-2));
  border:1px solid rgb(var(--border));border-radius:var(--r-pill)}
.view-toggle a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);
  font-size:var(--fs-13);font-weight:500;color:rgb(var(--ink-muted));transition:background .16s,color .16s}
.view-toggle a:hover{color:rgb(var(--ink));text-decoration:none}
.view-toggle a.on{background:rgb(var(--surface));color:rgb(var(--ink));box-shadow:var(--e1)}
.facets{border:1px solid rgb(var(--border));border-radius:var(--r);background:rgb(var(--surface)/.7);box-shadow:var(--e1)}
.facets>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:var(--sp-3) var(--sp-5);
  font-size:var(--fs-13);font-weight:600;color:rgb(var(--ink-muted));user-select:none;border-radius:var(--r)}
.facets>summary::-webkit-details-marker{display:none}
.facets>summary::before{content:"";width:7px;height:7px;margin:0 2px 3px 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s var(--ease-out-soft)}
.facets[open]>summary::before{transform:rotate(45deg);margin-bottom:0}
.facets[open]>summary{border-bottom:1px solid rgb(var(--border));border-radius:var(--r) var(--r) 0 0}
.facet-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px 14px;padding:14px var(--sp-5) var(--sp-5)}
.facet{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--ink-muted))}
.facet select{height:var(--h-md);padding:0 34px 0 12px;border-radius:var(--r-chip);border:1px solid rgb(var(--border));
  background:rgb(var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A867E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px 16px;
  color:rgb(var(--ink));font:500 var(--fs-13)/1 var(--ff-b);text-transform:none;letter-spacing:0;appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:border-color .16s}
.facet select:hover{border-color:rgb(var(--border-strong))}
.active-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-6px 0 18px}
a.chip,a.tag{transition:border-color .16s,color .16s}
a.chip:hover,a.tag:hover{text-decoration:none;border-color:rgb(var(--accent)/.6);color:rgb(var(--accent))}
.masked{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:12px 16px;
  border:1px dashed rgb(var(--border-strong));border-radius:var(--r);background:rgb(var(--surface)/.5);
  color:rgb(var(--ink-muted));font-size:var(--fs-13)}
.masked b{color:rgb(var(--ink))}
form.inline{display:inline-flex;margin:0}
.strip{margin:0 0 6px}
h2 small{font-size:var(--fs-xs);letter-spacing:.02em;text-transform:none;font-weight:500;color:rgb(var(--faint));margin-left:6px}
.empty.compact{padding:var(--sp-6) var(--sp-5);font-size:var(--fs-13)}
.card h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card .tags,.tags-cell{display:flex;flex-wrap:wrap;gap:4px}
.card .open{margin-left:auto;font-size:var(--fs-sm);font-weight:500;white-space:nowrap;align-self:center}
.tsub{color:rgb(var(--ink-muted));font-size:var(--fs-sm);margin-top:2px;max-width:46ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
table.catalogue td{vertical-align:middle}
table.catalogue td.tnum{white-space:nowrap}
@media (max-width:640px){
  .search{flex-basis:100%}
  .view-toggle{margin-left:auto}
  .facet-row{grid-template-columns:1fr;padding:12px 14px 16px}
  .masked{flex-direction:column;align-items:flex-start}
}
@media print{.discover,.active-filters,.masked form,.card .open{display:none!important}}

/* ---------- dossier: header, facts, aggregate usage, flash (Increment 3) ---------- */
.eyebrow{font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--ink-muted));font-weight:600;margin:0 0 8px}
.eyebrow .slug{font-family:var(--ff-m);text-transform:none;letter-spacing:0;color:rgb(var(--ink))}
.dossier-head{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px}
.dossier-title{flex:1 1 480px;min-width:0}
.dossier-title .sub{margin-bottom:14px}
.dossier-actions{margin:6px 0 0;flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:220px}
.dossier-actions .btn{justify-content:center}
.btn.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}
.badges .tag{height:22px}
.dossier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:22px}
.dossier .card h2{margin:0 0 12px}
.facts dl{margin:0;display:grid;grid-template-columns:1fr;gap:8px}
.facts dl>div{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-13);border-bottom:1px dashed rgb(var(--border));padding-bottom:6px}
.facts dl>div:last-child{border-bottom:0;padding-bottom:0}
.facts dt{color:rgb(var(--ink-muted));flex:0 0 42%}
.facts dd{margin:0;text-align:right;min-width:0;overflow-wrap:anywhere;color:rgb(var(--ink))}
.facts dd .chip{margin-left:6px;vertical-align:middle}
.usage .kpis{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:0 0 14px}
.usage .kpi{padding:12px 14px;box-shadow:none;background:rgb(var(--surface-2));border-color:transparent}
.usage .kpi b{font-size:var(--fs-d2)}
.spark{display:block;width:100%;height:64px;overflow:visible}
.spark .area{fill:rgb(var(--accent)/.14)}
.spark .line{fill:none;stroke:rgb(var(--accent));stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark .base{stroke:rgb(var(--border));stroke-width:1;vector-effect:non-scaling-stroke}
.spark-axis{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-xs);color:rgb(var(--faint));margin-top:4px}
.privacy{font-size:var(--fs-sm);color:rgb(var(--ink-muted));margin:10px 0 0;line-height:1.5}
.flash{margin:0 0 18px;color:rgb(var(--ink))}
.flash.warn{border-left-color:rgb(var(--bad));background:color-mix(in srgb,rgb(var(--bad)) 8%,rgb(var(--surface)))}
.flash .forge-note{display:block;margin-top:4px;color:rgb(var(--ink-muted));font-size:var(--fs-13)}
.prov{margin-top:22px;font-size:var(--fs-sm);color:rgb(var(--ink-muted));line-height:1.6}
.prov code{font-size:var(--fs-sm)}
table.deps td{vertical-align:middle}
table.deps td.tnum{white-space:nowrap}

/* ---------- management strip: forms, confirm steps ---------- */
.manage{margin-top:8px}
.manage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.manage .card{gap:10px}
.manage .card h3{font-size:var(--fs-md);letter-spacing:0}
.manage .card>p{flex:0 0 auto;font-size:var(--fs-13);line-height:1.55}
.manage form{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--ink-muted))}
.field input,.field select{height:var(--h-md);padding:0 12px;border-radius:var(--r-chip);border:1px solid rgb(var(--border));
  background:rgb(var(--surface));color:rgb(var(--ink));font:500 var(--fs-13)/1 var(--ff-b);text-transform:none;letter-spacing:0;
  width:100%;min-width:0;transition:border-color .16s,box-shadow .16s}
.field select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background:rgb(var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A867E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px 16px}
.field input::placeholder{color:rgb(var(--faint));font-weight:400}
.field input:hover,.field select:hover{border-color:rgb(var(--border-strong))}
.field input:focus-visible,.field select:focus-visible{outline:none;border-color:rgb(var(--accent)/.7);box-shadow:var(--glow);animation:none}
.field input:disabled,.field select:disabled{opacity:.55;cursor:not-allowed}
.field .hint,.form-actions .hint{font-weight:400;text-transform:none;letter-spacing:0;font-size:var(--fs-sm);color:rgb(var(--faint))}
.form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-row .field{flex:1 1 150px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none}
.lifecycle-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;margin-top:auto}
.confirm{min-width:0}
.confirm>summary{list-style:none;display:inline-flex;cursor:pointer;user-select:none}
.confirm>summary::-webkit-details-marker{display:none}
.confirm[open]>summary{border-color:rgb(var(--accent)/.6);color:rgb(var(--accent))}
.confirm-body{margin-top:10px;padding:12px 14px;border:1px dashed rgb(var(--border-strong));border-radius:var(--r-chip);
  background:rgb(var(--surface-2)/.6);display:flex;flex-direction:column;gap:10px;min-width:min(100%,320px)}
.confirm-body p{margin:0;font-size:var(--fs-13);color:rgb(var(--muted));line-height:1.5}
.lifecycle-actions .confirm[open]{flex-basis:100%}

/* ---------- README (sanitised markdown) ---------- */
.readme{background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--r);padding:var(--sp-6) var(--sp-6);
  box-shadow:var(--e1);font-size:var(--fs-md);line-height:1.65;overflow-wrap:anywhere}
.readme>:first-child{margin-top:0}
.readme>:last-child{margin-bottom:0}
.readme h1,.readme h2,.readme h3,.readme h4,.readme h5,.readme h6{font-family:var(--ff-d);font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:rgb(var(--ink));margin:22px 0 8px;line-height:1.25}
.readme h1{font-size:var(--fs-d2)}.readme h2{font-size:var(--fs-d3)}.readme h3{font-size:var(--fs-md)}.readme h4,.readme h5,.readme h6{font-size:var(--fs-md)}
.readme p{margin:0 0 12px}
.readme ul,.readme ol{margin:0 0 12px;padding-left:var(--sp-6)}
.readme li{margin:2px 0}
.readme pre{margin:0 0 12px;box-shadow:none}
.readme blockquote{margin:0 0 12px;padding:6px 14px;border-left:3px solid rgb(var(--accent)/.5);color:rgb(var(--muted))}
.readme hr{border:0;border-top:1px solid rgb(var(--border));margin:18px 0}
.readme a{text-decoration:underline;text-underline-offset:2px}
.readme del{color:rgb(var(--ink-muted))}

@media (max-width:640px){
  .dossier-actions{width:100%;min-width:0}
  .facts dl>div{flex-direction:column;gap:2px}
  .facts dt{flex-basis:auto}
  .facts dd{text-align:left}
  .readme{padding:var(--sp-4) var(--sp-5)}
}
@media print{.manage,.dossier-actions,.flash{display:none!important}}

/* ---------- sharing: share sheet, access requests, SSO invites (Increment 4) ---------- */
.share{margin-top:22px;padding-top:var(--sp-5);border-top:1px dashed rgb(var(--border-strong))}
.share-note{margin:-4px 0 14px;font-size:var(--fs-13);color:rgb(var(--ink-muted));max-width:80ch}
.share .card h3 small{font-weight:500;font-size:var(--fs-sm);color:rgb(var(--ink-muted));margin-left:6px}
.grant-list,.req-list,.inv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.grant-list li{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0}
.grant-list .chip{flex:0 1 auto;min-width:0;overflow-wrap:anywhere;word-break:break-all;height:auto;min-height:22px;padding-block:2px}
.grant-list .chip code{font-size:var(--fs-sm);background:transparent;border:0;padding:0}
.grant-list form.inline{flex:none}
.manage form.inline,.share form.inline{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0}
.btn.sm.x{width:28px;height:28px;padding:0;font-size:var(--fs-md);line-height:1;color:rgb(var(--ink-muted))}
.btn.sm.x:hover{color:rgb(var(--bad))}
.req-list li,.inv-list li{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid rgb(var(--border));
  border-radius:var(--r-chip);background:rgb(var(--surface-2)/.6)}
.req-who,.inv-who{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:var(--fs-13)}
.req-who .tnum,.inv-who .tnum{font-size:var(--fs-sm);color:rgb(var(--faint))}
.req-msg{flex-basis:100%;font-size:var(--fs-13);color:rgb(var(--ink-muted))}
.req-actions{display:flex;gap:8px;flex-wrap:wrap}
.inv-link{display:block;font-size:var(--fs-sm);padding:8px 10px;overflow-wrap:anywhere;user-select:all;background:rgb(var(--surface));
  border:1px solid rgb(var(--border));border-radius:var(--r-chip)}
main.narrow{max-width:46rem}
.access-form{gap:14px}
.access-form .privacy{margin-top:0}
@media print{.share{display:none!important}}

/* ---------- edit + collaboration: versions, rollback, co-edit panel, editors (Increment 5) ---------- */
table.versions td{vertical-align:middle}
table.versions td.tnum{white-space:nowrap}
table.versions .rel{display:inline-flex;flex-direction:column;gap:2px;min-width:0}
table.versions .rel code{font-size:var(--fs-sm)}
table.versions .rel small{font-size:var(--fs-xs);color:rgb(var(--faint))}
table.versions .confirm-body{min-width:min(100%,260px)}
table.versions .confirm-body form{display:flex;flex-direction:column;gap:8px;margin:0}
.pill.current{color:color-mix(in srgb,rgb(var(--accent)) 74%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--accent)) 45%,transparent);background:color-mix(in srgb,rgb(var(--accent)) 14%,rgb(var(--surface)))}
.versions-note{font-size:var(--fs-sm);color:rgb(var(--ink-muted));margin:10px 0 0;line-height:1.55;max-width:90ch}
.coedit{margin-top:22px;gap:12px}
.coedit h2 small{font-weight:500;font-size:var(--fs-13);color:rgb(var(--ink-muted));letter-spacing:0;text-transform:none;margin-left:8px}
.coedit>p{margin:0;font-size:var(--fs-13);line-height:1.55;max-width:90ch}
.copy-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.copy-row .field{flex:1 1 260px;min-width:0}
.copy-row .field input[readonly]{font:500 var(--fs-13)/1 var(--ff-m);letter-spacing:0;text-transform:none;cursor:text;user-select:all;
  background:rgb(var(--surface-2));color:rgb(var(--ink))}
.copy-row .btn{flex:none}
.copy-row .btn[data-copied]{border-color:rgb(var(--ok)/.6);color:color-mix(in srgb,rgb(var(--ok)) 70%,rgb(var(--text)))}
.coedit-steps{margin:4px 0 0;padding-left:20px;font-size:var(--fs-13);line-height:1.6;color:rgb(var(--muted))}
.coedit-steps li{margin:2px 0}
.coedit-steps code{font-size:var(--fs-sm)}
.coedit .flow{display:inline-flex;align-items:center;gap:6px}
/* INC10a: one-click launcher, advisory-lease chip, inline checklist, "autres façons" disclosure */
.coedit-launch{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.coedit-btns{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.coedit-launch .btn.primary{font-size:var(--fs-md)}
/* Launch target (2026-09-28): "Edit with Claude" (label + the target hint coedit.js keeps in step with the
   per-browser preference) with its attached chevron (the menu of targets), then "Copy the prompt". The menu
   renders in flow under the row. Same pattern as the Lucarne bar (lucarne.css .row.claude). */
.coedit-split{display:inline-flex;align-items:stretch}
.coedit-split .btn.primary:first-child{height:auto;min-height:var(--h-md);padding:5px 14px 5px 20px;border-top-right-radius:0;border-bottom-right-radius:0;text-align:left}
.coedit-split .lbl{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.coedit-split .lbl small{font-size:var(--fs-xs);font-weight:500;line-height:1;opacity:.85;white-space:nowrap}
.coedit-split .btn.chev{width:36px;padding:0;height:auto;border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:rgb(var(--accent-fg)/.35)}
.coedit-split .btn.chev svg{width:16px;height:16px;transition:transform .16s}
.coedit-split .btn.chev[aria-expanded="true"] svg{transform:rotate(180deg)}
.coedit-menu{display:flex;flex-direction:column;gap:2px;padding:4px;margin-top:2px;border:1px solid rgb(var(--border-strong));border-radius:var(--r-md);background:rgb(var(--surface-2));width:max-content;max-width:100%}
.coedit-menu .mi{display:flex;align-items:center;gap:8px;height:var(--h-sm);padding:0 12px;border:0;border-radius:var(--r-xs);background:transparent;color:rgb(var(--ink));font:500 var(--fs-13)/1 var(--ff-b);cursor:pointer;text-align:left}
.coedit-menu .mi::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);border:1px solid rgb(var(--ink-muted));flex:none}
.coedit-menu .mi[aria-checked="true"]{color:rgb(var(--accent));font-weight:600}
.coedit-menu .mi[aria-checked="true"]::before{background:rgb(var(--accent));border-color:rgb(var(--accent))}
.coedit-menu .mi:hover{background:rgb(var(--surface))}
.coedit-menu .mi:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:-2px}
.coedit-check{margin:6px 0 0;padding-left:20px;font-size:var(--fs-13);line-height:1.6;color:rgb(var(--muted));
  list-style:decimal;counter-reset:none}
.coedit-check li{margin:3px 0}
.coedit-note{margin:6px 0 0;font-size:var(--fs-13);line-height:1.5;color:rgb(var(--ink-muted))}
/* Refused clipboard: coedit.js reveals #claude-prompt (selected) and tones the note as a warning. */
.coedit-note.warn{color:color-mix(in srgb,rgb(var(--mine)) 70%,rgb(var(--text)));font-weight:600}
.coedit-lease{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-chip);
  border:1px solid rgb(var(--border));background:rgb(var(--surface-2));font-size:var(--fs-13);color:rgb(var(--ink))}
.coedit-lease .lease-dot{width:8px;height:8px;border-radius:var(--r-pill);flex:none;background:rgb(var(--accent))}
.coedit-lease.mine .lease-dot{background:rgb(var(--ok))}
.coedit-lease .lease-text{flex:1 1 240px;min-width:0}
.coedit-lease .lease-req{color:color-mix(in srgb,rgb(var(--warn,var(--accent))) 70%,rgb(var(--text)));font-weight:600}
.coedit-lease .lease-form{margin:0;flex:none}
.coedit-more{margin-top:2px}
.coedit-more>summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:rgb(var(--ink-muted));
  letter-spacing:.04em;width:max-content}
.coedit-more[open]>summary{margin-bottom:8px}
.coedit-more .copy-row{margin-top:8px}
/* WI-08: the always-present hidden handoff (#claude-prompt) is the copy source; the nested "Afficher la
   consigne" disclosure un-hides it for the no-JS path (open state wins over [hidden] by specificity). */
.coedit-reveal{margin-top:8px}
.coedit-reveal>summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:rgb(var(--ink-muted));
  letter-spacing:.04em;width:max-content}
.coedit-launch #claude-prompt{width:100%;resize:vertical;min-height:180px;font:500 var(--fs-sm)/1.5 var(--ff-m);
  letter-spacing:0;text-transform:none;cursor:text;padding:10px 12px;margin-top:8px;border-radius:var(--r-chip);
  border:1px solid rgb(var(--border));background:rgb(var(--surface-2));color:rgb(var(--ink))}
.coedit:has(.coedit-reveal[open]) #claude-prompt[hidden]{display:block!important}
@media (prefers-reduced-motion:no-preference){
  .coedit-check.revealed{animation:fade-up .18s ease both}
}
.editors-list .chip{max-width:100%}
@media (max-width:640px){
  .copy-row .btn{width:100%}
}
@media print{.coedit,table.versions details{display:none!important}}

/* ---------- governance in product: classification badges, G3 status, receipts, tokens, audit (Increment 6a) ---------- */
.chip.conf,.tag.conf{background:color-mix(in srgb,rgb(var(--bad)) 22%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--bad)) 78%,rgb(var(--text)));
  border-color:color-mix(in srgb,rgb(var(--bad)) 60%,transparent);font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:var(--fs-xs)}
.chip.pdata,.tag.pdata{background:color-mix(in srgb,rgb(var(--mine)) 20%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--mine)) 70%,rgb(var(--text)));
  border-color:color-mix(in srgb,rgb(var(--mine)) 55%,transparent);font-weight:600}
.callout.conf{border-left-color:rgb(var(--bad));background:color-mix(in srgb,rgb(var(--bad)) 7%,rgb(var(--surface)));color:rgb(var(--ink))}
/* UX inc A (calm-down): compact chips, the quiet one-line classification note that replaces the red banner,
   and the CSS-only tag overflow (<details class="tag-more">, no script, CSP-safe). */
.chip.sm{height:18px;padding:0 8px;font-size:var(--fs-xs)}
.chip.conf.sm,.chip.pdata.sm{text-transform:none;letter-spacing:0;font-size:var(--fs-xs);font-weight:600}
.note-quiet{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-8px 0 12px;font-size:var(--fs-13);line-height:1.5;color:rgb(var(--ink-muted))}
.note-quiet .chip{flex:none}
.dossier-tags{margin-top:8px}
.tag-more{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.tag-more>summary{list-style:none;cursor:pointer;color:rgb(var(--ink-muted));background:transparent;border-style:dashed;user-select:none}
.tag-more>summary::-webkit-details-marker{display:none}
.tag-more>summary::marker{content:""}
.tag-more>summary:hover{border-color:rgb(var(--accent)/.6);color:rgb(var(--accent))}
.tag-more>summary:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px}
.tag-more[open]>summary{border-style:solid;border-color:rgb(var(--accent)/.6);color:rgb(var(--accent))}
.tag-more>.tags{display:inline-flex;flex-wrap:wrap;gap:4px}
.callout.warn{border-left-color:rgb(var(--bad));background:color-mix(in srgb,rgb(var(--bad)) 8%,rgb(var(--surface)));color:rgb(var(--ink))}
.callout.ok{border-left-color:rgb(var(--ok));background:color-mix(in srgb,rgb(var(--ok)) 8%,rgb(var(--surface)));color:rgb(var(--ink))}
/* Slug rename (manage.js probe): the available / taken states read differently, not only by the button. */
.hint.ok,.hint.warn{margin-top:4px;font-weight:500}
.hint.ok{color:color-mix(in srgb,rgb(var(--ok)) 70%,rgb(var(--text)))}
.hint.warn{color:color-mix(in srgb,rgb(var(--mine)) 62%,rgb(var(--text)))}
.hint.ok::before{content:"\2713\00a0"}
.hint.warn::before{content:"\2717\00a0"}
:root[data-contrast="high"] .hint.ok{color:rgb(var(--ok))}
:root[data-contrast="high"] .hint.warn{color:rgb(var(--mine))}
/* The Address row: the served address as a monospace pill and the "Change the address" button on the
   receipt line's gap (it sat about 2px from the pill, the row below has --sp-2); both wrap as units. */
.addr-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2,8px);margin:0;min-width:0}
.addr-line .addr-current{min-width:0;overflow-wrap:anywhere}
.addr-line .btn{flex:none}
/* Former addresses: the chip and its "redirects until" line wrap as units, never inside the date. */
.alias-list li{flex-wrap:wrap;row-gap:2px}
.alias-list .chip{overflow-wrap:normal;word-break:normal;max-width:100%}
.alias-list .chip code{overflow-wrap:anywhere}
.alias-list .alias-until{white-space:nowrap}
.callout.g3{font-size:var(--fs-13);line-height:1.55}
.callout.g3.warn b{color:color-mix(in srgb,rgb(var(--bad)) 80%,rgb(var(--text)))}
.admin-links{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px}
.admin-links .btn .chip{margin-left:8px}
.receipt{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px dashed rgb(var(--border-strong));border-radius:var(--r-chip);
  background:rgb(var(--surface-2)/.6);font-size:var(--fs-13);line-height:1.5;max-width:70ch}
.receipt-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.receipt p{margin:0}
.receipt-explain{color:rgb(var(--ink))}
.receipt-where,.receipt-hint{color:rgb(var(--ink-muted));font-size:var(--fs-sm)}
.receipt-term{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.receipt-term code{font-weight:600}
.receipt-term.redacted{color:rgb(var(--ink-muted));font-style:italic}
.tokens .dossier-grid{margin-top:12px}
.token-once{border-color:color-mix(in srgb,rgb(var(--ok)) 50%,transparent);box-shadow:var(--e2);gap:10px;margin:16px 0 4px}
.token-once h2 small{font-weight:500;font-size:var(--fs-13);color:rgb(var(--ink-muted));letter-spacing:0;text-transform:none;margin-left:8px}
.token-once>p{margin:0;font-size:var(--fs-13);line-height:1.55}
.token-once .copy-row .field input[readonly]{user-select:all;font-size:var(--fs-sm)}
table.tokens-table td,table.audit-table td{vertical-align:middle}
table.tokens-table td.tnum,table.audit-table td.tnum{white-space:nowrap;font-size:var(--fs-sm)}
table.audit-table td{font-size:var(--fs-13);overflow-wrap:anywhere}
table.audit-table .chip{white-space:nowrap}
.audit-filters .facet-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.audit-filters .facet input{height:var(--h-md);padding:0 12px;border-radius:var(--r-chip);border:1px solid rgb(var(--border));
  background:rgb(var(--surface));color:rgb(var(--ink));font:500 var(--fs-13)/1 var(--ff-b);width:100%;min-width:0}
.audit-filters .facet input:hover{border-color:rgb(var(--border-strong))}
.audit-filters .facet input:focus-visible{outline:none;border-color:rgb(var(--accent)/.7);box-shadow:var(--glow);animation:none}
.audit-filters .form-actions{padding:0 16px 14px}
@media (max-width:640px){
  .admin-links .btn{width:100%;justify-content:center}
  .receipt{max-width:100%}
}
@media print{.audit-filters,.token-once,.tokens form{display:none!important}}

/* ============================================================================
   INC7a: SSO gateway (/welcome), empty-state system, layout skeletons.
   All first-party, tokens only, theme-aware, reduced-motion aware. No external
   resource of any kind (strict CSP default-src 'self'; script-src / style-src 'self').
   ============================================================================ */

/* ---------- /welcome : branded SSO gateway / interstitial ---------- */
.welcome{min-height:100vh;display:flex;flex-direction:column;padding:clamp(16px,4vw,28px)}
.welcome-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}
/* margin:auto centres the card on both axes in the remaining flex space */
.welcome-card{margin:auto;width:100%;max-width:29rem;text-align:center;
  padding:clamp(28px,5vw,40px) clamp(22px,4vw,34px);
  background:rgb(var(--surface)/.82);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgb(var(--border));border-radius:var(--r);box-shadow:var(--e2)}
:root[data-contrast="high"] .welcome-card{border-width:2px}
.welcome-mark{width:60px;height:60px;margin:0 auto 20px}
.welcome-mark .logo{width:60px;height:60px;filter:drop-shadow(0 10px 26px rgb(var(--accent)/.42))}
.welcome-eyebrow{font-family:var(--ff-d);font-weight:700;font-size:var(--fs-sm);letter-spacing:.16em;
  text-transform:uppercase;color:rgb(var(--accent));margin:0 0 12px;font-variant-numeric:tabular-nums}
.welcome-h1{font-family:var(--ff-d);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(23px,4.4vw,30px);line-height:1.12;margin:0 0 10px;color:rgb(var(--ink))}
.welcome-sub{color:rgb(var(--ink-muted));font-size:var(--fs-md);margin:0 auto 26px;max-width:34ch}
.welcome-continue{width:100%;height:50px;font-size:var(--fs-md);gap:12px}
.welcome-continue .ms-glyph{width:18px;height:18px;flex:none;border-radius:var(--r-xs);
  box-shadow:0 0 0 1px rgb(255 255 255/.35)}
/* interstitial: indeterminate shimmer + reassuring line, revealed by welcome.js when motion is allowed */
.welcome-status{display:flex;flex-direction:column;align-items:center;gap:10px;margin:20px 0 4px;
  color:rgb(var(--ink-muted));font-size:var(--fs-13)}
.welcome-shimmer{position:relative;width:100%;max-width:220px;height:4px;border-radius:var(--r-pill);
  overflow:hidden;background:rgb(var(--surface-2));border:1px solid rgb(var(--border))}
.welcome-shimmer span{position:absolute;top:0;bottom:0;left:0;width:42%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,transparent,rgb(var(--accent)),transparent);
  transform:translateX(-120%);animation:welcome-slide 1.15s var(--ease-in-out) infinite}
@keyframes welcome-slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.welcome-trust{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px}
.welcome-trust .chip{height:26px;padding:0 12px;gap:6px}
.welcome-trust .chip svg{width:13px;height:13px;flex:none;color:rgb(var(--ink-muted))}

/* ---------- branded empty states (one clear action each) ---------- */
.emptystate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:clamp(36px,6vw,56px) 28px;border:1px dashed rgb(var(--border));border-radius:var(--r);
  background:rgb(var(--surface)/.5)}
.emptystate .es-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:var(--r-lg);
  background:rgb(var(--accent-tint)/.7);color:rgb(var(--accent));
  border:1px solid rgb(var(--accent)/.28);box-shadow:var(--e1)}
.emptystate .es-icon svg{width:24px;height:24px}
.emptystate h3{font-family:var(--ff-d);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.01em;
  color:rgb(var(--ink));margin:0}
.emptystate p{margin:0;max-width:46ch;color:rgb(var(--ink-muted));font-size:var(--fs-13)}
.emptystate .es-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px}
.emptystate.warn .es-icon{background:color-mix(in srgb,rgb(var(--mine)) 16%,rgb(var(--surface)));
  color:color-mix(in srgb,rgb(var(--mine)) 66%,rgb(var(--text)));border-color:rgb(var(--mine)/.32)}
.emptystate.violet .es-icon{background:color-mix(in srgb,rgb(var(--booth)) 15%,rgb(var(--surface)));
  color:color-mix(in srgb,rgb(var(--booth)) 66%,rgb(var(--text)));border-color:rgb(var(--booth)/.32)}

/* ---------- layout skeletons (mirror card + table; single-sweep band, stilled if reduced) ---------- */
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.sk-card{background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:var(--r);
  padding:var(--sp-5);box-shadow:var(--e2);display:flex;flex-direction:column;gap:11px}
.sk-line{height:12px;border-radius:var(--r-xs);width:100%}
.sk-line.title{height:17px;width:62%}
.sk-line.short{width:38%}
.sk-line.mid{width:80%}
.sk-chips{display:flex;gap:6px;margin-top:6px}
.sk-chip{height:20px;width:58px;border-radius:var(--r-pill)}
.sk-table{border:1px solid rgb(var(--border));border-radius:var(--r);overflow:hidden;
  background:rgb(var(--surface));box-shadow:var(--e1)}
.sk-row{display:flex;gap:16px;align-items:center;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid rgb(var(--border))}
.sk-row:last-child{border-bottom:0}
.sk-row .sk-line:nth-child(1){flex:2}
.sk-row .sk-line:nth-child(2){flex:1}
.sk-row .sk-line:nth-child(3){flex:1}
.sk-row.head{background:rgb(var(--surface-2))}
@media (prefers-reduced-motion:reduce){
  .skeleton::after{display:none}
  .welcome-shimmer span{animation:none;transform:none;width:100%;
    background:linear-gradient(90deg,transparent,rgb(var(--accent)/.45),transparent)}
}

/* ---------- access legibility: resolved-audience card + unified share composer (Increment 8a) ---------- */
.share-compose{gap:10px}
.aud{display:flex;flex-direction:column;gap:10px}
.aud-scope{display:flex;flex-wrap:wrap;gap:8px}
.aud-seg{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;padding:5px 12px;border-radius:var(--r-chip);
  font-size:var(--fs-13);line-height:1.35;border:1px solid rgb(var(--border));background:rgb(var(--surface-2)/.7);color:rgb(var(--ink));
  overflow-wrap:anywhere;word-break:break-word}
.aud-seg small{font-size:var(--fs-xs);color:rgb(var(--ink-muted));font-weight:500;white-space:nowrap}
.aud-seg code{font-size:var(--fs-sm);background:transparent;border:0;padding:0}
.aud-seg.tone-team{background:color-mix(in srgb,rgb(var(--accent)) 13%,rgb(var(--surface)));
  border-color:color-mix(in srgb,rgb(var(--accent)) 40%,transparent);color:color-mix(in srgb,rgb(var(--accent)) 70%,rgb(var(--text)))}
.aud-seg.tone-team small{color:color-mix(in srgb,rgb(var(--accent)) 60%,rgb(var(--text)))}
.aud-seg.tone-company{background:color-mix(in srgb,rgb(var(--mine)) 18%,rgb(var(--surface)));
  border-color:color-mix(in srgb,rgb(var(--mine)) 50%,transparent);color:color-mix(in srgb,rgb(var(--mine)) 74%,rgb(var(--text)))}
.aud-seg.tone-company small{color:color-mix(in srgb,rgb(var(--mine)) 64%,rgb(var(--text)))}
.aud-seg.tone-group{background:color-mix(in srgb,rgb(var(--booth)) 15%,rgb(var(--surface)));
  border-color:color-mix(in srgb,rgb(var(--booth)) 42%,transparent);color:color-mix(in srgb,rgb(var(--booth)) 68%,rgb(var(--text)))}
.aud-seg.tone-group small{color:color-mix(in srgb,rgb(var(--booth)) 58%,rgb(var(--text)))}
.aud-seg.tone-editor{background:color-mix(in srgb,rgb(var(--ok)) 14%,rgb(var(--surface)));
  border-color:color-mix(in srgb,rgb(var(--ok)) 42%,transparent);color:color-mix(in srgb,rgb(var(--ok)) 66%,rgb(var(--text)))}
.aud-seg.tone-editor small{color:color-mix(in srgb,rgb(var(--ok)) 58%,rgb(var(--text)))}
.aud-seg.tone-warn{background:color-mix(in srgb,rgb(var(--bad)) 13%,rgb(var(--surface)));
  border-color:color-mix(in srgb,rgb(var(--bad)) 42%,transparent);color:color-mix(in srgb,rgb(var(--bad)) 72%,rgb(var(--text)))}
.aud-seg.tone-warn small{color:color-mix(in srgb,rgb(var(--bad)) 62%,rgb(var(--text)))}
.aud-note{margin:0;font-size:var(--fs-sm);color:rgb(var(--ink-muted));line-height:1.5}
.aud-warn{margin:0;font-size:var(--fs-sm);line-height:1.5;color:color-mix(in srgb,rgb(var(--bad)) 74%,rgb(var(--text)));
  padding:8px 11px;border:1px solid color-mix(in srgb,rgb(var(--bad)) 32%,transparent);border-radius:var(--r-chip);
  background:color-mix(in srgb,rgb(var(--bad)) 7%,rgb(var(--surface)))}
.compose-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.compose-row .field.grow{flex:1 1 240px;min-width:0}
.role-row{gap:18px;align-items:center}
.role-opt{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-13);cursor:pointer}
.role-opt input{accent-color:rgb(var(--accent))}
.role-hint{font-size:var(--fs-sm);color:rgb(var(--ink-muted));flex-basis:100%}
.compose-error{margin:0;font-size:var(--fs-sm);color:color-mix(in srgb,rgb(var(--bad)) 74%,rgb(var(--text)))}
.compose-hint{margin:0;font-size:var(--fs-sm);color:rgb(var(--ink-muted));line-height:1.5}
.compose-linkstatus{margin:0;font-size:var(--fs-sm);line-height:1.5;color:rgb(var(--ink-muted));
  padding:8px 11px;border:1px solid rgb(var(--border));border-radius:var(--r-chip);background:rgb(var(--surface-2)/.6)}
.compose-linkstatus.can{color:color-mix(in srgb,rgb(var(--ok)) 66%,rgb(var(--text)));
  border-color:color-mix(in srgb,rgb(var(--ok)) 38%,transparent);background:color-mix(in srgb,rgb(var(--ok)) 8%,rgb(var(--surface)))}
.compose-linkstatus.cannot{color:color-mix(in srgb,rgb(var(--mine)) 72%,rgb(var(--text)));
  border-color:color-mix(in srgb,rgb(var(--mine)) 42%,transparent);background:color-mix(in srgb,rgb(var(--mine)) 9%,rgb(var(--surface)))}
.aud-bar{margin-top:4px;padding-top:12px;border-top:1px dashed rgb(var(--border-strong))}
.aud-bar[data-loading]{opacity:.55}
@media (prefers-reduced-motion:no-preference){.aud-bar{transition:opacity .15s ease}}
@media print{.share-compose{display:none!important}}

/* ---------- INC11a: fork / remix, lineage crumb, templates gallery ---------- */
.lineage{margin:-2px 0 10px;font-size:var(--fs-13);color:rgb(var(--ink-muted));display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lineage a{font-weight:600}
.lineage code{font-size:var(--fs-sm)}
.remix{margin-top:22px}
.remix .form-row .btn{align-self:flex-end}
.remix .hint{font-size:var(--fs-sm);color:rgb(var(--ink-muted));margin:8px 0 0}
.card .remix-link{margin-left:0}
.tpl-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:6px;padding-top:10px;border-top:1px dashed rgb(var(--border))}
.tpl-form .field{flex:1 1 140px}
@media print{.tpl-form,.remix,.card .remix-link{display:none!important}}

/* ================================================================================================
   INC7b: "Mon espace" command center + Cmd-K palette. First-party only; no inline style anywhere
   (strict CSP). Dynamic values (the review ring fill) ride SVG presentation attributes, never the
   style attribute. Colours come from the shared tokens, so light/dark/high-contrast all follow.
   ================================================================================================ */

/* ---------- "Rechercher partout" header affordance ---------- */
.cmdk-trigger{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 12px;
  border:1px solid rgb(var(--border));border-radius:var(--r-pill);background:rgb(var(--surface));
  color:rgb(var(--ink-muted));font-size:var(--fs-13);font-weight:500;box-shadow:var(--e1);
  transition:border-color .16s,color .16s,box-shadow .16s,background .16s}
.cmdk-trigger:hover{color:rgb(var(--ink));border-color:rgb(var(--accent)/.6);text-decoration:none;box-shadow:var(--e2)}
.cmdk-trigger svg{width:15px;height:15px}
.cmdk-trigger .cmdk-kbd{margin-left:2px}
kbd,.cmdk-kbd{font-family:var(--ff-m);font-size:var(--fs-xs);line-height:1;padding:3px 6px;border-radius:var(--r-xs);
  border:1px solid rgb(var(--border-strong));background:rgb(var(--surface-2));color:rgb(var(--ink-muted));
  box-shadow:0 1px 0 rgb(var(--border-strong));white-space:nowrap}
@media (max-width:760px){.cmdk-trigger .cmdk-trigger-label,.cmdk-trigger .cmdk-kbd{display:none}
  .cmdk-trigger{padding:0;width:34px;justify-content:center}}

/* ---------- palette overlay ---------- */
.cmdk{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(48px,12vh,140px) 16px 16px}
.cmdk-backdrop{position:fixed;inset:0;background:rgb(var(--ink)/.34);backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);animation:cmdk-fade .16s var(--ease-out-soft) both}
.cmdk-panel{position:relative;width:min(640px,100%);max-height:min(72vh,640px);display:flex;flex-direction:column;
  padding:0;overflow:hidden;box-shadow:var(--e3),var(--glow);animation:cmdk-pop .2s var(--ease-out-soft) both}
@keyframes cmdk-fade{from{opacity:0}to{opacity:1}}
@keyframes cmdk-pop{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}

.cmdk-search{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgb(var(--border))}
.cmdk-search svg{width:18px;height:18px;color:rgb(var(--ink-muted));flex:none}
.cmdk-input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:rgb(var(--ink));
  font-family:var(--ff-b);font-size:var(--fs-md);line-height:1.4;padding:2px 0}
.cmdk-input::placeholder{color:rgb(var(--faint))}
.cmdk-input::-webkit-search-cancel-button{-webkit-appearance:none}
.cmdk-esc{flex:none;border:1px solid rgb(var(--border));background:rgb(var(--surface-2));color:rgb(var(--ink-muted));
  border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:600;padding:4px 8px;cursor:pointer}
.cmdk-esc:hover{color:rgb(var(--ink));border-color:rgb(var(--border-strong))}

.cmdk-list{overflow-y:auto;padding:8px;flex:1;scrollbar-width:thin}
.cmdk-group{margin:2px 0 6px}
.cmdk-group-h{margin:6px 8px 4px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:rgb(var(--faint))}
.cmdk-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);border:1px solid transparent;background:transparent;
  color:rgb(var(--ink));font-family:var(--ff-b);font-size:var(--fs-md);cursor:pointer;
  transition:background .12s,border-color .12s}
.cmdk-item:hover{text-decoration:none;background:rgb(var(--surface-2))}
.cmdk-item.is-active,.cmdk-item[aria-selected="true"]{background:rgb(var(--accent-tint));
  border-color:rgb(var(--accent)/.35);box-shadow:var(--e1)}
.cmdk-ic{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:rgb(var(--surface-2));color:rgb(var(--ink-muted))}
.cmdk-ic svg{width:15px;height:15px}
.cmdk-item.is-active .cmdk-ic{background:rgb(var(--accent)/.16);color:color-mix(in srgb,rgb(var(--accent)) 70%,rgb(var(--text)))}
.cmdk-lbl{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-sub{display:block;font-weight:400;font-size:var(--fs-sm);color:rgb(var(--ink-muted));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-hint{flex:none;font-size:var(--fs-sm);color:rgb(var(--faint));white-space:nowrap}
.cmdk-item.blind{cursor:default;opacity:.75}
.cmdk-item.blind:hover{background:transparent}
.cmdk-item.blind .cmdk-ic{background:transparent;border:1px dashed rgb(var(--border-strong))}
.cmdk-masked,.cmdk-noresult{margin:6px 10px;font-size:var(--fs-sm);color:rgb(var(--ink-muted))}
.cmdk-foot{display:flex;gap:16px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid rgb(var(--border));
  font-size:var(--fs-sm);color:rgb(var(--faint));background:rgb(var(--surface-2)/.5)}
.cmdk-foot kbd{margin-right:3px}
@media (max-width:560px){.cmdk-foot{display:none}.cmdk-hint{display:none}}

/* ---------- "Mon espace" band ---------- */
.myspace{margin:0 0 30px;padding:var(--sp-5) var(--sp-5) var(--sp-5);border:1px solid rgb(var(--border));border-radius:var(--r);
  background:linear-gradient(180deg,rgb(var(--surface)) 0%,rgb(var(--surface-2)/.55) 100%);box-shadow:var(--e2)}
.myspace-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.myspace-head h2{font-family:var(--ff-d);font-weight:700;letter-spacing:-.01em;font-size:var(--fs-d3);margin:0}
.ms-groups{display:flex;flex-direction:column;gap:10px}
.ms-group{border:1px solid rgb(var(--border));border-radius:var(--r-lg);background:rgb(var(--surface));
  box-shadow:var(--e1);overflow:hidden}
.ms-group-h{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;user-select:none;
  list-style:none;font-weight:600;font-size:var(--fs-13);color:rgb(var(--ink))}
.ms-group-h::-webkit-details-marker{display:none}
.ms-group-h::after{content:"";width:7px;height:7px;margin-left:auto;border-right:2px solid rgb(var(--faint));
  border-bottom:2px solid rgb(var(--faint));transform:rotate(45deg);transition:transform .18s var(--ease-out-soft)}
.ms-group[open] .ms-group-h::after{transform:rotate(-135deg)}
.ms-group-h:hover{background:rgb(var(--surface-2)/.5)}
.ms-group-title{font-size:var(--fs-13)}
.ms-group-h .chip{font-weight:600}

.ms-scroller{display:flex;gap:10px;overflow-x:auto;padding:2px 14px 16px;scroll-snap-type:x proximity;
  scrollbar-width:thin;overscroll-behavior-x:contain}
.ms-scroller>*{scroll-snap-align:start;flex:0 0 auto}
.ms-empty{margin:0;padding:2px 14px 14px;font-size:var(--fs-13);color:rgb(var(--ink-muted))}

.ms-card{width:230px;min-height:96px;border:1px solid rgb(var(--border));border-radius:var(--r-lg);
  background:rgb(var(--surface));box-shadow:var(--e1);padding:var(--sp-3) var(--sp-3);display:flex;align-items:flex-start;gap:10px;
  transition:transform .18s var(--ease-out-soft),box-shadow .18s,border-color .18s}
.ms-card:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:rgb(var(--border-strong))}
.ms-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;color:inherit}
.ms-card-main:hover{text-decoration:none}
.ms-card-title{font-weight:600;font-size:var(--fs-md);color:rgb(var(--ink));line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-card-main:hover .ms-card-title{color:rgb(var(--accent))}
.ms-card-meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.ms-card.invite{border-style:dashed;border-color:rgb(var(--accent)/.45)}

/* review / TTL indicator */
.ms-review{flex:none;display:inline-flex;flex-direction:column;align-items:center;gap:3px;width:40px}
.ms-ring{width:34px;height:34px;transform:rotate(-90deg)}
.ms-ring-bg{stroke:rgb(var(--border-strong));stroke-width:3}
.ms-ring-fg{stroke:rgb(var(--accent));stroke-width:3;stroke-linecap:round;
  transition:stroke-dasharray .4s var(--ease-out-soft)}
.ms-review-lbl{font-size:var(--fs-xs);font-weight:600;color:rgb(var(--ink-muted));letter-spacing:.01em}
.ms-review.due{width:auto}
.ms-review.due .ms-review-lbl{color:color-mix(in srgb,rgb(var(--bad)) 70%,rgb(var(--text)))}
.ms-dot{width:9px;height:9px;border-radius:var(--r-pill);background:rgb(var(--bad));
  box-shadow:0 0 0 0 rgb(var(--bad)/.5);animation:ms-pulse 1.8s var(--ease-in-out) infinite}
@keyframes ms-pulse{0%{box-shadow:0 0 0 0 rgb(var(--bad)/.5)}70%{box-shadow:0 0 0 7px rgb(var(--bad)/0)}100%{box-shadow:0 0 0 0 rgb(var(--bad)/0)}}

/* pending actions */
.ms-action{width:250px;min-height:70px;border:1px solid rgb(var(--border));border-radius:var(--r-lg);
  background:rgb(var(--surface));box-shadow:var(--e1);padding:var(--sp-3) var(--sp-3);display:flex;align-items:center;gap:10px;
  color:inherit;transition:transform .18s var(--ease-out-soft),box-shadow .18s,border-color .18s}
.ms-action:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:rgb(var(--accent)/.5);text-decoration:none}
.ms-action-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ms-action-body b{font-size:var(--fs-13);color:rgb(var(--ink))}
.ms-action-body span{font-size:var(--fs-sm);color:rgb(var(--ink-muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* empty-state starter */
.ms-starter{flex-direction:row;align-items:center;gap:18px;padding:var(--sp-5) var(--sp-6)}
.ms-starter-mark{flex:none;width:52px;height:52px;border-radius:var(--r-lg);display:inline-flex;align-items:center;
  justify-content:center;background:rgb(var(--accent)/.14);color:color-mix(in srgb,rgb(var(--accent)) 70%,rgb(var(--text)))}
.ms-starter-mark svg{width:26px;height:26px}
.ms-starter-body{flex:1;min-width:0}
.ms-starter-body h3{margin:0 0 6px;font-family:var(--ff-d);font-weight:600;font-size:var(--fs-md);color:rgb(var(--ink))}
.ms-starter-body p{margin:0 0 12px;font-size:var(--fs-13);color:rgb(var(--ink-muted));max-width:64ch}
.ms-starter-actions{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:640px){
  .myspace{padding:16px 14px 16px}
  .ms-card,.ms-action{width:82vw;max-width:280px}
  .ms-starter{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .ms-dot{animation:none}
  .ms-ring{transform:rotate(-90deg)}
  .ms-ring-fg{transition:none}
  .cmdk-backdrop,.cmdk-panel{animation:none}
}
@media print{.myspace,.cmdk,.cmdk-trigger{display:none!important}}

/* palette scroll lock (class-based; CSP-safe) */
html.cmdk-lock{overflow:hidden}

/* ---------- INC8b: header bell + notification centre ---------- */
.bell{position:relative;text-decoration:none}
.bell-pill{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;line-height:1;color:rgb(var(--accent-fg));
  background:rgb(var(--accent));box-shadow:0 0 0 2px rgb(var(--surface))}
.notifs .notif-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.notifs .notif-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.notif{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border-radius:var(--r)}
.notif .notif-main{min-width:0;flex:1 1 260px}
.notif .notif-verb{margin:0;font-weight:650;color:rgb(var(--ink));display:flex;align-items:center;gap:8px}
.notif .notif-verb .dot{width:7px;height:7px;border-radius:var(--r-pill);background:rgb(var(--accent));
  box-shadow:0 0 0 3px rgb(var(--accent)/.18);flex:0 0 auto}
.notif .notif-actor{margin:3px 0 0;color:rgb(var(--ink-muted));font-size:var(--fs-13);overflow-wrap:anywhere}
.notif .notif-actor code{font-size:var(--fs-sm)}
.notif .notif-when{margin:4px 0 0;color:rgb(var(--ink-muted));font-size:var(--fs-sm)}
.notif .notif-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.notif.read{opacity:.72}
.notif.read .notif-verb{font-weight:550}
@media print{.bell{display:none!important}}

/* ---------- INC12a: Collections ---------- */
.field textarea{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-chip);border:1px solid rgb(var(--border));
  background:rgb(var(--surface));color:rgb(var(--ink));font:400 var(--fs-13)/1.5 var(--ff-b);resize:vertical;min-height:64px;
  text-transform:none;letter-spacing:0}
.field textarea::placeholder{color:rgb(var(--faint))}
.field textarea:hover{border-color:rgb(var(--border-strong))}
.field textarea:focus-visible{outline:none;border-color:rgb(var(--accent)/.7);box-shadow:var(--glow)}
.coll-grid{margin-top:8px}
.cmember{display:flex;flex-direction:column;gap:8px}
.cmember .cnote{margin:0;padding:8px 12px;border-left:2px solid rgb(var(--accent)/.5);
  background:rgb(var(--surface-2));border-radius:var(--r-focus);color:rgb(var(--ink-muted));font-size:var(--fs-13);line-height:1.45}
.card.wide{grid-column:1 / -1}
.coll-members{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.coll-member-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;
  border:1px solid rgb(var(--border));border-radius:var(--r-chip);background:rgb(var(--surface-2))}
.coll-member-id{flex:1 1 200px;min-width:0;font-size:var(--fs-13)}
.coll-member-id code{font-size:var(--fs-sm);color:rgb(var(--ink-muted))}
.coll-member-controls{display:flex;gap:4px;flex:0 0 auto}
.coll-note-form{display:flex;gap:6px;flex:1 1 100%;margin:0}
.coll-note-form input{flex:1 1 auto;height:34px;padding:0 10px;border-radius:var(--r-chip);
  border:1px solid rgb(var(--border));background:rgb(var(--surface));color:rgb(var(--ink));font:400 var(--fs-13)/1 var(--ff-b)}
.coll-note-form input:focus-visible{outline:none;border-color:rgb(var(--accent)/.7);box-shadow:var(--glow)}
.coll-create{margin:0 0 20px}
.coll-create>summary{cursor:pointer;padding:4px 0;color:rgb(var(--ink))}
.ccard h3{align-items:baseline}

/* ---------- INC12b: trust score + quality signals (derived, read-only) ----------
   The pill takes a level tone (élevée = ok green, moyenne = amber, faible = red); a signal chip takes its
   own state tone. `sig warn` is AMBER (attention, fixable), distinct from the red `chip warn` of the
   health chips, hence the 3-class selectors. Same color-mix formula as the other tone chips, so contrast
   holds in both themes. No inline style: the strict CSP stays intact. */
.trust-row{margin-top:2px}
.chip.trust,.pill.trust{font-weight:600;text-decoration:none}
.chip.trust.eleve,.pill.trust.eleve{background:color-mix(in srgb,rgb(var(--ok)) 16%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--ok)) 70%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--ok)) 45%,transparent)}
.chip.trust.moyen,.pill.trust.moyen{background:color-mix(in srgb,rgb(var(--mine)) 18%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--mine)) 72%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--mine)) 50%,transparent)}
.chip.trust.faible,.pill.trust.faible{background:color-mix(in srgb,rgb(var(--bad)) 16%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--bad)) 72%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--bad)) 48%,transparent)}
a.chip.trust:hover,a.pill.trust:hover{filter:brightness(.96);border-color:rgb(var(--border-strong))}
a.chip.trust:focus-visible,a.pill.trust:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px}
.chip.sig.ok{background:color-mix(in srgb,rgb(var(--ok)) 15%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--ok)) 66%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--ok)) 40%,transparent)}
.chip.sig.warn{background:color-mix(in srgb,rgb(var(--mine)) 16%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--mine)) 70%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--mine)) 45%,transparent)}
.chip.sig.bad{background:color-mix(in srgb,rgb(var(--bad)) 16%,rgb(var(--surface)));color:color-mix(in srgb,rgb(var(--bad)) 72%,rgb(var(--text)));border-color:color-mix(in srgb,rgb(var(--bad)) 48%,transparent)}
.chip.sig.off{background:rgb(var(--surface-2));color:rgb(var(--ink-muted));border-style:dashed}
.trust-panel .trust-lead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0 0}
.trust-panel .trust-level{font-size:var(--fs-13);color:rgb(var(--ink-muted))}
.signals{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.signal{display:flex;gap:10px;align-items:flex-start;padding-bottom:8px;border-bottom:1px dashed rgb(var(--border))}
.signal:last-child{border-bottom:0;padding-bottom:0}
.sig-dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none;background:rgb(var(--border-strong))}
.signal.ok .sig-dot{background:rgb(var(--ok));box-shadow:0 0 0 3px rgb(var(--ok)/.16)}
.signal.warn .sig-dot{background:rgb(var(--mine));box-shadow:0 0 0 3px rgb(var(--mine)/.16)}
.signal.bad .sig-dot{background:rgb(var(--bad));box-shadow:0 0 0 3px rgb(var(--bad)/.16)}
.sig-body{min-width:0;flex:1}
.sig-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-13);color:rgb(var(--ink))}
.sig-explain{margin:3px 0 0;font-size:var(--fs-sm);line-height:1.5;color:rgb(var(--ink-muted))}
.sig-fix{margin:4px 0 0;font-size:var(--fs-sm);line-height:1.5;color:rgb(var(--ink))}
.catalogue td .pill.trust{min-width:34px;justify-content:center}
.trust-panel{scroll-margin-top:84px} /* the card's #confiance deep-link lands below the sticky header */

/* ---------- INC4: dossier visibility slider (4 stops, owner-free) ----------
   One pill track (surface-2 + border) with a sliding indigo thumb (accent gradient, e2). The thumb position is
   a data-pos attribute on the track (no inline style: the strict CSP stays intact); its 160 ms ease-out-soft
   transition is removed by the global reduced-motion rule above. A pending (staged, unconfirmed) stop hatches
   the thumb; a greyed stop (aria-disabled, kept as a fallback: INC13 opened every stop to a manager) fades to .45. */
.vis-card .vis-lock{color:rgb(var(--ink-muted))}
.seg{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:3px;isolation:isolate;
  border:1px solid rgb(var(--border));border-radius:var(--r-pill);background:rgb(var(--surface-2));box-shadow:inset 0 1px 2px rgb(var(--ink)/.04)}
.seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/4);border-radius:var(--r-pill);z-index:0;
  background:linear-gradient(180deg,rgb(var(--brand-glow)) 0%,rgb(var(--accent)) 52%,rgb(var(--accent-press)) 100%);
  box-shadow:var(--e2),inset 0 1px 0 rgb(255 255 255/.28);
  transition:transform .16s var(--ease-out-soft),background .16s var(--ease-out-soft),box-shadow .16s}
.seg[data-pos="1"] .seg-thumb{transform:translateX(100%)}
.seg[data-pos="2"] .seg-thumb{transform:translateX(200%)}
.seg[data-pos="3"] .seg-thumb{transform:translateX(300%)}
.seg.pending .seg-thumb{box-shadow:none;outline:1px dashed rgb(var(--accent)/.75);outline-offset:-1px;
  background:repeating-linear-gradient(135deg,rgb(var(--accent)/.34) 0 6px,rgb(var(--accent)/.14) 6px 12px)}
.seg-stop{position:relative;z-index:1;appearance:none;-webkit-appearance:none;border:0;background:transparent;height:34px;padding:0 4px;min-width:0;
  border-radius:var(--r-pill);font:600 var(--fs-sm)/1 var(--ff-b);letter-spacing:-.01em;color:rgb(var(--ink-muted));cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .16s var(--ease-out-soft)}
.seg-stop:hover{color:rgb(var(--ink))}
.seg-stop[aria-checked="true"]{color:rgb(var(--accent-fg))}
.seg.pending .seg-stop[aria-checked="true"]{color:rgb(var(--ink))}
.seg-stop:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px;animation:none}
.seg-stop[aria-disabled="true"]{opacity:.45;cursor:not-allowed;color:rgb(var(--ink-muted))}
.seg-stop[aria-disabled="true"]:hover{color:rgb(var(--ink-muted))}
:root[data-contrast="high"] .seg{border-width:2px}
:root[data-contrast="high"] .seg-stop[aria-disabled="true"]{opacity:.6;text-decoration:line-through}
.seg-hint{margin:0;font-size:var(--fs-sm);line-height:1.5;color:rgb(var(--ink-muted));min-height:1.5em}
.seg-confirm{padding:12px 14px;border:1px dashed rgb(var(--border-strong));border-radius:var(--r-chip);background:rgb(var(--surface-2)/.6);
  display:flex;flex-direction:column;gap:10px}
.seg-confirm p{margin:0;font-size:var(--fs-13);line-height:1.5;color:rgb(var(--muted))}
.seg-confirm p b{color:rgb(var(--ink))}
.seg-confirm .seg-pw-note{color:color-mix(in srgb,rgb(var(--mine)) 78%,rgb(var(--text)))}
@media (max-width:440px){.seg-stop{padding:0 2px;font-size:var(--fs-sm)}}

/* ---------- INC5: external share links. The dossier card lists active /l/ links (inv-list shape) with a
   copy row; the freshly minted one is ringed in the ok tone. The /l/ password gate reuses the welcome
   card (same first-party assets, served without SSO by assets-gate) plus one narrow form. ---------- */
/* Data sources (sources.go): the dossier drawer's form, one row for the destination, one per credential header. */
.src-form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.src-form .field.grow{flex:3 1 260px}
.link-list li.new{border-color:rgb(var(--ok)/.55);box-shadow:0 0 0 2px rgb(var(--ok)/.12)}
.link-list .copy-row{align-items:center}
.link-list .copy-row .field{flex:1 1 200px}
.link-list .copy-row form.inline{flex:none}
.link-card .link-off{color:rgb(var(--ink-muted))}
.linkgate-form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:22rem;margin:8px auto 0;text-align:left}
.linkgate-form .btn{width:100%;justify-content:center}

/* ---- INC7: directory autocomplete (assets/directory.js) + composer role select ---- */
.dir-wrap{position:relative;display:block;width:100%;min-width:0}
.dir-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;margin:0;padding:6px;list-style:none;
  max-height:264px;overflow-y:auto;background:rgb(var(--surface));border:1px solid rgb(var(--border-strong));
  border-radius:var(--r-chip);box-shadow:var(--e3);text-transform:none;letter-spacing:0;font-weight:400}
.dir-list[hidden]{display:none}
.dir-confirm{display:block;margin:6px 0 0;font-size:var(--fs-sm);line-height:1.35;color:rgb(var(--ink))}
.dir-confirm:empty{display:none}
.form-row>.dir-confirm{flex:1 0 100%;order:99;margin:0}
.dir-opt{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;line-height:1.3}
.dir-opt+.dir-opt{margin-top:2px}
.dir-name{font:600 var(--fs-13)/1.3 var(--ff-b);color:rgb(var(--ink))}
.dir-mail{font:500 var(--fs-sm)/1.3 var(--ff-m);color:rgb(var(--ink-muted));overflow-wrap:anywhere}
.dir-mail b{font-weight:700;color:rgb(var(--ink))}
.dir-title{font:500 var(--fs-sm)/1.3 var(--ff-b);color:rgb(var(--ink-muted))}
.dir-opt:hover,.dir-opt[aria-selected="true"]{background:rgb(var(--accent-tint))}
.dir-opt[aria-selected="true"]{box-shadow:inset 0 0 0 1px rgb(var(--accent)/.55)}
.dir-opt[aria-selected="true"] .dir-mail{color:rgb(var(--ink))}
.role-field{flex:1 1 240px;min-width:0}
.role-row .role-hint{flex:1 1 100%;font-size:var(--fs-sm);line-height:1.5;color:rgb(var(--ink-muted))}
@media (prefers-reduced-motion:no-preference){
  .dir-list{animation:dir-in .12s var(--ease-out-soft)}
  @keyframes dir-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
}
@media print{.dir-list{display:none!important}}

/* ================================================================================================
   COMPONENTS V2 (UX increment, WI-02). Additive block: nothing above this line is edited here (the
   in-place token sweep is WI-01, which merges independently). Class contract shared with the template
   items: .settings-list / .settings-row / .settings-label / .settings-control, .receipt-line, .notice
   (+ .info .ok .attention .danger), .hint, .footnote, .drawer, .plus-menu, .card.flat, .btn.text,
   .chip.sm and the chip tones .tone-neutral / -accent / -ok / -attention / -danger / -violet.
   Legacy hint, callout and audience classes are kept as selector-list aliases so templates migrate
   progressively. Every size reads the WI-01 scale through var(--token, fallback): the fallback holds
   until the token lands in :root, then the token wins; no bare literal is introduced.
   Semantic tone map: indigo (--accent) = brand, selected, info; violet (--booth) = team and group;
   green (--ok) = ok, live; amber (--mine) = attention, expiry, "sans mot de passe", pending; red (--bad)
   = danger and confidentiel only. Dashed borders are reserved to pending states.
   ================================================================================================ */

/* ---------- v2 tone plumbing: one --tone channel drives tint, line and ink for notices and chips.
   Percentages are block-local tokens so the dark and high-contrast mirrors stay one line each. ---------- */
:root{--tone-tint:10%;--tone-line:36%;--chip-tint:15%}
:root[data-theme="dark"]{--tone-tint:14%;--tone-line:42%;--chip-tint:18%}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--tone-tint:14%;--tone-line:42%;--chip-tint:18%}
}
:root[data-contrast="high"]{--tone-tint:12%;--tone-line:70%;--chip-tint:18%}

/* ---------- v2 dark ink mirrors (reviewer A1/A2). Two dark surfaces need more ink than light: the
   bare "Copié" button sits on the dark form-control grey, and the notice link sits on the dark tint.
   Both selectors already own their light colour above; here dark pulls the mix hard toward the ink so
   each clears AA 4.5:1. Light is untouched. Mirrored under the explicit toggle and the system-dark
   guard, exactly like the tone tokens. ---------- */
:root[data-theme="dark"] .receipt-line .btn[data-copied]{color:rgb(var(--ink))}
:root[data-theme="dark"] .notice a{color:color-mix(in srgb,rgb(var(--accent)) 78%,rgb(var(--ink)))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .receipt-line .btn[data-copied]{color:rgb(var(--ink))}
  :root:not([data-theme="light"]) .notice a{color:color-mix(in srgb,rgb(var(--accent)) 78%,rgb(var(--ink)))}
}

/* ---------- notice: tinted surface + 1px tone line, no left bar. Legacy callout / flash / receipt /
   audience-warning / link-status / masked / seg-confirm inherit the same declarations (visual only:
   their own margin, display and max-width stay), so a template can swap the class name later. ---------- */
.notice,.callout,.flash,.receipt,.aud-warn,.compose-linkstatus,.masked,.seg-confirm{
  --tone:var(--ink-muted);--tone-mix:66%;
  padding:var(--sp-3,12px) var(--sp-4,16px);
  border:1px solid color-mix(in srgb,rgb(var(--tone)) var(--tone-line),transparent);
  border-radius:var(--r-md,var(--r-chip));
  background:color-mix(in srgb,rgb(var(--tone)) var(--tone-tint),rgb(var(--surface)));
  color:rgb(var(--ink));font-size:var(--fs-13,13px);line-height:1.5;box-shadow:none}
.notice{margin:0}
.notice.info,.callout{--tone:var(--accent);--tone-mix:68%}
.notice.ok,.callout.ok,.flash.ok,.compose-linkstatus.can{--tone:var(--ok)}
.notice.attention,.aud-warn,.compose-linkstatus.cannot{--tone:var(--mine);--tone-mix:54%}
.notice.danger,.callout.warn,.flash.warn,.callout.conf{--tone:var(--bad)}
/* the legacy modifiers above carry their own background / border-color at the same specificity, so the
   tone variants restate both (later in source wins) */
.notice.info,.notice.ok,.notice.attention,.notice.danger,.callout,.callout.ok,.callout.warn,.callout.conf,
.flash.ok,.flash.warn,.aud-warn,.compose-linkstatus.can,.compose-linkstatus.cannot{
  border-color:color-mix(in srgb,rgb(var(--tone)) var(--tone-line),transparent);
  background:color-mix(in srgb,rgb(var(--tone)) var(--tone-tint),rgb(var(--surface)))}
/* the two link-status lines keep a toned text, read through the AA-safe --tone-mix (their legacy 72 percent
   amber sat at 3.6:1 on the tint) */
.compose-linkstatus.can,.compose-linkstatus.cannot{color:color-mix(in srgb,rgb(var(--tone)) var(--tone-mix),rgb(var(--text)))}
.notice p{margin:0}
.notice p+p{margin-top:var(--sp-1,4px)}
.notice-title,.notice>b{font-weight:600;color:color-mix(in srgb,rgb(var(--tone)) var(--tone-mix),rgb(var(--text)))}
.notice-title{display:block;margin:0 0 2px}
.notice-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2,8px);margin-top:var(--sp-2,8px)}
/* WI-02 reviewer A2: pin an explicit AA-safe link ink on notices (light here, dark mirror below). The
   underline behaviour is untouched (none at rest, underline on hover, per the base a rules). */
.notice a{font-weight:500;color:rgb(var(--accent))}
.seg-confirm{border-style:dashed} /* pending: the one state that keeps a dashed line */

/* ---------- hint (one line under a control) and footnote (page level). The legacy hint classes become
   selector-list aliases; margins are left to each legacy rule so no layout moves. ---------- */
.hint,.footnote,.privacy,.seg-hint,.aud-note,.compose-hint,.role-hint,.role-row .role-hint,.versions-note,.coedit-note,
.share-note,.prov,.tsub,.field .hint,.form-actions .hint,.remix .hint,.receipt-where,.receipt-hint,.req-msg,.sig-explain,
.link-card .link-off,.vis-card .vis-lock,.flash .forge-note,.ms-empty{
  font-size:var(--fs-sm,12px);line-height:1.5;font-weight:400;letter-spacing:0;text-transform:none;color:rgb(var(--ink-muted))}
.hint{margin:var(--sp-1,4px) 0 0}
.footnote,.prov,.versions-note{margin:var(--sp-6,24px) 0 0;line-height:1.6;max-width:80ch}
.hint b,.footnote b{color:rgb(var(--ink));font-weight:500}

/* ---------- settings list: label column + control column, one hairline between rows ---------- */
.settings-list{display:flex;flex-direction:column;margin:0;padding:0;min-width:0;list-style:none}
.settings-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp-4,16px);align-items:start;
  padding:var(--sp-4,16px) 0;min-width:0}
.settings-row+.settings-row{border-top:1px solid rgb(var(--border))}
.settings-list>.settings-row:first-child{padding-top:0}
.settings-list>.settings-row:last-child{padding-bottom:0}
.settings-label{margin:0;padding-top:2px;font-size:var(--fs-13,13px);font-weight:500;line-height:1.45;color:rgb(var(--ink-muted));
  min-width:0;overflow-wrap:anywhere}
.settings-label b{color:rgb(var(--ink));font-weight:600}
.settings-label .hint{display:block}
.settings-control{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2,8px);min-width:0}
.settings-control>p{margin:0}
.settings-control>form{margin:0}
.settings-control .chip-row,.settings-control .grant-list{margin:0}

/* ---------- receipt line: label, read-only address, one copy button ---------- */
.receipt-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2,8px);margin:0;min-width:0}
.receipt-line>label,.receipt-label{flex:1 1 100%;display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2,8px);
  font-size:var(--fs-sm,12px);font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:rgb(var(--ink-muted))}
.receipt-line input{flex:1 1 200px;min-width:0;width:auto;height:var(--h-md,38px);padding:0 var(--sp-3,12px);
  border:1px solid rgb(var(--border));border-radius:var(--r-sm,var(--r-focus));background:rgb(var(--surface-2));color:rgb(var(--ink));
  font:500 var(--fs-13,13px)/1 var(--ff-m);letter-spacing:0;text-transform:none;text-overflow:ellipsis;cursor:text;user-select:all;
  transition:border-color .16s,box-shadow .16s}
.receipt-line input:hover{border-color:rgb(var(--border-strong))}
.receipt-line .btn{flex:none}
.receipt-line .btn[data-copied]{border-color:rgb(var(--ok)/.6);color:color-mix(in srgb,rgb(var(--ok)) 66%,rgb(var(--text)))}
.receipt-line>.hint{flex:1 1 100%;margin:0}
.receipt-label .hint,.receipt-line>label .hint{flex:none;margin:0}

/* ---------- one chip family: .tag resolves to .chip, .pill to .chip.sm; .aud-seg shares the tones ---------- */
.chip,.tag{height:22px;padding:0 10px;font-size:var(--fs-xs,11px)}
.chip.sm,.pill{height:18px;padding:0 8px;gap:4px;font-size:var(--fs-xs,11px)}
.tone-neutral{--tone:var(--ink-muted);--tone-mix:66%}
.tone-accent,.aud-seg.tone-team{--tone:var(--accent);--tone-mix:68%}
.tone-ok,.aud-seg.tone-editor{--tone:var(--ok);--tone-mix:66%}
.tone-attention,.aud-seg.tone-company{--tone:var(--mine);--tone-mix:54%}
.tone-danger,.chip.danger,.tag.danger,.pill.danger,.aud-seg.tone-warn{--tone:var(--bad);--tone-mix:66%}
.tone-violet,.aud-seg.tone-group{--tone:var(--booth);--tone-mix:66%}
.aud-seg.tone-coowner{--tone:var(--accent);--tone-mix:68%}
:is(.chip,.tag,.pill,.aud-seg):is(.tone-neutral,.tone-accent,.tone-ok,.tone-attention,.tone-danger,.tone-violet,.tone-team,.tone-editor,.tone-company,.tone-warn,.tone-group,.tone-coowner),
.chip.danger,.tag.danger,.pill.danger{
  background:color-mix(in srgb,rgb(var(--tone)) var(--chip-tint),rgb(var(--surface)));
  color:color-mix(in srgb,rgb(var(--tone)) var(--tone-mix),rgb(var(--text)));
  border-color:color-mix(in srgb,rgb(var(--tone)) 40%,transparent)}
:is(.chip,.tag,.pill).tone-danger,.chip.danger,.tag.danger,.pill.danger{font-weight:600}
/* WI-02 reviewer A3: the .aud-seg sub-label reads through the same --tone/--tone-mix channel as the
   segment, so every tone clears AA in light and dark. The legacy per-tone small (kept above for
   templates that have not migrated) sat one shade too light on the tint; this matches specificity and
   wins by source order. ---------- */
.aud-seg.tone-team small,.aud-seg.tone-company small,.aud-seg.tone-group small,.aud-seg.tone-editor small,.aud-seg.tone-warn small,.aud-seg.tone-coowner small{
  color:color-mix(in srgb,rgb(var(--tone)) var(--tone-mix),rgb(var(--ink)))}

/* ---------- cards: the flat nested card carries no shadow (the section carries the one e1);
   e3 stays reserved to overlays (cmdk, dir-list) ---------- */
.card.flat{box-shadow:none;background:rgb(var(--surface));border-color:rgb(var(--border));padding:var(--sp-4,16px);border-radius:var(--r-lg,16px);gap:var(--sp-3,12px)}
.card.flat:hover{transform:none;box-shadow:none;border-color:rgb(var(--border))}
.card .card,.drawer .card,.settings-list .card{box-shadow:none}

/* ---------- buttons: .btn.text is the tertiary, link-weight action (no border, --h-sm) ---------- */
.btn.text{height:var(--h-sm,32px);padding:0 var(--sp-2,8px);border-color:transparent;background:transparent;box-shadow:none;
  color:rgb(var(--accent));font-weight:500}
.btn.text:hover{background:rgb(var(--accent)/.08);color:rgb(var(--accent-press));text-decoration:none;filter:none}
.btn.text.danger{color:color-mix(in srgb,rgb(var(--bad)) 80%,rgb(var(--text)));background:transparent;border-color:transparent}
.btn.text.danger:hover{background:rgb(var(--bad)/.08);filter:none}
.btn.text:disabled,.btn.text.is-disabled{background:transparent}

/* ---------- drawer: <details> with a quiet summary row; chevron is the same inline SVG as .field select ---------- */
.drawer{margin:0;min-width:0;border:1px solid rgb(var(--border));border-radius:var(--r-md,var(--r-chip));background:rgb(var(--surface))}
.drawer+.drawer{margin-top:var(--sp-2,8px)}
.drawer>summary{list-style:none;display:flex;align-items:center;gap:var(--sp-2,8px);min-height:var(--h-md,38px);
  padding:var(--sp-2,8px) var(--sp-4,16px);border-radius:inherit;
  font-size:var(--fs-13,13px);font-weight:500;line-height:1.4;color:rgb(var(--ink));cursor:pointer;user-select:none}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary::marker{content:""}
.drawer>summary::after{content:"";flex:none;width:16px;height:16px;margin-left:auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A867E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  transition:transform .18s var(--ease-out-soft)}
.drawer>summary:hover{background:rgb(var(--surface-2)/.6)}
.drawer[open]>summary{border-bottom:1px solid rgb(var(--border));border-radius:var(--r-md,var(--r-chip)) var(--r-md,var(--r-chip)) 0 0}
.drawer[open]>summary::after{transform:rotate(180deg)}
.drawer>summary .chip,.drawer>summary .pill{flex:none}
.drawer>summary small{font-size:var(--fs-sm,12px);font-weight:400;color:rgb(var(--ink-muted))}
.drawer>:not(summary){padding-inline:var(--sp-4,16px)}
.drawer>summary+*{padding-top:var(--sp-4,16px)}
.drawer>:not(summary):last-child{padding-bottom:var(--sp-4,16px)}
.drawer-body{display:flex;flex-direction:column;gap:var(--sp-3,12px);margin:0}
/* quiet variant: no box, for the small in-row disclosures (Motif, Envoyer par mail, Autres façons) */
.drawer.quiet{border:0;background:transparent;border-radius:0}
.drawer.quiet>summary{padding-inline:0;min-height:var(--h-sm,32px);width:max-content;max-width:100%;color:rgb(var(--ink-muted))}
.drawer.quiet>summary:hover{background:transparent;color:rgb(var(--ink))}
.drawer.quiet>summary::after{margin-left:0}
.drawer.quiet[open]>summary{border-bottom:0}
.drawer.quiet>:not(summary){padding-inline:0}
.drawer.quiet>summary+*{padding-top:var(--sp-2,8px)}
.drawer.quiet>:not(summary):last-child{padding-bottom:0}

/* ---------- plus-menu: header overflow as a CSS-only <details>; the list is an absolutely positioned
   .card.flat lifted to e2. On phones the sticky header is the containing block, so the list spans it. ---------- */
.plus-menu{position:relative;margin:0}
.plus-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:var(--r-chip);
  color:rgb(var(--ink-muted));font-size:var(--fs-13,14px);font-weight:500;line-height:1.4;cursor:pointer;user-select:none;white-space:nowrap}
.plus-menu>summary::-webkit-details-marker{display:none}
.plus-menu>summary::marker{content:""}
.plus-menu>summary::after{content:"";flex:none;width:12px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A867E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/12px 12px;
  transition:transform .18s var(--ease-out-soft)}
.plus-menu>summary:hover,.plus-menu[open]>summary{color:rgb(var(--ink));background:rgb(var(--surface-2))}
.plus-menu[open]>summary::after{transform:rotate(180deg)}
.plus-menu>.card,.plus-menu>.card.flat,.plus-menu>.card.flat:hover{position:absolute;top:calc(100% + 6px);left:0;z-index:120;
  min-width:220px;max-width:calc(100vw - 32px);margin:0;padding:6px;gap:2px;transform:none;
  border:1px solid rgb(var(--border-strong));border-radius:var(--r-md,var(--r-chip));background:rgb(var(--surface));box-shadow:var(--e2)}
.plus-menu .card a{display:flex;align-items:center;gap:var(--sp-2,8px);padding:8px 10px;border-radius:var(--r-sm,var(--r-focus));
  color:rgb(var(--ink));font-size:var(--fs-13,13px);font-weight:500;line-height:1.4;white-space:nowrap}
.plus-menu .card a:hover{background:rgb(var(--surface-2));color:rgb(var(--ink));text-decoration:none}
.plus-menu .card a .chip,.plus-menu .card a .pill{margin-left:auto}
.plus-menu .card hr{margin:4px 2px;border:0;border-top:1px solid rgb(var(--border))}
/* account menu (the signed-in address, last in the header): its list opens under it, aligned right */
.me-menu>.card,.me-menu>.card.flat,.me-menu>.card.flat:hover{left:auto;right:0}
/* the visible side-effect line under "Switch account": aligned with the entry's text, wraps (the entries do not) */
.me-menu .card .me-menu-note{margin:0;padding:0 10px 6px;max-width:34ch;white-space:normal}

/* ---------- dashed is pending only: the structural separators become 1px solid; empty and masked
   sit solid-faint on surface-2 ---------- */
.facts dl>div,.signal{border-bottom-style:solid}
.aud-bar,.share,.tpl-form{border-top-style:solid}
.empty,.masked{border:1px solid rgb(var(--faint)/.55);background:rgb(var(--surface-2));color:rgb(var(--ink-muted))}

/* ---------- focus, two recipes: an outline for buttons, links, chips and summaries (pill shapes keep
   their radius); border + glow for the text fields inside the new containers ---------- */
.btn:focus-visible,a.chip:focus-visible,a.tag:focus-visible,a.pill:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:2px;border-radius:var(--r-pill)}
.drawer>summary:focus-visible,.plus-menu>summary:focus-visible,.settings-control a:focus-visible,.notice a:focus-visible{
  outline:2px solid rgb(var(--accent));outline-offset:2px}
.drawer>summary:focus-visible{outline-offset:-2px;border-radius:inherit}
.settings-control :is(input:not([type="checkbox"],[type="radio"]),select,textarea):focus-visible,
.drawer :is(input:not([type="checkbox"],[type="radio"]),select,textarea):focus-visible,
.receipt-line input:focus-visible{outline:none;border-color:rgb(var(--accent)/.7);box-shadow:var(--glow);animation:none}

/* ---------- high-contrast mirror: 2px lines, ink for secondary text, more ink in the tone text ---------- */
:root[data-contrast="high"] .notice,:root[data-contrast="high"] .callout,:root[data-contrast="high"] .receipt,
:root[data-contrast="high"] .drawer,:root[data-contrast="high"] .card.flat,:root[data-contrast="high"] .plus-menu>.card,
:root[data-contrast="high"] .receipt-line input{border-width:2px}
:root[data-contrast="high"] .settings-row+.settings-row{border-top-width:2px}
:root[data-contrast="high"] .hint,:root[data-contrast="high"] .footnote,:root[data-contrast="high"] .settings-label,
:root[data-contrast="high"] .receipt-label,:root[data-contrast="high"] .receipt-line>label,:root[data-contrast="high"] .drawer>summary small,
:root[data-contrast="high"] .plus-menu>summary{color:rgb(var(--muted))}
:root[data-contrast="high"] .chip,:root[data-contrast="high"] .tag,:root[data-contrast="high"] .pill,:root[data-contrast="high"] .aud-seg,
:root[data-contrast="high"] .notice,:root[data-contrast="high"] .callout{--tone-mix:45%}
:root[data-contrast="high"] .btn.text{text-decoration:underline;text-underline-offset:3px}
:root[data-contrast="high"] .empty,:root[data-contrast="high"] .masked{border-color:rgb(var(--border-strong))}

/* ---------- phone ---------- */
@media (max-width:640px){
  .settings-row{grid-template-columns:1fr;gap:var(--sp-2,8px);padding:var(--sp-3,12px) 0}
  .settings-label{padding-top:0}
  .notice,.callout{padding:var(--sp-3,12px)}
  .drawer>summary,.drawer>:not(summary){padding-inline:var(--sp-3,12px)}
  .drawer.quiet>summary,.drawer.quiet>:not(summary){padding-inline:0}
  .plus-menu{position:static}
  .plus-menu>.card,.plus-menu>.card.flat,.plus-menu>.card.flat:hover{left:16px;right:16px;top:100%;min-width:0;max-width:none}
}

/* ---------- print ---------- */
@media print{
  .plus-menu,.receipt-line .btn,.btn.text,.notice .btn,.notice-actions,.drawer>summary::after{display:none!important}
  .notice,.callout,.receipt,.drawer,.card.flat{border-color:#bbb;background:#fff;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .drawer>summary,.drawer>:not(summary){padding-inline:0}
  .settings-row{grid-template-columns:1fr;gap:4px}
  .settings-row+.settings-row{border-top-color:#bbb}
  .receipt-line input{border:0;padding:0;height:auto;background:#fff;color:#111}
}
/* WI-06 hooks (verifier F3): classification line, renewal notice spacing, hero list spacing */
.class-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2,8px)}
.renew-notice{margin-top:var(--sp-2,8px)}
.partage .settings-list{margin-top:var(--sp-3,12px)}
/* WI-07 fixes (F5): the by-person control reads as grouped blocks with one vertical rhythm. Order inside
   .share-people: the composer, the audience caption + live bar, the grant lists (Lecteurs, Groupes Entra;
   in simple mode Éditeurs and Co-propriétaires), the pending requests, the SSO drawer. Each list heads
   with .grant-head; a hairline separates two blocks. Tokens only, the caption keeps the AA-tuned .hint. */
.share-people{display:flex;flex-direction:column;gap:var(--sp-2,8px);min-width:0}
.share-people>p,.share-people>form,.share-people>.notice{margin:0}
.compose-form,.compose-compact{display:flex;flex-direction:column;gap:var(--sp-2,8px);margin:0}
.compose-form>p,.compose-form .form-actions,.compose-ext p{margin:0}
.share-people .aud-cap{margin:0;padding-top:var(--sp-2,8px);border-top:1px solid rgb(var(--border))}
.share-people .aud-bar{margin:0;padding-top:0;border-top:0}
.grant-lists{display:flex;flex-direction:column;gap:var(--sp-3,12px);padding-top:var(--sp-3,12px);border-top:1px solid rgb(var(--border))}
.grant-block{display:flex;flex-direction:column;gap:var(--sp-2,8px);min-width:0}
.grant-lists>.grant-block+.grant-block,.share-people>.grant-block.requests{padding-top:var(--sp-3,12px);border-top:1px solid rgb(var(--border))}
.grant-head{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2,8px);font-size:var(--fs-13,13px);line-height:1.45;color:rgb(var(--ink))}
.grant-head b{font-weight:600}
.grant-head .hint,.grant-block>.hint,.share-inert{margin:0}
.grant-block>.empty.compact{padding:var(--sp-2,8px) var(--sp-3,12px);text-align:left;font-size:var(--fs-13,13px)}
.share-people>.drawer{margin-top:var(--sp-1,4px)}
/* nested variant (simple mode, inside the Visibilité control): air after the receipt, a hairline before the classification line */
.receipt-line+.share-people,.settings-control>.hint+.share-people{margin-top:var(--sp-1,4px)}
.share-people+.class-line{margin-top:var(--sp-1,4px);padding-top:var(--sp-3,12px);border-top:1px solid rgb(var(--border))}
:root[data-contrast="high"] .share-people .aud-cap,:root[data-contrast="high"] .grant-lists,
:root[data-contrast="high"] .grant-lists>.grant-block+.grant-block,:root[data-contrast="high"] .share-people>.grant-block.requests,
:root[data-contrast="high"] .share-people+.class-line{border-top-width:2px}
/* ---------- end of COMPONENTS V2 ---------- */

/* ---------- catalogue card owner line + "Customize view" (item A, 2026-09-28) ---------- */
/* Owner-forward card meta: an initials avatar + display name, the relative "updated" label, and the
   opt-in fields chosen through the toolbar control. No external image (CSP img-src 'self' data:). */
.card-meta{align-items:center}
.owner{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;font-size:var(--fs-13);color:rgb(var(--ink))}
/* Raise the owner meta above a card's stretched link (.card.link a.stretch::after sits at z-index 0) so the
   full-name title tooltip is reachable on hover when the name is ellipsised. It carries no link of its own,
   so raising it does not steal the card's click target. */
.card.link .owner{position:relative;z-index:1}
.owner .avatar{flex:none;width:22px;height:22px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;line-height:1;color:rgb(var(--accent));
  background:color-mix(in srgb,rgb(var(--accent)) 16%,rgb(var(--surface)));border:1px solid color-mix(in srgb,rgb(var(--accent)) 34%,transparent)}
/* Profile photo over the initials (avatar.go): the <img> is absolutely positioned over the initials text and
   is transparent while it loads. The hub emits it only once the photo is cached, so a failed load is the rare
   transitional case (cache cleared between render and load); there, Chromium and Firefox paint a broken-image
   glyph even with alt="" once the box is sized, and they also render pseudo-elements on a broken <img>: the
   ::before repaints the avatar ground and the ::after the initials from data-initials, so the card never shows
   a glyph. No script, no onerror. (WebKit paints nothing for a broken alt="" image: the initials show through.) */
.owner .avatar{position:relative;overflow:hidden}
.owner .avatar .avatar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:transparent;display:block;color:rgb(var(--accent))}
.owner .avatar .avatar-img::before{content:"";position:absolute;inset:0;border-radius:inherit;background:color-mix(in srgb,rgb(var(--accent)) 16%,rgb(var(--surface)))}
.owner .avatar .avatar-img::after{content:attr(data-initials);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;line-height:1}
.owner .owner-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}
.chip.more{height:20px;padding:0 7px;font-size:var(--fs-xs);font-weight:600;color:rgb(var(--ink-muted));background:rgb(var(--surface-2));border-color:rgb(var(--border))}
.upd{font-size:var(--fs-sm);color:rgb(var(--ink-muted));white-space:nowrap}
.chip.vis{gap:5px;color:rgb(var(--ink-muted));background:rgb(var(--surface-2));border-color:rgb(var(--border));text-transform:none;letter-spacing:0;font-weight:500}
.vis-icon{width:13px;height:13px;flex:none}
.catalogue td .owner{font-size:var(--fs-sm)}
.catalogue td .owner .owner-name{max-width:14ch}

/* The customize control sits on its own toolbar row, right-aligned next to the grid/table toggle above. */
.cat-tools{display:flex;justify-content:flex-end;margin:-4px 0 14px}
.view-customize{position:relative}
.view-customize>summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:7px}
.view-customize>summary::-webkit-details-marker{display:none}
.view-customize>summary::marker{content:""}
.view-customize>summary svg{width:15px;height:15px;flex:none}
.view-customize[open]>summary{border-color:rgb(var(--accent)/.6);color:rgb(var(--accent))}
.view-customize-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;max-width:min(280px,90vw);
  display:flex;flex-direction:column;gap:2px;margin:0;padding:8px;background:rgb(var(--surface));
  border:1px solid rgb(var(--border));border-radius:var(--r-md);box-shadow:var(--e1),0 10px 30px -12px rgb(28 27 25/.28)}
.vc-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);font-size:var(--fs-13);
  color:rgb(var(--ink));cursor:pointer}
.vc-item:hover{background:rgb(var(--surface-2))}
.vc-item input{flex:none;accent-color:rgb(var(--accent))}
.vc-actions{display:flex;gap:8px;margin-top:6px;padding-top:8px;border-top:1px solid rgb(var(--border))}
.vc-actions .btn{flex:1;justify-content:center}
:root[data-contrast="high"] .view-customize-menu,:root[data-contrast="high"] .owner .avatar{border-width:2px}
@media (max-width:560px){.view-customize-menu{right:auto;left:0}}

/* proposed versions (proposals.go): escaped text diffs on the review page */
pre.diff{white-space:pre-wrap;word-break:break-word;font-size:.82rem;line-height:1.45;max-height:60vh;overflow:auto}
pre.diff .d-hunk{display:block;opacity:.6;margin-top:.6em}
pre.diff .d-add{display:block;background:rgba(80,200,120,.16);text-decoration:none}
pre.diff .d-del{display:block;background:rgba(240,90,90,.14);text-decoration:none}
pre.diff .d-ctx{display:block}
.proposal-row{padding:10px 0;border-top:1px solid rgb(var(--border))}
.proposal-row:first-child{border-top:0}
.proposal-row blockquote{margin:.3em 0;font-style:italic}
.proposal-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.proposal-opts{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}

/* ---------- group roles (roles.go): the dossier's "Who has a role" list, the group page's role table and the
   admin access map. A row wraps on a phone; the role chip leads, the holder follows, the notes fall under. ---------- */
.role-list{display:flex;flex-direction:column;gap:8px}
.grant-list.role-rows>li{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:6px 0;border-bottom:1px solid rgb(var(--border))}
.grant-list.role-rows>li:last-child{border-bottom:0}
.role-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.role-head .chip{flex:none}
.role-who{font-weight:500;overflow-wrap:anywhere;min-width:0}
.role-who code{font-size:var(--fs-sm)}
.role-rows .hint{margin:0;font-size:var(--fs-sm)}
.role-head form.inline{margin-left:auto}
.role-notes{display:flex;flex-direction:column;gap:2px;padding-left:2px}
.role-members{font-size:var(--fs-sm)}
.role-members ul{margin:4px 0 0 16px;padding:0;list-style:disc}
.role-members ul li{display:list-item}
.grp-uses td,.access-table td{vertical-align:top}
.access-table .chip,.access-person .chip,.access-group .chip{margin:1px 2px 1px 0}
/* access map (review 23/10): a chip never breaks inside a word; a long address ends in an ellipsis (full text in
   its title) instead of "coowner.perso n@dedale.co m"; the owner cell wraps; the role columns keep a usable
   width, so one long address no longer squeezes every row. */
.access-table .chip{display:inline-block;max-width:100%;height:auto;min-height:18px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;word-break:normal;overflow-wrap:normal;line-height:1.35;padding-block:1px;vertical-align:top}
.access-table td{min-width:0}
/* desktop: fixed column shares, so one long address can never widen a column past the table (chips ellipsize) */
.access-table{table-layout:fixed;width:100%}
.access-table th:nth-child(1){width:15%}.access-table th:nth-child(2){width:9%}.access-table th:nth-child(3){width:17%}
.access-table th:nth-child(4),.access-table th:nth-child(5),.access-table th:nth-child(6){width:19.66%}
.access-table .acc-owner{overflow-wrap:anywhere}
.access-table .acc-art{overflow-wrap:anywhere}
.access-table .acc-vis .chip{white-space:nowrap}
.acc-group{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;margin:1px 4px 3px 0;max-width:100%}
.acc-note{font-size:var(--fs-xs,11px)}
.acc-ref{font-family:var(--ff-m,ui-monospace,monospace);font-size:var(--fs-xs,11px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* a role or visibility chip in the group page's table and the access map's lists stays one readable pill */
.grp-uses .chip,.access-group .grant-list .chip,.access-person .chip{flex:none;white-space:nowrap;word-break:normal;overflow-wrap:normal}
.access-group .grant-list>li,.access-person .grant-list>li{flex-wrap:wrap;justify-content:flex-start;gap:4px 8px}
.access-group .grant-list code,.access-person .grant-list code{white-space:nowrap;overflow-wrap:normal}
.grp-uses code{overflow-wrap:anywhere}
.grp-uses td:nth-child(2),.grp-uses th:nth-child(2){min-width:8.5rem}
/* phone: each artefact is a card with labelled Owner / Co-owners / Editors / Readers blocks (no hidden columns) */
@media (max-width:900px){
  .table-wrap:has(> .access-table){overflow-x:visible}
  .access-table,.access-table tbody,.access-table tr,.access-table td{display:block;width:auto}
  .access-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .access-table tr{border:1px solid rgb(var(--border));border-radius:var(--r-md,10px);padding:10px 12px;margin:0 0 10px}
  .access-table td{border:0;padding:4px 0;min-width:0;max-width:none}
  .access-table td::before{content:attr(data-label);display:block;font-size:var(--fs-xs,11px);font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;color:rgb(var(--ink-muted))}
  .access-table td.acc-art::before{display:none}
  .access-table{table-layout:auto}
}
.access-admins{display:block;margin-top:2px}
.access-table .chip code{background:transparent;border:0;padding:0;font-size:var(--fs-xs,11px);overflow-wrap:anywhere}
.access-filters .form-row{flex-wrap:wrap}
/* the dossier's group picker: the two selects stack under 600 px, so "Board meeting (9) · already co-owner here"
   is never cut */
#group-picker{flex-wrap:wrap}
#group-picker .field{flex:1 1 16rem;min-width:0}
#group-picker select{width:100%;max-width:100%}
@media (max-width:600px){#group-picker .field{flex-basis:100%}}
.grp-uses-summary{margin:0 0 8px;font-weight:500}
/* the audience bar carries longer notes since group roles ("Board meeting · sharing group · 8 members · co-owner"):
   a segment wraps its note under the holder instead of squeezing the reference on a phone */
.aud-seg{flex-wrap:wrap;row-gap:2px}
.aud-seg small{white-space:normal;min-width:0}
.aud-seg code{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}