/* ═══════════════════════════════════════════════════════════
   Sentinel — App V2 · design « Cockpit Ma veille » 2a
   Source Serif 4, palette chaude. Gris info corrigés WCAG AA.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-warm: #fbfaf7;
  --sidebar: #f6f5f2;
  --line: #e3e1db;
  --line-2: #eceae4;
  --line-3: #f0eee8;
  --line-row: #f3f1eb;
  --ink: #1c1c21;
  --ink-2: #2a2a30;
  --strong: #3b3b42;
  --muted: #55555c;      /* 7.4:1 */
  --secondary: #6b6b72;  /* 5.1:1 — sous-lignes, labels, compteurs (AA) */
  --accent: #2e3fd1;
  --accent-hover: #1f2ca0;
  --accent-soft: #e9eafb;
  --accent-mark: #3346d3;
  --green: #1f9d62;       /* points/pastilles */
  --green-ink: #158048;   /* 5.0:1 — texte « sources actives », « rien à signaler » */
  --green-soft: #e1f3ea;
  --amber: #c77d0a;       /* points */
  --amber-ink: #8a6410;   /* 5.4:1 — labels/statuts ambre */
  --amber-soft: #fcf3e2;
  --amber-line: #f0ddb4;
  --amber-card: #fffdf8;
  --amber-card-line: #efe3c6;
  --red: #c24e3f;         /* points */
  --red-ink: #a8433a;     /* 5.9:1 — statut panne */
  --purple: #7c5cd6;
  --radius: 14px;
  --radius-card: 12px;
  --radius-ctl: 10px;
  --shadow-app: 0 2px 16px rgba(30,30,40,0.06);
  --shadow-sm: 0 1px 2px rgba(30,30,40,0.05);
  --font: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* teintes d'avatar (bg / ink) */
  --av-blue-bg:#e4e7fb; --av-blue-fg:#4353d8;
  --av-orange-bg:#fbeddd; --av-orange-fg:#b45908;
  --av-purple-bg:#eee9fb; --av-purple-fg:#6d49c8;
  --av-green-bg:#e1f3ea; --av-green-fg:#158048;
  --av-gray-bg:#efede8; --av-gray-fg:#6b6b72;
}

:root[data-theme="dark"] {
  --bg: #17171a;
  --surface: #1e1e22;
  --surface-warm: #1b1b1f;
  --sidebar: #1a1a1d;
  --line: #2e2e33;
  --line-2: #29292e;
  --line-3: #252529;
  --line-row: #242428;
  --ink: #edece7;
  --ink-2: #e4e3dd;
  --strong: #d6d5cf;
  --muted: #b3b2ab;
  --secondary: #97968f;   /* AA sur surface sombre */
  --accent: #8896ff;
  --accent-hover: #a6b0ff;
  --on-accent: #17171a;   /* 7:1 sur l'accent clair — blanc n'y tenait que 2.4:1 */
  --accent-soft: #22263c;
  --accent-mark: #4353d8;
  --green: #3fbd7c;
  --green-ink: #63c793;
  --green-soft: #17271e;
  --amber: #e0a24a;
  --amber-ink: #e2ab5c;
  --amber-soft: #251d10;
  --amber-line: #40331a;
  --amber-card: #211c12;
  --amber-card-line: #3a3018;
  --red: #dd7a6c;
  --red-ink: #e28a7d;
  --purple: #a488e6;
  --shadow-app: 0 2px 20px rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --av-blue-bg:#20263f; --av-blue-fg:#9fabff;
  --av-orange-bg:#2c2113; --av-orange-fg:#e0a763;
  --av-purple-bg:#241d38; --av-purple-fg:#b39cec;
  --av-green-bg:#152a1f; --av-green-fg:#63c793;
  --av-gray-bg:#28282c; --av-gray-fg:#97968f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Shell ───────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.sb {
  background: var(--sidebar);
  border-right: 1px solid var(--line-2);
  padding: 20px 14px 16px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sb-ws { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
.sb-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-mark); flex-shrink: 0; }
.sb-ws b { font-size: 16px; font-weight: 700; display: block; letter-spacing: -.01em; }
.sb-ws small { font-size: 12.5px; color: var(--secondary); font-weight: 400; }

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; color: var(--strong);
  font-size: 15px; transition: background .12s, color .12s;
}
.sb-item:hover { background: var(--line-2); }
.sb-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sb-item svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.sb-sechdr { display: flex; align-items: center; padding: 24px 10px 8px; }
.sb-sechdr span:first-child { font-size: 11.5px; letter-spacing: .12em; color: var(--secondary); }
.sb-add { margin-left: auto; color: var(--secondary); font-size: 17px; line-height: 1; cursor: pointer; }
.sb-add:hover { color: var(--accent); }

.sb-folders { display: flex; flex-direction: column; gap: 1px; }
.sb-folder {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: 8px; font-size: 14.5px; color: var(--strong); transition: background .12s;
}
.sb-folder:hover { background: var(--line-2); }
.sb-folder .fdot { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }
.sb-folder .cnt { margin-left: auto; color: var(--secondary); font-size: 13px; }
.sb-folder.newf { color: var(--secondary); font-size: 14px; }
.sb-folder.newf:hover { color: var(--accent); }

