/* ============================================================================
   Lontra V2 — design system (frontend, responsive).
   Isolé sous .v2root — n'affecte JAMAIS la V1. Charte alignée sur le back-office
   V2 (clair, Inter, vert #0f7a4d, ambre = univers entretien) + habillage client
   paramétrable (--client-bg / logo injecté). Mobile 1 colonne / desktop 3 colonnes.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

.v2root{
  /* charte tokens */
  --app:#ffffff; --panel:#f7f7f5; --raise:#ffffff;
  --ink:#15171c; --muted:#6b7078; --faint:#9aa0a7;
  --line:#ececea; --line-2:#e3e3e0;
  --accent:#0f7a4d; --accent-2:#128a58; --accent-soft:#e8f4ee; --accent-ring:#bfe4d1;
  --amber:#c07a3c; --amber-soft:#f6efe6; --amber-ring:#ecd6bd;
  --indigo:#5b63d6; --plum:#8a7ab0;
  --shadow:0 1px 2px rgba(20,24,30,.04), 0 8px 24px -14px rgba(20,24,30,.14);
  --shadow-lg:0 2px 8px rgba(20,24,30,.06), 0 24px 50px -26px rgba(20,24,30,.24);
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  /* client branding (paramétrable). Défaut NEUTRE (jamais un fond tiers/JD — REC-V2) :
     un dégradé sobre aux couleurs Lontra, surchargeable par --client-bg côté société. */
  --client-bg:linear-gradient(150deg,#0E7C7B 0%,#0A5150 45%,#15202A 100%);
  /* Surfaces that used to be hard-coded: tokenised so the dark anonymous space
     inverts them by overriding tokens, never by fighting selectors. */
  --body:#fffdf9; --brand-bg:linear-gradient(115deg,#fff,#f7efe4);
  --bub-bot:#f5f3ee; --bub-bot-line:#ece9e1; --bub-me-ink:#0d5637;
  --sidebar-w:270px; --fiche-w:344px;

  font-family:var(--font);color:var(--ink);line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.v2root *{box-sizing:border-box;margin:0;padding:0;}
.v2root::before{content:"";position:fixed;inset:0;background:var(--client-bg) center/cover;z-index:0;}
.v2root::after{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(12,17,28,.30),rgba(12,17,28,.58));z-index:0;}
.v2root > *{position:relative;z-index:1;}
.v2root button{font-family:inherit;color:inherit;}  /* buttons do NOT inherit color by
   default — they fall back to the UA's black, which survived every token inversion and
   left card/sidebar titles black-on-black in the anonymous space. */
.v2root img{display:block;}
.v2-hidden{display:none!important;}

/* ---------- Loading / error ---------- */
.v2-center{width:100%;height:100%;display:grid;place-items:center;color:#fff;text-align:center;padding:24px;}
.v2-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:v2spin .8s linear infinite;}
@keyframes v2spin{to{transform:rotate(360deg);}}
.v2-errcard{background:var(--app);border-radius:16px;padding:32px 30px;max-width:400px;box-shadow:var(--shadow-lg);color:var(--ink);}
.v2-errcard h1{font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:8px;}
.v2-errcard p{font-size:14px;color:var(--muted);}

/* ---------- Auth / centered card ---------- */
.v2-auth{width:min(420px,92vw);background:var(--app);border-radius:16px;box-shadow:var(--shadow-lg);padding:36px 32px;text-align:center;}
.v2-auth-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:26px;}
.v2-auth-brand .logo{width:36px;height:36px;object-fit:contain;}
.v2-auth-brand b{font-size:17px;font-weight:600;}
.v2-auth-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:23px;margin:0 auto 16px;background:var(--accent-soft);}
.v2-auth h2{font-family:var(--serif);font-size:28px;font-weight:400;margin-bottom:8px;}
.v2-auth p{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:22px;}
.v2-auth p b{color:var(--ink);font-weight:600;}
.v2-cgu{font-size:12.5px;color:var(--muted);line-height:1.7;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:18px;max-height:32vh;overflow:auto;}
.v2-cgu b{color:var(--ink);font-weight:600;} .v2-cgu a{color:var(--accent);}
.v2-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink);cursor:pointer;text-align:left;margin-bottom:22px;}
.v2-check input{width:19px;height:19px;accent-color:var(--accent);flex-shrink:0;margin-top:1px;}
.v2-btn{width:100%;font:inherit;font-size:14.5px;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:10px;padding:13px;cursor:pointer;transition:.15s;}
.v2-btn:hover{background:var(--accent-2);}
.v2-btn:disabled{background:var(--line);color:var(--faint);cursor:default;}
.v2-btn.ghost{background:none;color:var(--muted);border:1px solid var(--line-2);}
.v2-otp-input{width:100%;font:inherit;font-size:26px;font-weight:600;letter-spacing:.5em;text-align:center;color:var(--ink);background:var(--panel);border:1px solid var(--line-2);border-radius:11px;padding:14px 10px;margin-bottom:16px;outline:none;transition:.15s;}
.v2-otp-input:focus{border-color:var(--accent);}
.v2-link{width:100%;background:none;border:none;font:inherit;font-size:13px;color:var(--accent);cursor:pointer;padding:10px;margin-top:8px;}
.v2-link:disabled{color:var(--faint);cursor:default;}

/* ---------- App shell (3 columns desktop / 1 column mobile) ---------- */
.v2-shell{width:min(1240px,96vw);height:min(88vh,860px);display:flex;background:var(--app);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);}

/* Sidebar */
.v2-sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;}
.v2-brand{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--brand-bg);}
.v2-brand .logo{width:30px;height:30px;object-fit:contain;}
.v2-brand .n{font-weight:600;font-size:14px;} .v2-brand .c{font-size:11px;color:var(--faint);}
.v2-newbtn{margin:12px;padding:10px;border-radius:10px;font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;}
.v2-newbtn:hover{background:var(--accent-2);}
.v2-sb-scroll{flex:1;overflow-y:auto;padding:2px 8px 8px;}
.v2-sb-head{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:12px 8px 5px;}
.v2-sb-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;cursor:pointer;transition:.14s;margin-bottom:2px;border:1px solid transparent;width:100%;text-align:left;background:none;}
.v2-sb-item:hover{background:var(--line);}
.v2-sb-item.active{background:var(--accent-soft);border-color:var(--accent-ring);}
.v2-sb-conv{position:relative;}
.v2-sb-conv .v2-sb-item{padding-right:34px;}
.v2-sb-del{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;border:none;border-radius:7px;background:none;color:var(--faint);cursor:pointer;opacity:0;transition:.14s;}
.v2-sb-conv:hover .v2-sb-del{opacity:1;}
.v2-sb-del:hover{background:var(--line-2);color:#c25858;}
@media (hover:none){.v2-sb-del{opacity:.55;}}
.v2-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;overflow:hidden;}
.v2-av.topic{background:var(--panel);color:var(--muted);border:1px solid var(--line-2);}
.v2-av img{width:100%;height:100%;object-fit:contain;}
.v2-sb-id{flex:1;min-width:0;} .v2-sb-id .n{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v2-sb-id .r{display:block;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v2-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.v2-dot.todo{background:var(--line-2);}.v2-dot.done{background:var(--accent);}.v2-dot.doing{background:var(--amber);}
.v2-sb-user{display:flex;align-items:center;gap:9px;padding:12px 14px;border-top:1px solid var(--line);}
.v2-sb-user .v2-av{background:var(--plum);}
.v2-logout{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border:none;border-radius:8px;background:none;color:var(--faint);cursor:pointer;transition:.15s;}
.v2-logout:hover{background:var(--line);color:var(--ink);}

/* Main */
.v2-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.v2-top{padding:14px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px;flex-shrink:0;}
.v2-top .burger,.v2-top .fichebtn{display:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--raise);color:var(--muted);cursor:pointer;place-items:center;}
.v2-top .logo{width:32px;height:32px;object-fit:contain;flex-shrink:0;}
.v2-top .t{font-weight:600;font-size:15px;} .v2-top .s{font-size:12px;color:var(--faint);margin-top:1px;}
.v2-top .prog{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted);font-weight:500;}
.v2-top .prog .bar{width:110px;height:5px;border-radius:999px;background:var(--line);overflow:hidden;}
.v2-top .prog .bar > i{display:block;height:100%;background:var(--amber);}