.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.sb-new {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-ctl);
  padding: 10px 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink-2);
  box-shadow: var(--shadow-sm); transition: border-color .12s;
}
.sb-new:hover { border-color: #c8c6be; }
.sb-user { display: flex; align-items: center; gap: 9px; padding: 0 8px; font-size: 14px; color: var(--strong); }
.sb-theme { margin-left: auto; color: var(--secondary); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; }
.sb-theme:hover { background: var(--line-2); color: var(--ink); }
.sb-theme svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* avatars */
.av { border-radius: 99px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.av-sm { width: 24px; height: 24px; font-size: 10px; }
.av-md { width: 26px; height: 26px; font-size: 11px; }
.av-lg { width: 28px; height: 28px; font-size: 12px; }
.avstack { display: flex; align-items: center; }
.avstack .av + .av { margin-left: -7px; border: 2px solid var(--surface); }
.avstack.on-warm .av { border-color: var(--surface-warm); }

/* ── Main ────────────────────────────────────────────────── */
.main { padding: 28px 36px 40px; display: flex; flex-direction: column; }
.eyebrow { font-size: 14px; color: var(--secondary); }
.greet { font-size: 32px; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; }
.status { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 16px; flex-wrap: wrap; }
.status .sdot { width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0; }
.status b { font-weight: 700; }
.status .rest { color: var(--muted); }

/* bandeau actionnable */
.banner {
  margin-top: 20px; background: var(--amber-soft); border: 1px solid var(--amber-line);
  border-radius: var(--radius-ctl); padding: 13px 18px; display: flex; align-items: center; gap: 12px;
}
.banner svg { width: 17px; height: 17px; stroke: var(--amber); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.banner .bt { font-size: 15px; color: var(--amber-ink); flex: 1; }
.banner .bt b { font-weight: 700; }
.banner .bact { background: var(--surface); border: 1px solid var(--amber-line); border-radius: 8px; padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--amber-ink); white-space: nowrap; }
.banner .bact:hover { border-color: #c9ac66; }

/* en-tête de section */
.shdr { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.shdr .lbl { font-size: 12px; letter-spacing: .13em; font-weight: 600; color: var(--secondary); }
.shdr.warn .lbl { color: var(--amber-ink); }
.shdr .rule { height: 1px; flex: 1; background: var(--line-2); }
.shdr.warn .rule { background: var(--amber-line); }
.shdr .lnk { font-size: 13px; color: var(--secondary); }
.shdr .lnk:hover { color: var(--accent); }

/* grille de ligne : veille | créée par | destinataires | santé | chevron */
.rowgrid { display: grid; grid-template-columns: 1fr 156px 122px 176px 88px 16px; align-items: center; gap: 14px; }

/* cartes À vérifier */
.attn { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.attn-card {
  background: var(--amber-card); border: 1px solid var(--amber-card-line);
  border-radius: var(--radius-ctl); padding: 14px 20px; transition: border-color .12s;
}
.attn-card:hover { border-color: #dec98f; }
.vtitle { display: flex; align-items: center; gap: 8px; }
.vtitle .nm { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.vsub { font-size: 13.5px; color: var(--secondary); margin-top: 2px; }
.pill-priv { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; background: var(--sidebar); font-weight: 400; }
.tag-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--secondary); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px 2px 7px; background: var(--surface); font-weight: 400; }
.tag-pill .tdot { width: 6px; height: 6px; border-radius: 99px; flex-shrink: 0; }
.attn-card .vlead { display: flex; align-items: flex-start; gap: 12px; }
.attn-card .vlead .vd { width: 9px; height: 9px; border-radius: 99px; margin-top: 7px; flex-shrink: 0; }
.creator { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.health { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.health .hd { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }
.health.ok { color: var(--muted); }
.health.ok .hd { background: var(--green); }
.health.warn { color: var(--amber-ink); font-weight: 600; }
.health.warn .hd { background: var(--amber); }
.health.bad { color: var(--red-ink); font-weight: 600; }
.health.bad .hd { background: var(--red); }
.chev { color: #c4c4c8; font-size: 16px; text-align: right; }

/* dossiers */
.folders { display: flex; flex-direction: column; }
.folder { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.folder:first-child { margin-top: 14px; }
.fhead {
  display: flex; align-items: center; gap: 11px; padding: 14px 20px;
  background: var(--surface-warm); transition: background .12s;
}
.fhead:hover { background: var(--line-3); }
.fhead .caret { color: var(--secondary); font-size: 12px; width: 12px; }
.fhead .fdot { width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0; }
.fhead .fnm { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.fhead .fcnt { font-size: 13.5px; color: var(--secondary); }
.fhead .fhealth { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.fhead .fhealth.ok { color: var(--green-ink); }
.fhead .fhealth .fhd { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.fhead .fstack { margin-left: auto; }
.fhead .fmenu { color: #b3b3b8; font-size: 16px; padding: 0 2px; }
.fhead .fmenu:hover { color: var(--accent); }
.fhead.collapsed .fstack { margin-left: auto; }
.fhead.expanded { background: var(--surface-warm); }

.fcolhdr { padding: 8px 20px 6px; border-top: 1px solid var(--line-3); font-size: 11px; letter-spacing: .12em; color: var(--secondary); }
.frow { padding: 13px 20px; border-top: 1px solid var(--line-row); transition: background .12s; }
.frow:hover { background: var(--surface-warm); }
.frow .nm { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.frow .sub { font-size: 13px; color: var(--secondary); margin-top: 1px; }
.health.big { font-size: 14px; }

.newf-row {
  margin-top: 8px; border: 1px dashed var(--line); border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; font-size: 14px; color: var(--secondary);
}
.newf-row:hover { color: var(--accent); border-color: #b9bbe8; }

/* états */
.skel { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.skel-row { height: 64px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); position: relative; overflow: hidden; }
.skel-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(120,120,120,.06), transparent); transform: translateX(-100%); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.empty { text-align: center; padding: 72px 20px; color: var(--secondary); }
.empty h3 { font-size: 18px; color: var(--ink); margin-bottom: 8px; font-weight: 700; }
.empty p { font-size: 15px; max-width: 44ch; margin: 0 auto 22px; }
.empty .sb-new { display: inline-block; padding: 10px 22px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* responsive */
.drawer-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 90;
  width: 44px; height: 44px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  align-items: center; justify-content: center; }
.drawer-btn svg { width: 20px; height: 20px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; }
.drawer-veil { position: fixed; inset: 0; background: rgba(20,20,24,.38); z-index: 84; }

@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .drawer-btn { display: inline-flex; }
  /* la sidebar devient un tiroir complet : dossiers, quota, menu inclus */
  .sb { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); z-index: 85;
        transform: translateX(-102%); transition: transform .2s ease; overflow-y: auto;
        box-shadow: 0 0 40px rgba(0,0,0,.25); }
  body.drawer-open .sb { transform: translateX(0); }
  .main { padding: 64px 16px 40px; }
  .rowgrid { grid-template-columns: 1fr auto; }
  .rowgrid .creator, .fcolhdr { display: none; }
  .chev { display: none; }
  /* cibles tactiles ≥ 44px */
  .sb-item, .sb-folder { padding-top: 12px; padding-bottom: 12px; }
  .frow, [class*="row"].frow { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .sb { transition: none; } }


/* ── Maître-détail : vue dossier ─────────────────────────── */
.fview-head { display: flex; flex-direction: column; gap: 10px; }
.fview-head .back { font-size: 14px; color: var(--secondary); cursor: pointer; width: fit-content; }
.fview-head .back:hover { color: var(--accent); }
.fview-title { display: flex; align-items: center; gap: 11px; margin-top: 2px; }
.fview-title .fnm { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.fview-title .fcnt { font-size: 14px; color: var(--secondary); }
.fview-title .fdot { border-radius: 99px; flex-shrink: 0; }

.ftable { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.ftable .fcolhdr { border-top: none; background: var(--surface-warm); padding-top: 10px; padding-bottom: 8px; }
.gsep { display: flex; align-items: center; gap: 9px; padding: 10px 20px 8px; background: var(--surface-warm);
        border-top: 1px solid var(--line-3); font-size: 13px; font-weight: 700; color: var(--strong); }
.gsep .fdot { width: 8px; height: 8px; border-radius: 99px; }
.gsep .gcnt { color: var(--secondary); font-weight: 400; }

.hint { margin-top: 22px; font-size: 14px; color: var(--secondary); }

/* lignes en pause */
.frow.paused { opacity: .55; }
.frow.paused .nm { font-weight: 600; }
.health.off { color: var(--secondary); font-size: 14px; }
.health.off .hd { background: var(--secondary); opacity: .5; }

/* switch actif/pause */
.vswitch { width: 36px; height: 21px; border-radius: 99px; background: #d5d3cc; position: relative;
           transition: background .15s; flex-shrink: 0; padding: 0; }
.vswitch .knob { position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 99px;
                 background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.vswitch.on { background: var(--green); }
.vswitch.on .knob { left: 17.5px; }
:root[data-theme="dark"] .vswitch { background: #3a3a40; }

/* menu ⋯ des dossiers */
.sb-folder .fmenu, .fview-title .fmenu { color: var(--secondary); font-size: 15px; padding: 0 4px; border-radius: 6px; }
.sb-folder .fmenu { visibility: hidden; margin-left: 2px; }
.sb-folder:hover .fmenu { visibility: visible; }
.sb-folder .fmenu:hover, .fview-title .fmenu:hover { color: var(--accent); background: var(--line-2); }
.sb-folder .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-folder.all { font-weight: 600; }
.sb-folder.on { background: var(--accent-soft); color: var(--accent); }
.sb-folder.on .cnt { color: var(--accent); opacity: .7; }

.fmenu-pop { position: fixed; z-index: 50; background: var(--surface); border: 1px solid var(--line);
             border-radius: 10px; box-shadow: var(--shadow-app); padding: 6px; width: 196px; }
.fmenu-item { display: block; width: 100%; text-align: left; font-size: 14px; padding: 8px 10px;
              border-radius: 7px; color: var(--ink-2); }
.fmenu-item:hover { background: var(--line-2); }
.fmenu-lbl { font-size: 11px; letter-spacing: .08em; color: var(--secondary); padding: 8px 10px 4px; }
.fmenu-swatches { display: flex; gap: 6px; padding: 2px 10px 8px; flex-wrap: wrap; }
.swatch { width: 20px; height: 20px; border-radius: 99px; cursor: pointer; border: 2px solid transparent; }
.swatch:hover { border-color: var(--ink); }

/* badge "à vérifier" sur Ma veille */
.navbadge { margin-left: auto; background: var(--amber); color: #fff; font-size: 11px; font-weight: 700;
            border-radius: 99px; padding: 1px 7px; }


/* cellule actions : ∑ + switch */
.acts { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.sigbtn { width: 26px; height: 26px; border-radius: 8px; font-size: 15px; font-weight: 700;
          display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
          font-family: Georgia, serif; transition: background .12s, color .12s, border-color .12s; }
.sigbtn.on { background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; }
.sigbtn.on:hover { background: var(--accent); color: #fff; }
.sigbtn.off { background: transparent; color: var(--secondary); border: 1px dashed var(--line); }
.sigbtn.off:hover { color: var(--accent); border-color: var(--accent); }
.sigbtn.disabled { opacity: .45; cursor: not-allowed; }
.sigbtn.ghost { border: none; background: none; cursor: default; }

/* ── Écran 2 : archive « Notes » ─────────────────────────── */
.nrow { display: grid; grid-template-columns: 14px 210px 150px 1fr 52px 16px; align-items: center; gap: 12px;
        padding: 13px 20px; border-top: 1px solid var(--line-row); color: var(--ink); transition: background .12s; }
.nrow:hover { background: var(--surface-warm); text-decoration: none; color: var(--ink); }
.nrow .nveille { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrow .ntype { font-size: 13px; color: var(--secondary); }
.nrow .ntitle-s { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrow .ntime { font-size: 13.5px; color: var(--secondary); text-align: right; }

/* ── Écran 2 : lecture d'une note ────────────────────────── */
.nlayout { display: grid; grid-template-columns: minmax(0, 74ch) 260px; gap: 60px;
           width: fit-content; max-width: 100%; margin: 0 auto; }
.ncrumb { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 15px; }
.ncrumb a { font-weight: 700; color: var(--ink); }
.ncrumb a:hover { color: var(--accent); text-decoration: none; }
.ncrumb .dim, .nmeta .dim { color: var(--secondary); font-weight: 400; }
.nmeta { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; font-size: 13.5px; flex-wrap: wrap; }
.vbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
          color: var(--green-ink); background: var(--green-soft); border-radius: 99px; padding: 4px 12px; }

.note-body { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin-top: 10px; }
.note-body > h1:first-child { display: none; }   /* le titre vit dans le fil d'ariane */
.note-body h1 { font-size: 24px; letter-spacing: -.02em; margin: 30px 0 10px; }
.note-body h2 { font-size: 20px; letter-spacing: -.015em; margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.note-body h3 { font-size: 17px; margin: 26px 0 8px; }
.note-body h4 { font-size: 15.5px; margin: 20px 0 6px; color: var(--ink); }
.note-body p { margin: 0 0 14px; }
.note-body ul, .note-body ol { margin: 0 0 16px; padding-left: 22px; }
/* Un tableau markdown a un min-content énorme : il défile dans son conteneur
   au lieu d'élargir toute la page (cf. audit B8, bug mobile du 17/07). */
.note-body table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.note-body th, .note-body td { padding: 6px 12px; border: 1px solid var(--line-2); font-size: 14px; }
/* les colonnes de la grille note doivent pouvoir rétrécir sous leur min-content */
.nlayout > * { min-width: 0; }
.note-body li { margin-bottom: 7px; }
.note-body hr { border: none; border-top: 1px solid var(--line-2); margin: 26px 0; }
.note-body a { color: var(--accent); }
.note-body strong { color: var(--ink); }
.note-body blockquote { border-left: 2px solid var(--line); padding-left: 14px; color: var(--muted); margin: 0 0 14px; }
.note-body table { border-collapse: collapse; font-size: 13.5px; margin: 0 0 18px; display: block;
                  overflow-x: auto; max-width: none; width: max-content; min-width: 100%; }
.note-body thead th { background: var(--surface-warm); font-size: 12px; letter-spacing: .04em; }
.note-body th, .note-body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }

.fbrow { display: flex; align-items: center; gap: 10px; margin-top: 36px; padding-top: 22px;
         border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.fq { font-size: 14px; color: var(--secondary); margin-right: 4px; }
.fb { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 8px 16px;
      font-size: 14px; color: var(--ink-2); font-weight: 550; box-shadow: var(--shadow-sm); transition: border-color .12s; }
.fb:hover { border-color: var(--accent); }
.fb.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.fbnote { font-size: 13px; color: var(--green-ink); }

.nside h4 { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary);
            font-weight: 650; margin: 44px 0 10px; }
.nside h4:first-child { margin-top: 58px; }
.nside .sact { display: block; font-size: 14px; color: var(--accent); padding: 6px 0; }
.pnote { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
         border-bottom: 1px solid var(--line-row); font-size: 13.5px; color: var(--ink-2); }
.pnote:hover { color: var(--accent); text-decoration: none; }
.pnote .dim { color: var(--secondary); }

@media (max-width: 880px) {
  /* width:fit-content du desktop garderait la largeur 74ch → débordement */
  .nlayout { grid-template-columns: 1fr; gap: 20px; width: 100%; }
  .nrow { grid-template-columns: 12px 1fr 60px; }
  .nrow .ntype, .nrow .ntitle-s { display: none; }
}


/* questionnaire « à revoir » */
.rv-back { position: fixed; inset: 0; background: rgba(20,20,24,.38); z-index: 60;
           display: flex; align-items: center; justify-content: center; padding: 20px; }
.rv-dlg { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
          box-shadow: var(--shadow-app); padding: 24px 26px; width: 100%; max-width: 460px; }
.rv-dlg h3 { font-size: 19px; letter-spacing: -.015em; margin-bottom: 6px; }
.rv-sub { font-size: 13.5px; color: var(--secondary); margin-bottom: 16px; }
.rv-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rv-opt { text-align: left; font-size: 14px; padding: 9px 13px; border-radius: 9px;
          border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); transition: border-color .12s, background .12s; }
.rv-opt:hover { border-color: var(--accent); }
.rv-opt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rv-ta { width: 100%; font-family: inherit; font-size: 14px; padding: 10px 12px; border-radius: 9px;
         border: 1px solid var(--line); background: var(--surface-warm); color: var(--ink); resize: vertical; }
.rv-ta:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.rv-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.rv-cancel { font-size: 14px; color: var(--secondary); padding: 9px 14px; border-radius: 9px; }
.rv-cancel:hover { background: var(--line-2); color: var(--ink); }
.rv-send { background: var(--accent); color: var(--on-accent, #fff); border-radius: 9px; padding: 9px 20px;
           font-size: 14px; font-weight: 600; }
.rv-send:hover { background: var(--accent-hover); }
.rv-send:disabled { opacity: .6; }

/* ── Écran 04 : fiche veille ─────────────────────────────── */
.vh { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.vh-dot { width: 11px; height: 11px; border-radius: 99px; flex-shrink: 0; }
.vh-name { font-size: 28px; font-weight: 700; letter-spacing: -.022em; }
.vh-folder { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--secondary);
             border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px; background: var(--sidebar); }
.vh-folder .fdot { width: 7px; height: 7px; border-radius: 99px; }
.vh-act { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.vh-act-lbl { font-size: 13.5px; color: var(--muted); }
.vh-sub { font-size: 13.5px; color: var(--secondary); margin: 8px 0 26px; }

.vcols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 52px; max-width: 1100px; }
.nsec-t { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary);
          font-weight: 650; margin: 0 0 10px; }
.nsec-t:not(:first-child) { margin-top: 30px; }
.vcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 6px 20px; }

.cad-list { display: flex; flex-direction: column; }
.cad { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-row); cursor: pointer; }
.cad:last-child { border-bottom: none; }
.cbx { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--surface);
       color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cbx.on { background: var(--accent); border-color: var(--accent); }
.cad-t { display: flex; flex-direction: column; gap: 1px; }
.cad-t b { font-size: 14.5px; font-weight: 600; }
.cad-h { font-size: 12.5px; color: var(--secondary); }

.vrow-sep { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-3); flex-wrap: wrap; }
.vlbl { font-size: 13.5px; color: var(--muted); font-weight: 550; }
.vrecip { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.rchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2);
         border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px 3px 3px; background: var(--surface-warm); }
.rchip.team { padding: 4px 11px; color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.vrow-sep .vswitch { margin-left: auto; }

.srow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-row); font-size: 14px; }
.srow:last-child { border-bottom: none; }
.s-nm { font-weight: 550; }
.s-cat { margin-left: auto; font-size: 12.5px; }
.s-ok, .s-bad, .s-off, .s-auto { font-size: 12.5px; font-weight: 600; min-width: 62px; text-align: right; }
.s-ok { color: var(--green-ink); }
.s-bad { color: var(--red-ink); }
.s-off { color: var(--secondary); }
/* Source partagée en panne : prise en charge par le radar, état neutre et non
   actionnable (surtout pas l'alerte rouge, l'utilisateur n'a rien à faire). */
.s-auto { color: var(--secondary); font-weight: 550; cursor: help; }
.srow.more { justify-content: center; font-size: 13px; }

.vside h4 { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary);
            font-weight: 650; margin: 0 0 10px; }
.vside h4:not(:first-child) { margin-top: 28px; }
.pills-s { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-s { font-size: 12.5px; border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px;
          color: var(--ink-2); background: var(--surface); }
.vpriv { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink-2); }
.vplain { font-size: 14.5px; color: var(--ink-2); }
.dim { color: var(--secondary); }
.dim.sm { font-size: 12.5px; margin-top: 8px; }
.vswitch.disabled, .vswitch:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 880px) { .vcols { grid-template-columns: 1fr; gap: 26px; } .vh-act { margin-left: 0; } }

/* ── fiche : champs éditables ────────────────────────────── */
.vinput { width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface);
          border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; transition: border-color .12s; }
.vinput:hover { border-color: var(--secondary); }
.vinput:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* destinataires : ajout / retrait */
.rchip.add { border-style: dashed; color: var(--secondary); padding: 4px 12px; background: transparent; }
.rchip.add:hover { color: var(--accent); border-color: var(--accent); }
.rchip-x { color: var(--secondary); font-size: 14px; line-height: 1; padding: 0 2px; margin-left: 2px; }
.rchip-x:hover { color: var(--red-ink); }

.recip-pop { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--line);
             border-radius: 12px; box-shadow: var(--shadow-app); padding: 6px; width: 320px; max-height: 320px; overflow-y: auto; }
.recip-h { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--secondary);
           font-weight: 650; padding: 8px 10px 6px; }
.recip-i { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px;
           border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.recip-i:hover { background: var(--accent-soft); }
.recip-n { font-weight: 550; white-space: nowrap; }
.recip-e { margin-left: auto; font-size: 12px; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; }
.recip-empty { font-size: 13.5px; color: var(--secondary); padding: 6px 10px 12px; }

/* réparation de source */
.s-fix { font-size: 12px; font-weight: 600; color: var(--accent); border: 1px solid var(--line);
         border-radius: 7px; padding: 3px 10px; margin-left: 10px; background: var(--surface); }
.s-fix:hover { border-color: var(--accent); background: var(--accent-soft); }
.s-fix-sp { width: 62px; margin-left: 10px; }
.rp-load { display: flex; justify-content: center; padding: 18px 0 6px; }
.spin { width: 20px; height: 20px; border: 2px solid var(--line); border-top-color: var(--accent);
        border-radius: 99px; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.rp-url { background: var(--surface-warm); border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; }
.rp-lbl { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
          color: var(--secondary); font-weight: 650; margin-bottom: 5px; }
.rp-url code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
               color: var(--ink-2); word-break: break-all; }
.rp-conf { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 2px 9px; }
.rp-high { color: var(--green-ink); background: var(--green-soft); }
.rp-low, .rp-medium { color: var(--amber-ink); background: var(--amber-soft); }

/* verdict du test réel du flux — prime sur la « confiance » annoncée par l'IA */
.rp-test { font-size: 13.5px; line-height: 1.45; margin-top: 10px; font-weight: 600; }
.rp-test.ok { color: var(--green-ink); }
.rp-test.bad { color: var(--red-ink); font-weight: 500; }

/* Page d'index : liste des flux détectés, un clic teste et applique celui choisi. */
.rp-alts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
           max-height: 260px; overflow-y: auto; }
.rp-alt { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
          width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
          background: var(--surface); }
.rp-alt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.rp-alt:disabled { opacity: .5; cursor: default; }
.rp-alt.busy { border-color: var(--accent); opacity: 1; }
.rp-alt-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rp-alt-u { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px;
            color: var(--secondary); word-break: break-all; }
/* appliquer une URL qui ne collecte pas reste possible, mais n'est pas l'action mise en avant */
.rv-weak { background: var(--surface); border: 1px solid var(--line); color: var(--secondary);
           border-radius: 9px; padding: 9px 20px; font-size: 14px; font-weight: 600; }
.rv-weak:hover { border-color: var(--red-line, var(--line)); color: var(--ink); }
.rv-weak:disabled { opacity: .6; }

/* ── fiche : orientation éditable ────────────────────────── */
.h4-act { font-size: 11.5px; font-weight: 600; color: var(--accent); text-transform: none;
          letter-spacing: 0; margin-left: 10px; border-radius: 6px; padding: 2px 6px; }
.h4-act:hover { background: var(--accent-soft); }
.nsec-t .h4-act { float: right; }
.orient .olbl { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
                color: var(--secondary); font-weight: 650; margin: 12px 0 7px; }
.orient .olbl:first-child { margin-top: 0; }
.pill-s { display: inline-flex; align-items: center; gap: 5px; }
.pill-s.kw { background: var(--surface-warm); }
.pill-s.add { border-style: dashed; color: var(--secondary); padding: 4px 10px; }
.pill-s.add:hover { color: var(--accent); border-color: var(--accent); }
.pill-x { color: var(--secondary); font-size: 13px; line-height: 1; padding: 0 1px; }
.pill-x:hover { color: var(--red-ink); }
.s-rm { color: var(--line); font-size: 15px; line-height: 1; padding: 0 2px; margin-left: 10px; }
.srow:hover .s-rm { color: var(--secondary); }
.s-rm:hover { color: var(--red-ink); }

/* dialogues larges : affinage + ajout de sources */
.rv-dlg.wide { max-width: 560px; }
.rf-blk { margin-bottom: 12px; }
.as-url { display: flex; gap: 8px; align-items: center; }
.as-url .vinput { flex: 1; }
.as-url .rv-send { white-space: nowrap; }
.as-sugg { max-height: 260px; overflow-y: auto; }
.as-i { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px;
        border-radius: 9px; font-size: 14px; color: var(--ink-2); border: 1px solid transparent; }
.as-i:hover { background: var(--surface-warm); border-color: var(--line); }
.as-i.done { opacity: .55; }
.as-n { font-weight: 550; white-space: nowrap; }
.as-why { margin-left: auto; font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.as-plus { color: var(--accent); font-weight: 700; flex-shrink: 0; }

/* ── écran 3 : assistant « Nouvelle veille » ─────────────── */
.nv { max-width: 640px; margin: 0 auto; padding: 34px 24px 60px; }
.nv-prog { display: flex; gap: 6px; margin-bottom: 8px; }
.nv-seg { height: 3px; flex: 1; border-radius: 99px; background: var(--line-2); transition: background .2s; }
.nv-seg.on { background: var(--accent); }
.nv-prog-lbl { font-size: 12px; color: var(--secondary); margin-bottom: 30px; }
.nv-h1 { font-size: 28px; font-weight: 700; letter-spacing: -.022em; margin-bottom: 8px; }
.nv-sub { font-size: 15px; color: var(--muted); max-width: 54ch; margin-bottom: 24px; }
.nv-desc { width: 100%; font-family: inherit; font-size: 16px; line-height: 1.55; color: var(--ink);
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
           padding: 14px 16px; resize: vertical; min-height: 120px; }
.nv-desc::placeholder { color: var(--secondary); }
.nv-desc:hover { border-color: var(--secondary); }
.nv-desc:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.nv-acts { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.nv-cta { font-size: 15px; padding: 11px 24px; }

/* état de génération : squelette de la proposition à venir */
.nv-load { margin-top: 22px; }
.nv-load-t { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.nv-load-s { color: var(--secondary); }
.nv-sk { display: flex; flex-direction: column; gap: 10px; }
.nv-sk span { display: block; height: 14px; border-radius: 6px; background: var(--line-3);
              animation: nv-pulse 1.2s ease-in-out infinite; }
.nv-sk span:nth-child(2) { animation-delay: .12s; }
.nv-sk span:nth-child(3) { animation-delay: .24s; }
.nv-sk span:nth-child(4) { animation-delay: .36s; }
@keyframes nv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .nv-sk span { animation: none; opacity: .7; } }

/* étape 2 : la description reste citée, chaque bloc s'ajuste en place */
.nv-quote { background: var(--surface-warm); border: 1px solid var(--line-2); border-radius: var(--radius-card);
            padding: 14px 16px 11px; margin-bottom: 26px; }
.nv-quote p { font-size: 14.5px; font-style: italic; color: var(--ink-2); margin-bottom: 4px; }
.nv-quote .h4-act { margin-left: 0; }
.nv-blk { margin-bottom: 26px; }
.nv-blk .olbl { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
                color: var(--secondary); font-weight: 650; margin: 16px 0 7px; }
.nv-blk .olbl:first-child { margin-top: 0; }
.nv-hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.nv-name { font-size: 17px; font-weight: 600; }

.nv-srcs { border: 1px solid var(--line-2); border-radius: var(--radius-card); background: var(--surface);
           padding: 4px 14px; margin-bottom: 8px; }
.nv-src { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer;
          border-bottom: 1px solid var(--line-row); }
.nv-src:last-child { border-bottom: none; }
.nv-src:not(.on) .nv-src-t { opacity: .5; }
.nv-check { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; border-radius: 6px;
            border: 1.5px solid var(--line); background: var(--surface); display: inline-flex;
            align-items: center; justify-content: center; }
.nv-check svg { width: 12px; height: 12px; fill: none; stroke: var(--on-accent, #fff); stroke-width: 3;
                stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.nv-check.on { background: var(--accent); border-color: var(--accent); }
.nv-check.on svg { opacity: 1; }
.nv-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nv-src-t { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.nv-src-t b { font-weight: 600; }
.nv-src-t small { font-size: 12.5px; color: var(--secondary); line-height: 1.45; }
.nv-new { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 650;
          letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
          background: var(--accent-soft); border-radius: 99px; padding: 1px 7px; vertical-align: 2px; }
.nv-src-t b .nv-new { font-weight: 650; }

/* réglages d'envoi repliés : une phrase, pas un formulaire */
.nv-settings-t { font-size: 13.5px; color: var(--muted); text-align: left; padding: 0; }
.nv-settings-t span { color: var(--accent); font-weight: 600; }
.nv-settings-t:hover span { text-decoration: underline; }
.nv-settings { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line-2);
               border-radius: var(--radius-card); background: var(--surface); }
.nv-cad { cursor: pointer; }
.nv-cad.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.nv-set-row { display: flex; gap: 16px; margin-top: 4px; }
.nv-set-row > div { flex: 1; }

.nv-final { border-top: 1px solid var(--line-2); padding-top: 20px; margin-top: 34px; align-items: flex-end; }
.nv-final-r { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.nv-promise { font-size: 13px; color: var(--green-ink); font-weight: 600; }

@media (max-width: 640px) {
  .nv { padding: 22px 16px 48px; }
  .nv-set-row { flex-direction: column; gap: 4px; }
  .nv-final { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .nv-final-r { align-items: stretch; text-align: center; }
}

/* ── barre de chargement indéterminée (partagée) ─────────────
   Remplace les annonces de durée ("5 à 15 secondes") : le mouvement
   dit "ça travaille", sans promesse chiffrée. */
.loadbar { position: relative; height: 3px; border-radius: 99px; background: var(--line-2);
           overflow: hidden; margin: 12px 0; }
.loadbar::before { content: ""; position: absolute; inset: 0; width: 36%; border-radius: 99px;
                   background: var(--accent); animation: loadbar-slide 1.1s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes loadbar-slide { from { transform: translateX(-110%); } to { transform: translateX(390%); } }
@media (prefers-reduced-motion: reduce) {
  .loadbar::before { animation: loadbar-pulse 1.4s ease-in-out infinite; width: 100%; }
  @keyframes loadbar-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
}

/* ── compteur de veilles (plans à quota) ─────────────────── */
.sb-quota { font-size: 11.5px; color: var(--secondary); text-align: center; margin-top: 7px; }
.sb-quota.warn { color: var(--amber-ink); font-weight: 600; }

/* ── fiche : modifier l'orientation de la veille ──────────
   Bouton simple et visible (ex-lien « Affiner avec l'IA », trop discret et
   jargonneux) : ouvre le dialogue de proposition, rien ne s'applique sans
   validation. */
.orient-adjust { display: inline-flex; align-items: center; gap: 8px;
                 font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: var(--surface);
                 border: 1px solid var(--line); border-radius: var(--radius-ctl);
                 padding: 8px 14px; margin: 2px 0 14px; box-shadow: var(--shadow-sm);
                 transition: border-color .12s, color .12s; }
.orient-adjust svg { width: 14px; height: 14px; stroke: currentColor; fill: none;
                     stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.orient-adjust:hover { border-color: var(--accent); color: var(--accent); }
.orient-adjust:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── première connexion : mini-guide (cockpit sans veille) ── */
.fr-guide { max-width: 660px; margin: 56px auto 0; text-align: center; }
.fr-guide h3 { font-size: 24px; font-weight: 700; letter-spacing: -.018em; margin-bottom: 30px; }
.fr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; margin-bottom: 30px; }
.fr-step { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-card);
           padding: 18px 16px 16px; }
.fr-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
        border-radius: 99px; background: var(--accent-soft); color: var(--accent);
        font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.fr-step b { display: block; font-size: 15px; margin-bottom: 5px; }
.fr-step p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.fr-cta { font-size: 15px; padding: 12px 26px; }
@media (max-width: 760px) { .fr-steps { grid-template-columns: 1fr; } }

/* ── logo (favicon réutilisé) et boutons du pied de sidebar ── */
img.sb-mark { background: none; object-fit: cover; }
.sb-user .sb-theme { margin-left: 0; }
.sb-user .sb-theme:first-of-type { margin-left: auto; }

/* ── clés API et extension ────────────────────────────────── */
.key-row { display: flex; align-items: center; gap: 12px; padding: 10px 0;
           border-bottom: 1px solid var(--line-row); }
.key-t { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.key-t small { font-size: 12.5px; color: var(--secondary); }
.key-del { font-size: 13px; color: var(--red-ink); margin-left: auto; padding: 5px 10px;
           border-radius: 8px; }
.key-del:hover { background: var(--amber-soft); }
.key-new { background: var(--green-soft); border: 1px solid var(--green); border-radius: var(--radius-card);
           padding: 12px 14px; margin-bottom: 14px; font-size: 13.5px; }
.key-new p { margin-bottom: 8px; }
.key-val { display: flex; align-items: center; gap: 10px; }
.key-val code { flex: 1; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
                word-break: break-all; background: var(--surface); border: 1px solid var(--line);
                border-radius: 8px; padding: 8px 10px; user-select: all; }
.key-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px;
            padding-top: 14px; border-top: 1px solid var(--line-2); }
.key-form .vinput { flex: 1 1 220px; }
.key-scope { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2);
             cursor: pointer; white-space: nowrap; }

/* mur de quota : atteint la limite du plan, l'assistant coupe à l'entrée */
.nv-wall { background: var(--amber-soft); border: 1px solid var(--amber-line);
           border-radius: var(--radius-card); padding: 20px 22px; margin-top: 6px;
           font-size: 15px; line-height: 1.55; }
.nv-wall p + p { margin-top: 8px; color: var(--muted); }

/* ── menu utilisateur (popover au-dessus du nom) ──────────── */
.sb-user { cursor: pointer; border-radius: 8px; padding: 6px 8px; }
.sb-user:hover { background: var(--line-2); }
.umenu { position: relative; background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--radius-card); box-shadow: var(--shadow-app);
         padding: 6px; margin-bottom: 8px; }
.umenu-h { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.umenu-h b { display: block; font-size: 14px; }
.umenu-h small { font-size: 12px; color: var(--secondary); word-break: break-all; }
.umenu-lang { display: block; padding: 6px 10px 10px; font-size: 12.5px; color: var(--secondary); }
.umenu-lang .vinput { margin-top: 5px; font-size: 13.5px; padding: 7px 10px; }
.umenu-i { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
           padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.umenu-i:hover { background: var(--line-2); color: var(--ink); }
.umenu-i svg { width: 15px; height: 15px; stroke: currentColor; fill: none;
               stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── compte à rebours d'essai (sidebar, au-dessus du nom) ── */
.sb-trial { width: 100%; text-align: center; font-size: 12.5px; font-weight: 600;
            color: var(--amber-ink); background: var(--amber-soft);
            border: 1px solid var(--amber-line); border-radius: var(--radius-ctl);
            padding: 7px 10px; cursor: pointer; transition: border-color .12s; }
.sb-trial:hover { border-color: var(--amber); }
.sb-trial.urgent { color: var(--red-ink); background: transparent; border-color: var(--red-ink); }

/* ── extension : bloc installation + réassurance ──────────── */
.ext-blk { background: var(--surface-warm); border: 1px solid var(--line-2);
           border-radius: var(--radius-card); padding: 12px 14px; margin-bottom: 14px;
           font-size: 13.5px; line-height: 1.5; }
.ext-blk p + p { margin-top: 6px; }
.ext-links a { font-weight: 600; }

/* ── offres : cartes de plans dans le dialogue ────────────── */
.rv-dlg.plans { max-width: 680px; }
.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 10px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 6px;
             border: 1px solid var(--line); border-radius: var(--radius-card);
             background: var(--surface); padding: 16px 14px 14px; }
.plan-card.reco { border-color: var(--accent); }
.plan-card.current { background: var(--surface-warm); }
.plan-badge { position: absolute; top: -9px; left: 12px; font-size: 10.5px; font-weight: 700;
              letter-spacing: .05em; text-transform: uppercase; color: var(--on-accent, #fff);
              background: var(--accent); border-radius: 99px; padding: 2px 9px; }
.plan-name { font-size: 16px; }
.plan-price { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.plan-price small { font-size: 12px; font-weight: 400; color: var(--secondary); }
.plan-feats { list-style: none; margin: 2px 0 10px; display: flex; flex-direction: column; gap: 3px; }
.plan-feats li { font-size: 12.5px; color: var(--muted); padding-left: 14px; position: relative; }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--green-ink); font-weight: 700; }
.plan-cta { margin-top: auto; text-align: center; font-size: 13.5px; padding: 8px 10px; }
.plan-cta.is-current { color: var(--secondary); font-weight: 600; }
@media (max-width: 640px) { .plan-cards { grid-template-columns: 1fr; } }

/* équipe : sélecteur de rôle compact dans la ligne membre */
.team-role { flex: 0 0 auto; width: auto; font-size: 13px; padding: 5px 8px; margin-left: auto; }
.key-row .team-role + .key-del { margin-left: 8px; }

/* dialogues applicatifs uiAlert/uiConfirm/uiPrompt : au-dessus des dialogues métier */
.rv-back.ui-top { z-index: 80; }
.rv-back.ui-top .rv-dlg { max-width: 440px; }
.rv-back.ui-top #ui-input { width: 100%; margin-top: 4px; }

/* erreur en ligne du dialogue « Ajouter des sources » */
.as-err { margin-top: 10px; font-size: 13.5px; color: var(--red-ink); line-height: 1.45; }

/* liens légaux : discrets, en pied de sidebar */
.sb-legal { text-align: center; font-size: 10.5px; color: var(--secondary); }
.sb-legal a { color: var(--secondary); }
.sb-legal a:hover { color: var(--ink); }