.v2-body{flex:1;overflow-y:auto;padding:28px 30px 16px;background:var(--body);display:flex;flex-direction:column;gap:26px;}
.v2-row{display:flex;gap:12px;max-width:86%;}
.v2-row.bot{align-self:flex-start;}
.v2-row.me{align-self:flex-end;flex-direction:row-reverse;}
.v2-bav{width:28px;height:28px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;overflow:hidden;margin-top:2px;background:var(--accent);}
.v2-bav img{width:100%;height:100%;object-fit:contain;}
.v2-bubs{display:flex;flex-direction:column;gap:8px;min-width:0;}
.v2-row.me .v2-bubs{align-items:flex-end;}
.v2-bub{font-size:14.5px;line-height:1.6;padding:11px 15px;border-radius:16px;}
.v2-row.bot .v2-bub{background:var(--bub-bot);border:1px solid var(--bub-bot-line);color:var(--ink);border-top-left-radius:5px;}
.v2-row.me .v2-bub{background:var(--accent-soft);border:1px solid var(--accent-ring);color:var(--bub-me-ink);border-top-right-radius:5px;}
.v2-bub b,.v2-bub strong{font-weight:600;} .v2-bub i{color:var(--muted);}
.v2-bub p{margin:0;} .v2-bub p + p{margin-top:.55em;}
.v2-bub ul,.v2-bub ol{margin:.3em 0;padding-left:1.2em;} .v2-bub li{margin:.15em 0;}
.v2-bub code{background:rgba(0,0,0,.05);border-radius:4px;padding:1px 4px;font-size:.9em;}
.v2-chips{display:flex;flex-wrap:wrap;gap:8px;}
.v2-chip{font:inherit;font-size:13px;font-weight:500;color:var(--ink);background:var(--raise);border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.14s;}
.v2-chip:hover{border-color:var(--accent);color:var(--accent);}
.v2-note{align-self:flex-start;background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:14px 16px;max-width:560px;width:100%;box-shadow:var(--shadow);}
.v2-note-legend{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-bottom:6px;padding:0 2px;}
.v2-note .v2-rate{padding:8px 2px;}
.v2-note .v2-seg button{width:30px;height:30px;font-size:13px;}
.v2-note .v2-fbtn{margin-top:12px;}
.v2-note-cancel{display:block;width:100%;margin-top:8px;background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:6px;}
.v2-note-cancel:hover{color:var(--ink);}
.v2-fedit{margin-left:auto;font-size:11.5px;color:var(--accent);background:none;border:none;cursor:pointer;padding:2px 4px;font-weight:600;}
.v2-fedit:hover{text-decoration:underline;}
.v2-noteline{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px;border-bottom:1px solid var(--line-2);font-size:12.5px;}
.v2-noteline .nm{color:var(--ink);flex:1;min-width:0;}
.v2-noteline .sc{font-weight:650;color:var(--amber);white-space:nowrap;}
.v2-noteline .sc.empty{color:var(--faint);font-weight:400;}
.v2-noteline .sc i{font-style:normal;color:var(--faint);font-weight:400;font-size:11px;}
.v2-typing{display:inline-flex;gap:4px;padding:6px 0;}
.v2-typing span{width:7px;height:7px;border-radius:50%;background:var(--faint);animation:v2b 1.2s infinite;}
.v2-typing span:nth-child(2){animation-delay:.15s;}.v2-typing span:nth-child(3){animation-delay:.3s;}
@keyframes v2b{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

.v2-input{flex-shrink:0;padding:12px 18px 16px;border-top:1px solid var(--line);}
.v2-inshell{display:flex;align-items:flex-end;gap:9px;background:var(--raise);border:1px solid var(--line-2);border-radius:16px;padding:6px 8px;box-shadow:var(--shadow);}
.v2-inshell textarea{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font:inherit;font-size:14px;padding:9px 6px;resize:none;max-height:160px;line-height:1.5;overflow-y:hidden;}
.v2-inshell textarea::placeholder{color:var(--faint);}
.v2-rnd{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;flex-shrink:0;}
.v2-rnd svg{width:17px;height:17px;}
.v2-rnd.mic{background:var(--amber-soft);color:var(--amber);}
.v2-rnd.send{background:var(--accent);color:#fff;}
.v2-rnd.send:disabled{background:var(--line);color:var(--faint);cursor:default;}
.v2-rnd.mic:disabled{opacity:.45;cursor:default;}
.v2-rnd.mic.recording{background:#e5484d;color:#fff;animation:v2pulse 1.2s infinite;}
@keyframes v2pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45);}50%{box-shadow:0 0 0 7px rgba(229,72,77,0);}}
.v2-spk{align-self:flex-start;margin-top:2px;background:none;border:1px solid var(--line-2);cursor:pointer;font-size:11.5px;color:var(--muted);padding:3px 10px;border-radius:20px;line-height:1;display:inline-flex;align-items:center;gap:5px;transition:color .12s,border-color .12s;}
.v2-spk:hover,.v2-spk.playing,.v2-spk.loading{color:var(--accent);border-color:var(--accent);}
.v2-mini-spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:v2spin .7s linear infinite;vertical-align:middle;}
.v2-inhint{font-size:11.5px;color:var(--faint);margin-top:8px;padding-left:4px;display:flex;justify-content:space-between;gap:10px;}

/* Fiche (right) */
.v2-fiche{width:var(--fiche-w);flex-shrink:0;border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;}
.v2-fiche-in{padding:16px 16px 22px;display:flex;flex-direction:column;gap:8px;}
.v2-fh{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin:12px 2px 3px;display:flex;justify-content:space-between;}
.v2-fname{display:flex;align-items:center;gap:10px;padding-bottom:4px;}
.v2-fname .v2-av{width:38px;height:38px;background:var(--plum);}
.v2-fname .n{font-size:15px;font-weight:600;} .v2-fname .r{font-size:11.5px;color:var(--faint);}

.v2-sec{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;background:var(--raise);border:1px solid var(--line);transition:.14s;text-align:left;width:100%;}
.v2-sec:hover{border-color:var(--amber-ring);}
.v2-sec.active{background:var(--amber-soft);border-color:var(--amber-ring);}
.v2-secst{width:18px;height:18px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;}
.v2-secst.todo{border:2px solid var(--line-2);}
.v2-secst.doing{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);}
.v2-secst.done{background:var(--accent);color:#fff;font-size:11px;font-weight:700;}
.v2-sec .n{font-size:13px;font-weight:600;} .v2-sec .m{font-size:10.5px;color:var(--faint);}
.v2-badge{font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:5px;flex-shrink:0;}
.v2-badge.q{background:var(--amber-soft);color:var(--amber);} .v2-badge.k{background:var(--accent-soft);color:var(--accent);}
.v2-sec-redo{flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;border:none;border-radius:6px;background:none;color:var(--faint);font-size:15px;line-height:1;cursor:pointer;transition:.14s;}
.v2-sec-redo:hover{background:var(--line-2);color:var(--ink);} .v2-sec-redo:disabled{opacity:.35;cursor:default;}
.v2-reset-all{margin-top:14px;width:100%;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:none;border:1px solid var(--line-2);border-radius:9px;padding:9px;cursor:pointer;transition:.14s;}
.v2-reset-all:hover{border-color:#c25858;color:#c25858;} .v2-reset-all:disabled{opacity:.4;cursor:default;}

/* ---------- Anonymous ephemeral chat — a distinct, private, dark space ---------- */
/* Anonymity control, in the header: a decision that must be reachable at any moment,
   not buried under the composer. Reads as a switch, never as a door out of the app. */
.v2-anon-btn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font:inherit;font-size:12px;font-weight:600;color:var(--muted);background:var(--raise);border:1px solid var(--line-2);border-radius:20px;cursor:pointer;transition:.15s;}
.v2-anon-btn:hover{color:var(--ink);border-color:var(--faint);}
.v2-ghost{vertical-align:-2px;flex-shrink:0;}
.v2-anon-btn .lk{display:inline-flex;align-items:center;opacity:.55;transition:.15s;}
.v2-anon-btn:hover .lk{opacity:1;}
.v2-anon-btn.on{color:#dfe4ec;background:#2a2f3a;border-color:#3a4150;}
.v2-anon-btn.on .lk{opacity:1;}
/* Switch marker inside the anonymous thread: where the record stops. */
.v2-anon-notice{align-self:center;max-width:min(560px,92%);text-align:center;font-size:11.5px;line-height:1.55;color:var(--faint);background:var(--panel);border:1px dashed var(--line-2);border-radius:12px;padding:9px 14px;}
/* ---------- Anonymous space: one dark token set, applied to the WHOLE shell ----------
   Market standard (incognito): the entire window changes, not one panel. Every surface
   reads from tokens, so inverting the tokens is enough — no per-component override, and
   any component added later is dark-correct for free. Shared by the armed preview on the
   landing (.priv) and by the real anonymous screen (.v2-anon).
   Ramp measured, not eyeballed — a near-black base left --faint at 3.6:1 on panels, under
   the 4.5:1 AA floor for small text (the switch notice, every card subtitle). Greyed base
   + lifted text: --faint 5.7:1, --muted 8.7:1, --ink 13:1 on panels. */
.v2-shell.priv,.v2-anon{
  --app:#1b2027; --body:#1b2027; --panel:#252b34; --raise:#2e353f;
  --ink:#f2f5f9; --muted:#c3cbd6; --faint:#9aa4b2;
  --line:#333b46; --line-2:#434d5b;
  --accent:#5b9bd5; --accent-2:#6aa6dd; --accent-soft:#2a3646; --accent-ring:#3f5872;
  --brand-bg:#252b34; --bub-bot:#252b34; --bub-bot-line:#333b46; --bub-me-ink:#e4edf7;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -14px rgba(0,0,0,.6);
  background:var(--app); color:var(--ink);
  transition:background .25s ease, color .25s ease;
}
.v2-shell.priv .v2-newbtn,.v2-anon .v2-newbtn{background:var(--raise);color:var(--ink);border:1px solid var(--line-2);}
.v2-shell.priv textarea,.v2-anon textarea{color:var(--ink);}
/* White on the light blue accent is only 3:1 — the glyph goes dark instead. */
.v2-shell.priv .v2-rnd.send,.v2-anon .v2-rnd.send{color:#12161b;}
.v2-anon-lock{display:inline-flex;align-items:center;margin:0 2px;}
.v2-anon-banner{background:var(--panel);color:var(--muted);font-size:12px;line-height:1.5;padding:10px 16px;border-bottom:1px solid var(--line);}

.v2-rate{display:flex;align-items:center;gap:8px;padding:6px 2px;border-bottom:1px solid var(--line);}
.v2-rate.cur{background:var(--amber-soft);border-radius:7px;padding:6px;border-bottom-color:transparent;}
.v2-rate .rst{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.v2-rate .rst.cur{background:var(--amber);box-shadow:0 0 0 2px var(--amber-ring);} .v2-rate .rst.todo{border:2px solid var(--line-2);}
.v2-rate .nm{flex:1;font-size:12.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.v2-seg{display:flex;gap:3px;flex-shrink:0;}
.v2-seg button{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--raise);border:1px solid var(--line-2);color:var(--muted);cursor:pointer;}
.v2-seg button:hover{border-color:var(--amber);}
.v2-seg button.on{background:var(--amber);color:#fff;border-color:var(--amber);}
.v2-fbtn{width:100%;font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--amber);border:none;border-radius:10px;padding:11px;cursor:pointer;margin-top:9px;}
.v2-fbtn:disabled{background:var(--line);color:var(--faint);cursor:default;}
.v2-fnote{font-size:11px;color:var(--faint);line-height:1.5;padding:5px 2px;font-style:italic;}

/* KPI panel inside the thread: the cards land under the message that opened them,
   so the data is readable on mobile too (the right-hand fiche is off-screen there). */
.v2-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;width:100%;}
.v2-row.panel{max-width:100%;width:100%;}
.v2-panel .v2-kpi{margin-bottom:0;animation:v2kpiIn .28s ease both;}
@keyframes v2kpiIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.v2-kpi{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:4px;}
.v2-kpi-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.v2-kpi-n{font-size:11.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;}
.v2-kpi-n .d{width:7px;height:7px;border-radius:2px;background:var(--accent);}
.v2-kpi-t{font-size:11px;font-weight:600;} .v2-kpi-t.up{color:var(--accent);} .v2-kpi-t.down{color:var(--amber);}
.v2-kpi-v{font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;margin:3px 0 9px;letter-spacing:-.02em;}
.v2-kpi-v .v2-kpi-per{font-size:10.5px;font-weight:500;color:var(--faint);margin-left:6px;letter-spacing:0;}
.v2-kpi.focus{border-color:var(--accent-ring);background:var(--accent-soft);}
/* Bullet gauge: benchmark zones (worst → best) with a marker on the actual value.
   Zones are positioned from real values, so children are absolute, not flexed. */
.v2-gauge{position:relative;height:8px;border-radius:6px;background:var(--line);margin-top:2px;}
.v2-gauge i{position:absolute;top:0;height:100%;}
.v2-gauge i:first-of-type{border-radius:6px 0 0 6px;} .v2-gauge i:last-of-type{border-radius:0 6px 6px 0;}
.v2-gauge .mk{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 1.5px var(--panel);}
.v2-kpi-f{font-size:10.5px;color:var(--faint);margin-top:7px;} .v2-kpi-f b{color:var(--muted);font-weight:600;}

/* list cards (hall: collaborators / conversations) */
.v2-intro{font-size:13px;color:var(--muted);line-height:1.5;padding:2px 2px 2px;}
.v2-card{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;cursor:pointer;background:var(--raise);border:1px solid var(--line);transition:.14s;text-align:left;width:100%;}
.v2-card:hover{border-color:var(--accent-ring);background:var(--accent-soft);}
.v2-card .v2-av{width:34px;height:34px;}
.v2-card .cid{flex:1;min-width:0;} .v2-card .cid .n{display:block;font-size:14px;font-weight:600;} .v2-card .cid .r{display:block;font-size:11.5px;color:var(--faint);margin-top:1px;}
.v2-pill{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;flex-shrink:0;white-space:nowrap;}
.v2-pill.todo{background:var(--line);color:var(--muted);}.v2-pill.doing{background:var(--accent-soft);color:var(--accent);}.v2-pill.done{background:var(--accent-soft);color:var(--accent);}
.v2-progwrap{display:flex;align-items:center;gap:10px;}
.v2-progwrap .l{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;}
.v2-progwrap .trk{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden;}
.v2-progwrap .trk > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));}

/* scrollbars */
.v2-sb-scroll::-webkit-scrollbar,.v2-body::-webkit-scrollbar,.v2-fiche::-webkit-scrollbar,.v2-cgu::-webkit-scrollbar{width:7px;}
.v2-sb-scroll::-webkit-scrollbar-thumb,.v2-body::-webkit-scrollbar-thumb,.v2-fiche::-webkit-scrollbar-thumb,.v2-cgu::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:4px;}
.v2-scrim{display:none;position:absolute;inset:0;background:rgba(20,23,28,.4);z-index:5;}

/* ===================== RESPONSIVE (mobile ≤ 900px) ===================== */
@media (max-width:900px){
  .v2root{--sidebar-w:82vw;}
  .v2-shell{width:100vw;height:100vh;border-radius:0;position:relative;}
  .v2-sidebar{position:absolute;left:0;top:0;bottom:0;z-index:20;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg);}
  .v2-shell.nav-open .v2-sidebar{transform:translateX(0);}
  .v2-fiche{position:absolute;right:0;top:0;bottom:0;width:min(88vw,360px);z-index:20;transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow-lg);}
  .v2-shell.fiche-open .v2-fiche{transform:translateX(0);}
  .v2-shell.nav-open .v2-scrim,.v2-shell.fiche-open .v2-scrim{display:block;}
  .v2-top .burger{display:grid;} .v2-top .fichebtn{display:grid;margin-left:auto;}
  .v2-top .prog{display:none;}
  /* No room for words in the mobile header: the padlock alone carries the control. */
  .v2-anon-btn{padding:0;width:34px;height:34px;justify-content:center;border-radius:9px;}
  .v2-anon-btn .lb{display:none;}
  .v2-anon-btn .v2-ghost{width:18px;height:18px;}
  .v2-body{padding:20px 16px 12px;gap:22px;}
  .v2-row{max-width:92%;}
  .v2-auth{padding:30px 22px;}
}
/* Language selector in sidebar footer */
.v2-lang{appearance:none;-webkit-appearance:none;background:var(--card);border:1px solid var(--border);border-radius:6px;color:var(--fg);font-size:11px;padding:2px 4px;cursor:pointer;max-width:72px;outline:none;}
.v2-lang:focus{border-color:var(--accent);}
/* Confirm modal */
.v2-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:v2fade .15s ease;}
.v2-modal{background:var(--card, #fff);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.15);max-width:380px;width:100%;padding:24px;animation:v2pop .2s ease;}
.v2-modal-cancel{background:var(--bg, #f4f4f5);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:8px 18px;font-size:13px;font-weight:500;cursor:pointer;transition:background .1s;}
.v2-modal-cancel:hover{background:var(--border);}
.v2-modal-ok{background:var(--accent, #0f7a4d);color:#fff;border:none;border-radius:8px;padding:8px 22px;font-size:13px;font-weight:600;cursor:pointer;transition:background .1s;}
.v2-modal-ok:hover{background:#0a5c3a;}
@keyframes v2fade{from{opacity:0}to{opacity:1}}
@keyframes v2pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
/* Campaign pill status variants */
.v2-pill.done{background:var(--accent-soft, #e0f5e9);color:var(--accent, #0f7a4d);}
.v2-pill.review{background:#fef3c7;color:#92400e;}
@media (max-width:400px){
  .v2-body{padding:16px 12px 10px;}
  .v2-bub{font-size:14px;}
}