/* ============================================================
   EQNX — Espace LP · eqnx-lp.css · v4 · 05/10/2026
   THE single stylesheet. Self-contained: defines every token it uses.
   Replaces lp.css (28/09, obsolete) AND tokens.css + components.css (29/09).
   Light theme only. Fonts: self-hosted Questrial / IBM Plex Sans / IBM Plex Mono.
   Add the portal's @font-face block (fonts.css, 'self') before this file.
   ============================================================ */
:root{
  --ground:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F5F3EE;
  --surface-3:#EEEBE3;
  --rule:#E1DDD3;
  --rule-soft:#EEEBE3;
  --rule-strong:#CAC5B8;

  --ink:#0A0908;
  --ink-2:#322F29;
  --ink-3:#48443C;
  --dim:#635E54;
  --dim-2:#857F72;

  --accent:#E8632B;
  --accent-ink:#B8451A;
  --accent-2:#B8451A;
  --accent-wash:#FBE3D6;

  --gain:#4F7A5B;  --gain-wash:#E4ECE3;
  --loss:#A44C3B;  --loss-wash:#F1E1DC;  --loss-ink:#8E3F30;
  --flat:#635E54;
  --warn:#8A6A2E;  --warn-wash:#F0E7D5;  --warn-ink:#6E5424;

  --logo-bg:#FFFFFF; --logo-ink:#48443C;  /* logo plate stays white in both themes */
  --nav-bg:#0A0908; --nav-fg:#ACA698; --nav-fg-on:#FFFFFF; --nav-line:#322F29;

  --fd:'Questrial',system-ui,sans-serif;
  --fb:'IBM Plex Sans',system-ui,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;

  --t-xs:12px; --t-s:13px; --t-b:15px; --t-m:17px; --t-l:22px; --t-xl:32px; --t-xxl:40px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --r-s:3px; --r-m:4px; --r-pill:999px;

  --track-label:.12em;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 1px 2px rgba(10,9,8,.04),0 8px 24px rgba(10,9,8,.06);
  --shadow-seg:0 1px 2px rgba(10,9,8,.08);

  --colonne:1120px;
  --nav-h:64px;
  /* ⚠ 2026-10-05 — SIX COLONNES, PAS SEPT. Demande d'Alex : « FMV/tvpi in
     same cell, same for DPI / distributed ». Les deux colonnes de ratio
     disparaissent au profit d'une seconde ligne dans la case du montant.
     ⚠ Le §9.6 dit « ne jamais redefinir par ecran » : c'est pourquoi la valeur
       change ICI, dans la feuille unique, et nulle part ailleurs.
     logo · nom · souscrit · FMV+TVPI · DPI+montant · action */
  --row-cols:64px minmax(0,1fr) 112px 128px 128px 156px;

  /* ⚠⚠ LES QUATORZE JETONS QUE `lp.js` COMPOSE A L'EXECUTION.
     `couleur(dim, v)` fait `'var(--' + n + ')'` : `--sector-ai` n'existe comme
     chaine NULLE PART, et aucun balayage de `var(--…)` ne peut les trouver.
     Ils ont disparu cinq jours en septembre, et la valeur RECONNUE etait alors
     l'invisible — « AI » rendait un jeton non defini, donc aucun fond, tandis
     qu'une valeur hors canon retombait sur `--dim-2` et s'affichait.
     ⚠ ECART AVEC LES REGLES : le §4 ne les liste pas. A arbitrer avec le design,
       mais ils ne peuvent pas disparaitre en attendant. Gardes par LP-27. */
  --sector-healthtech:var(--ramp-3); --sector-ai:var(--ramp-1); --sector-deeptech:var(--ramp-2);
  --sector-fintech:var(--ramp-4);    --sector-opportunistic:var(--ramp-6);
  --geo-europe:var(--ramp-2);        --geo-us:var(--ramp-6);   --geo-me:var(--ramp-7);
  --type-primary:var(--ramp-1);      --type-secondary:var(--ramp-4);
  --type-convertible:var(--ramp-2);  --type-mixed:var(--ramp-6);
  --maturity:var(--ramp-3);          --map-land:var(--surface-3);
}
@media (max-width:720px){ :root{ --nav-h:56px; } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink-2);font-family:var(--fb);
  font-size:var(--t-b);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100dvh}
a{color:var(--accent-ink);text-decoration:none}
a:hover{color:var(--ink)}
img{display:block;max-width:100%}
.num,.hrow-f i,.kpi-v,.pt td,.det .v{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 4.1 shell ---------- */
.ptop{position:sticky;top:0;z-index:50}
.pnav{background:var(--nav-bg)}
.pnav-in{max-width:var(--colonne);margin:0 auto;padding:0 var(--s-5);height:var(--nav-h);
  display:flex;align-items:center;gap:40px}
.pb-logo{height:18px;width:auto}
.pnav-links{flex:1;display:flex;gap:28px;height:100%;overflow-x:auto;scrollbar-width:none}
.pnav-links::-webkit-scrollbar{display:none}
.pnav-links a{display:flex;align-items:center;height:100%;white-space:nowrap;
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--nav-fg);border-bottom:2px solid transparent;transition:color .16s var(--ease)}
.pnav-links a:hover{color:var(--nav-fg-on)}
.pnav-links a.on{color:var(--nav-fg-on);border-bottom-color:var(--accent)}
.who{display:flex;align-items:center;gap:14px}
.lsel-b{background:none;border:1px solid var(--nav-line);border-radius:var(--r-pill);padding:4px 10px;
  color:var(--nav-fg);font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;cursor:pointer}
.lsel-b:hover{color:var(--nav-fg-on)}
.whob{background:none;border:0;padding:0;cursor:pointer}
.av{width:32px;height:32px;border-radius:var(--r-pill);background:var(--ink-2);color:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:var(--t-s)}
.ro-band{background:var(--accent-wash);border-bottom:1px solid var(--accent)}
.ro-band p{max-width:var(--colonne);margin:0 auto;padding:var(--s-2) var(--s-5);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
@media (max-width:720px){
  .pnav-in{flex-wrap:wrap;height:auto;padding-top:0;gap:0 var(--s-4)}
  .pb-logo{order:1;margin:19px 0}
  .who{order:2;margin-left:auto}
  .pnav-links{order:3;flex:0 0 100%;height:44px;gap:22px;border-top:1px solid var(--nav-line)}
}

/* ---------- page ---------- */
.pbody{max-width:var(--colonne);margin:0 auto;padding:var(--s-7) var(--s-5) 96px;
  display:flex;flex-direction:column;gap:var(--s-7)}
.phd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-6);flex-wrap:wrap}
.ph{margin:0;font-family:var(--fd);font-weight:400;font-size:var(--t-xl);line-height:1.15;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.crumb{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.crumb a{color:var(--dim)} .crumb a:hover{color:var(--ink)}
.ft{border-top:1px solid var(--rule);padding-top:20px;display:flex;justify-content:space-between;gap:var(--s-5);
  flex-wrap:wrap;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ---------- 4.1 bis account selector ---------- */
.acct{display:flex;gap:2px;padding:3px;background:var(--surface-3);border-radius:var(--r-m)}
.acct button{border:0;cursor:pointer;height:34px;padding:0 var(--s-4);border-radius:var(--r-s);
  background:transparent;color:var(--dim);white-space:nowrap;
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  transition:color .16s var(--ease),background .16s var(--ease)}
.acct button:hover{color:var(--ink)}
.acct button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-seg)}
@media (max-width:720px){ .acct{width:100%} .acct button{flex:1;padding:0 var(--s-2)} }

/* ---------- 4.4 KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{background:var(--ground);padding:var(--s-5) 20px;min-width:0;display:flex;flex-direction:column;gap:6px}
.kpi-l{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim)}
.kpi-v{font-family:var(--fd);font-weight:400;font-size:clamp(22px,3vw,var(--t-xxl));line-height:1;
  white-space:nowrap;color:var(--ink)}
.kpi-s{font-size:var(--t-s);color:var(--dim);min-height:20px}
/* Texte secondaire DANS la valeur d un KPI (unite, « not yet valued »).
   .kpi-v est en clamp(22px..40px) : un mot entier y serait enorme. Sur l echelle,
   jamais en dur — 05/10/2026, remplace deux font-size inline de lp.js (15px, 14px). */
.kpi-v .kpi-sec{font-size:var(--t-b)}
.kpi--gain .kpi-v{color:var(--gain)}
.kpi--loss .kpi-v{color:var(--loss)}
.kpi--na .kpi-v{color:var(--dim-2)}
@media (max-width:720px){ .kpis,.kpis--3{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- 4.5 card ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m)}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-5);flex-wrap:wrap;
  padding:20px var(--s-5);border-bottom:1px solid var(--rule)}
.card-hd h4{margin:0;flex-shrink:0;white-space:nowrap;font-family:var(--fd);font-weight:400;font-size:var(--t-m);
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.note{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.06em;color:var(--dim)}
.card-b{padding:var(--s-2) var(--s-5) var(--s-4)}
.card-b--flush{padding:0}
.det{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:10px 0;border-top:1px solid var(--rule-soft)}
.det:first-child{border-top:0}
.det .k{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.det .v{font-weight:500;color:var(--ink);text-align:right}

/* ---------- 4.3 logo cartouche ---------- */
.lg{width:64px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:var(--r-m);background:var(--logo-bg);padding:4px 6px;
  font-family:var(--fd);font-size:var(--t-s);color:var(--logo-ink)}
.lg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lg--vide{border-color:transparent;background:transparent}
.lg--lg{width:160px;height:64px;padding:8px 12px;font-size:var(--t-l)}

/* ---------- 4.2 position row ---------- */
.hscroll{overflow-x:auto}
.hlist{min-width:780px}
.hrow{display:grid;grid-template-columns:var(--row-cols);gap:var(--s-4);align-items:center;
  padding:14px var(--s-5);border-top:1px solid var(--rule);color:var(--ink-2);background:var(--surface);
  transition:background .16s var(--ease)}
a.hrow:hover{background:var(--surface-2);color:var(--ink-2)}
.hrow-n{display:flex;flex-direction:column;min-width:0;font-weight:500;color:var(--ink)}
.hrow-n,.hrow-n small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow-n small{font-size:var(--t-s);font-weight:400;color:var(--dim)}
.hrow-f{text-align:right;min-width:0}
.hrow-f b{display:none}
.hrow-f i{font-style:normal;font-weight:500;color:var(--ink)}
/* ⚠ 2026-10-05 — LA SECONDE LIGNE D'UNE CASE. Une case porte sa valeur et sa
   seconde lecture : la FMV et son multiple, le DPI et son montant. `<u>` est
   choisi parce que le balisage de lp.js ne l'emploie nulle part ailleurs ;
   son soulignement par defaut est retire. */
.hrow-s{display:block;font-style:normal;text-decoration:none;margin-top:2px;
  font-size:var(--t-s);font-weight:400;line-height:1.3;color:var(--dim)}

/* ⚠ titre de SECTION, pas de page : un releve en contient plusieurs. Ni `.ph`
   (le titre de PAGE), ni `.card-hd h4` qui exige une carte autour. */
.sec-h{margin:var(--s-5) 0 var(--s-3);font-family:var(--fd);font-weight:400;
  font-size:var(--t-m);line-height:1.2;color:var(--ink);text-transform:uppercase;
  letter-spacing:.02em}

.hrow-c{display:flex;justify-content:flex-end;align-items:center;gap:6px;
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  transition:color .16s var(--ease)}
.hrow-c svg{width:12px;height:12px;transition:transform .16s var(--ease)}
a.hrow:hover .hrow-c{color:var(--accent-ink)}
a.hrow:hover .hrow-c svg{transform:translateX(3px)}

.hrow--head{height:40px;padding-top:0;padding-bottom:0;border-top:0;background:var(--surface-2);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.hrow--head .hrow-f b{display:inline;font-weight:400}

.hrow--sub{padding-top:8px;padding-bottom:8px;border-top-color:var(--rule-soft);font-size:var(--t-s)}
.hrow--sub .hrow-n{font-weight:400;font-size:var(--t-s)}
.hrow--sub .hrow-f i{font-weight:400}
.hrow--sub .lg{visibility:hidden}

.hrow--tot{border-top-color:var(--ink);background:var(--surface)}
.hrow--tot .hrow-n{font-family:var(--fm);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.hrow--tot .hrow-n small{font-family:var(--fb);letter-spacing:0;text-transform:none}
.hrow--tot .hrow-f i{font-weight:600}

.num.up{color:var(--gain)} .num.down{color:var(--loss)} .num.flat{color:var(--flat)}
.num.na{color:var(--dim-2)}

@media (max-width:720px){
  .hlist{min-width:0}
  .hrow--head{display:none}
  .hrow{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);row-gap:var(--s-3)}
  .hrow .lg{grid-column:1;grid-row:1}
  .hrow-n{grid-column:2 / -1;grid-row:1}
  .hrow-f{text-align:left}
  .hrow-f b{display:block;font-family:var(--fm);font-weight:400;font-size:var(--t-xs);letter-spacing:.1em;
    text-transform:uppercase;color:var(--dim)}
  .hrow-f:nth-of-type(1),.hrow-f:nth-of-type(3){grid-column:2}
  .hrow-f:nth-of-type(2),.hrow-f:nth-of-type(4){grid-column:3}
  .hrow-c{grid-column:1 / -1;justify-content:flex-start;padding-top:var(--s-3);border-top:1px solid var(--rule-soft)}
  .hrow--sub{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-left:var(--s-5)}
  .hrow--sub .lg{display:none}
  .hrow--sub .hrow-n{grid-column:1 / -1}
  .hrow--sub .hrow-f:nth-of-type(1),.hrow--sub .hrow-f:nth-of-type(3){grid-column:1}
  .hrow--sub .hrow-f:nth-of-type(2),.hrow--sub .hrow-f:nth-of-type(4){grid-column:2}
}

/* ---------- 4.6 company header ---------- */
.soch{display:flex;flex-direction:column;gap:var(--s-4);padding-bottom:var(--s-6);border-bottom:1px solid var(--rule)}
.soch-n{margin:0;font-family:var(--fd);font-weight:400;font-size:var(--t-xl);text-transform:uppercase;color:var(--ink)}
.soch-d{margin:0;max-width:60ch;font-size:var(--t-m);color:var(--ink-2)}
.soch-m{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.cx{display:inline-flex;gap:6px;align-items:baseline;border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:3px 10px;font-size:var(--t-s);color:var(--ink-2)}
.cx b{font-family:var(--fm);font-weight:400;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.soch-w{align-self:flex-start;font-weight:500}
.soch-w:hover{text-decoration:underline}

/* ---------- 4.7 deal card ---------- */
.deal{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--accent);border-radius:var(--r-m);
  padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4)}
.deal-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.deal-name{font-family:var(--fd);font-size:var(--t-l);text-transform:uppercase;color:var(--ink)}
.deal-round{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-ink);white-space:nowrap}
.deal-canon{margin:0;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deal-facts{display:flex;flex-direction:column}
.deal-facts .det:first-child{border-top:1px solid var(--rule-soft)}

/* ---------- buttons ---------- */
.btn{white-space:nowrap;justify-content:center;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 20px;border-radius:var(--r-m);border:0;cursor:pointer;
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;
  transition:background .16s var(--ease),transform .1s var(--ease)}
.btn--p{background:var(--ink);color:var(--ground)}
.btn--p:hover{background:var(--ink-2);color:var(--ground)}
.btn:active{transform:translateY(.5px) scale(.99)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn--t{background:none;padding:0;height:auto;color:var(--accent-ink)}
.deal .btn{align-self:flex-start}

/* ---------- 4.8 settings ---------- */
.setr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);padding:12px 0;border-bottom:1px solid var(--rule-soft)}
.setr:last-child{border-bottom:0}
.setr b{font-weight:400;color:var(--ink)}
.setr i{font-style:normal;color:var(--dim);text-align:right}
.assur{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.assur li{display:flex;gap:10px;align-items:baseline;color:var(--ink-2)}
.assur li::before{content:"";flex:none;width:12px;height:2px;background:var(--accent);transform:translateY(-4px)}

/* ---------- 4.9 table ---------- */
.ptab{overflow-x:auto}
.pt{width:100%;border-collapse:collapse;font-size:var(--t-b)}
.pt th{text-align:right;padding:0 var(--s-5);height:40px;background:var(--surface-2);white-space:nowrap;
  font-family:var(--fm);font-weight:400;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pt td{text-align:right;padding:12px var(--s-5);border-top:1px solid var(--rule);color:var(--ink);white-space:nowrap}
.pt th:first-child,.pt td:first-child{text-align:left}
.pt tr.future td{color:var(--dim)}
.pt tr.future td small{display:block;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.pt tr.tot td{border-top-color:var(--ink);font-weight:600}
@media (max-width:720px){ .pt th:first-child,.pt td:first-child{position:sticky;left:0;background:var(--surface)} }

/* ---------- 4.10 states ---------- */
.empty{padding:var(--s-7) var(--s-5);text-align:center;color:var(--dim)}
.empty p{margin:0}
.warn,.err{border-left:3px solid;border-radius:0 var(--r-m) var(--r-m) 0;padding:20px var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-2);color:var(--ink-2)}
.warn{background:var(--warn-wash);border-left-color:var(--warn)}
.err{background:var(--loss-wash);border-left-color:var(--loss)}
.warn p,.err p{margin:0}
.st-l{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase}
.warn .st-l{color:var(--warn-ink)}
.err .btn--t{color:var(--loss-ink);font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase}
.sk{background:var(--surface-2);border-radius:var(--r-s);animation:sk 1.4s var(--ease) infinite alternate}
@keyframes sk{to{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .sk{animation:none} *{transition:none!important} }
/* light only — dark theme removed by owner decision 30/09/2026; do not reintroduce */
:root{color-scheme:light}

/* ---------- tags / filters ---------- */
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tag{border:1px solid var(--rule);background:var(--surface);border-radius:var(--r-pill);height:30px;padding:0 14px;cursor:pointer;
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tag:hover{border-color:var(--rule-strong);color:var(--ink)}
.tag[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

/* ============================================================
   v4 · 05/10/2026 — the families that sat in pont.css.
   Written against the rendered DOM of the 11 screens (dom/).
   After this block pont.css has nothing left to carry: delete it.
   ============================================================ */
:root{
  --bar-h:8px;
  /* categorical ramp for allocation bars, keys and charts — lp.js references --ramp-1..7 */
  --ramp-1:#E8632B; --ramp-2:#4A5C6E; --ramp-3:#4F7A5B; --ramp-4:#A88B4A;
  --ramp-5:#A44C3B; --ramp-6:#8A9BAA; --ramp-7:#CAC5B8;
  --shadow-lift:0 1px 2px rgba(10,9,8,.05),0 12px 32px -12px rgba(10,9,8,.18);
}

/* ---------- harness / shell extras ---------- */
.device{background:var(--surface);width:100%;overflow:auto}
.device[data-vp="desktop"]{max-width:100%}
.viewas{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-2) var(--s-5);
  background:var(--accent-wash);border-bottom:1px solid var(--accent);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.viewas b{font-weight:600}
.viewas a{margin-left:auto;color:var(--accent-ink);border:1px solid var(--accent);border-radius:var(--r-m);
  padding:var(--s-1) var(--s-3);white-space:nowrap}
.viewas a:hover{background:var(--accent-ink);color:var(--surface)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:var(--s-3) var(--s-4);background:var(--surface);
  color:var(--ink);border:1px solid var(--ink);font-size:var(--t-s)}
.skip:focus{left:0}
.mnav{display:none}
.device[data-vp="mobile"] .mnav{display:flex;flex:0 0 auto;background:var(--surface);border-top:1px solid var(--rule);
  padding:var(--s-2) var(--s-1) calc(var(--s-2) + env(safe-area-inset-bottom,0px))}
.mtab{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.mtab.is-on{color:var(--ink);box-shadow:inset 0 2px 0 var(--accent)}
.psub{margin:calc(var(--s-5) * -1) 0 0;max-width:64ch;font-size:var(--t-b);line-height:1.55;color:var(--dim)}
.dim{color:var(--dim)}
.th{font-size:var(--t-b);line-height:1.55;color:var(--ink-3)}

/* account menu (avatar popover) */
.acctm{position:absolute;top:calc(100% + var(--s-2));right:0;width:280px;max-width:86vw;z-index:40;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);box-shadow:var(--shadow-lift);overflow:hidden}
.acctm[hidden]{display:none}
.acctm-i{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);color:var(--ink);border-bottom:1px solid var(--rule-soft)}
.acctm-i:hover{background:var(--surface-2);color:var(--ink)}
.acctm-i svg{margin-top:2px;color:var(--dim);flex-shrink:0}
.acctm-i b{display:block;font-size:var(--t-s);font-weight:500}
.acctm-i i{display:block;font-style:normal;font-size:var(--t-xs);color:var(--dim);margin-top:1px}
.acctm-f{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);background:var(--surface-2)}
.av--lg{width:44px;height:44px;font-size:var(--t-b);flex:0 0 auto}

/* language selector */
.lsel{position:relative;display:flex;align-items:center}
.lsel-d{display:none;position:absolute;top:100%;right:0;margin-top:var(--s-2);z-index:60;min-width:140px;padding:var(--s-1) 0;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);box-shadow:var(--shadow-lift)}
.lsel.is-open .lsel-d,.is-open > .lsel-d{display:block}
.lsel-i{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;
  padding:var(--s-2) var(--s-4);font:inherit;font-size:var(--t-s);color:var(--ink-2);text-align:left}
.lsel-i:hover{background:var(--surface-2);color:var(--ink)}
.lsel-i.is-on{color:var(--ink);font-weight:500}
.lsel-i.is-on::after{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--accent)}
.lsel-i[disabled]{opacity:.55;cursor:progress}
.qs.is-ko,.lsel-i.is-ko{border-color:var(--loss);color:var(--loss)}

/* ---------- primitives ---------- */
.btn--g{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn--g:hover{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:var(--s-2);height:30px;padding:0 14px;cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--surface);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.chip:hover{border-color:var(--rule-strong);color:var(--ink)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.device[data-vp="mobile"] .chip{min-height:44px}
.lbl{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.scope{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-5);
  border-bottom:1px solid var(--rule);background:var(--surface-2)}
.st{display:inline-block;padding:2px var(--s-2);border-radius:var(--r-s);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;background:var(--surface-3);color:var(--dim)}
.st.ok{background:var(--gain-wash);color:var(--gain)}
.ok{color:var(--gain)}
.cx--none{color:var(--dim);border-style:dashed}
.cx i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--c,var(--dim-2));flex:none;align-self:center}
.lg--img{background:var(--logo-bg);padding:3px 5px}
.lg--img img{width:100%;height:100%;object-fit:contain}
.lg-name{font-family:var(--fd);font-weight:400;font-size:var(--t-m);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);align-self:center;line-height:1.1}
.soch-b{flex:1;min-width:0}
.det--txt{display:block}
.det--txt > div{padding:var(--s-3) 0;color:var(--ink-2)}
.hgrp{display:grid;gap:0}
.hsub{display:grid;gap:0}
.setl{display:flex;flex-direction:column;gap:2px}
.int{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:flex-end}
.dsub{margin:0 0 var(--s-2);font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim)}
.dsub ~ .dsub,.docs + .dsub{margin-top:var(--s-5)}
.rep{font-size:var(--t-b);line-height:1.62;color:var(--ink-2)}
.rep p{margin:0 0 var(--s-3)} .rep p:last-child{margin-bottom:0}
.rep b{color:var(--ink);font-weight:600}

/* ---------- login ---------- */
body:has(.pbody--login){min-height:100dvh;display:grid;align-items:center;padding:var(--s-5)}
.pbody--login{display:block;width:100%;max-width:420px;min-height:0;margin:0 auto;padding:0 var(--s-6) var(--s-6);
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-m);overflow:hidden}
.login{width:100%;text-align:center}
.login-brand{margin:0 calc(var(--s-6) * -1);padding:var(--s-7) var(--s-6) var(--s-6);background:var(--surface-2);
  border-bottom:2px solid var(--accent)}
.login-logo{display:block;height:24px;aspect-ratio:628/168;margin:0 auto;
  background:url("/assets/eqnx-logo-black.png") center/contain no-repeat}
.login h4{margin:var(--s-6) 0 var(--s-2);font-family:var(--fd);font-weight:400;font-size:var(--t-l);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.login p{margin:0 0 var(--s-5);font-size:var(--t-b);line-height:1.55;color:var(--dim)}
.login-sso{display:grid;gap:var(--s-2)}
.login-sso button{display:flex;align-items:center;justify-content:center;gap:var(--s-2);height:40px;padding:0 var(--s-4);cursor:pointer;
  border:1px solid var(--rule-strong);border-radius:var(--r-m);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--t-s);font-weight:500}
.login-sso button:hover{border-color:var(--ink)}
.login-sso button[disabled]{cursor:not-allowed;opacity:.45}
.login-sso button[disabled]:hover{border-color:var(--rule-strong)}
.login-sso svg{width:16px;height:16px;flex:0 0 16px}
.login-sso-note{margin:var(--s-1) 0 0;font-size:var(--t-xs);color:var(--dim)}
.login-or{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-5) 0 var(--s-4)}
.login-or::before,.login-or::after{content:"";height:1px;flex:1;background:var(--rule)}
.login-or span{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.login-f{display:grid;gap:var(--s-3)}
.login-f input{height:44px;padding:0;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;background:transparent;
  font:inherit;font-size:var(--t-m);text-align:center;color:var(--ink)}
.login-f input:focus{outline:none;border-bottom-color:var(--ink)}
.login-f button{justify-content:center;width:100%}
.login-sent{padding:var(--s-5);border:1px solid var(--rule);border-left:3px solid var(--gain);border-radius:0 var(--r-m) var(--r-m) 0;
  background:var(--gain-wash);font-size:var(--t-b);line-height:1.6;color:var(--ink-2);text-align:left}
.login-err{margin-top:var(--s-4);font-size:var(--t-s);color:var(--loss-ink)}
.login-h{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--rule);font-size:var(--t-xs);color:var(--dim)}
.login-h a{color:var(--accent-ink)}
.device[data-vp="mobile"] .pbody--login{padding:0 var(--s-5) var(--s-6)}
.device[data-vp="mobile"] .login-brand{margin:0 calc(var(--s-5) * -1);padding:var(--s-6) var(--s-5) var(--s-5)}
@media (max-width:720px){ .pbody--login{padding:0 var(--s-5) var(--s-6)} .login-brand{margin:0 calc(var(--s-5) * -1)} }

/* ---------- performance block ---------- */
.perfg{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.perf-d{min-width:0}
.perf-d--full{grid-column:1 / -1}
.perf-h{margin-bottom:var(--s-3);font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim)}
.perf-r{display:grid;grid-template-columns:minmax(96px,1fr) minmax(60px,3fr) auto;gap:var(--s-3);align-items:center;
  padding:var(--s-2) 0;border-top:1px solid var(--rule-soft)}
.perf-r:first-of-type{border-top:0}
.perf-r--nb{grid-template-columns:1fr auto}
.perf-r--sep{border-top:1px solid var(--ink);margin-top:var(--s-2);padding-top:var(--s-3)}
.perf-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-s);color:var(--ink-2)}
.perf-r b{min-width:56px;text-align:right;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.perf-sw{display:inline-block;width:8px;height:8px;margin-right:var(--s-2);border-radius:var(--r-s);flex:0 0 auto;background:var(--c,var(--dim-2))}
.perf-pct{margin-left:var(--s-2);font-weight:400;color:var(--dim)}
.perf-mult{margin-left:var(--s-3);font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);font-variant-numeric:tabular-nums}

/* allocation bars + keys */
.alloc{display:grid;gap:var(--s-5)}
.alloc-g .h{display:flex;align-items:baseline;gap:var(--s-2);margin-bottom:var(--s-2)}
.alloc-g .h b{font-family:var(--fm);font-weight:400;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.alloc-g .h span{margin-left:auto;font-size:var(--t-xs);color:var(--dim)}
.abar{display:flex;gap:2px;height:var(--bar-h);overflow:hidden;background:var(--surface-2)}
.abar i{display:block;height:100%;min-width:2px;font-style:normal}
.abar--perf{margin:2px 0 var(--s-3)}
.akey{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-3)}
.akey span{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-s);color:var(--ink-2)}
.akey span i{width:10px;height:10px;border-radius:var(--r-s);flex:0 0 auto;font-style:normal}
.akey b{font-family:var(--fm);font-weight:400;font-size:var(--t-xs);color:var(--dim);font-variant-numeric:tabular-nums}

/* charts */
.chart-scroll{overflow-x:auto}
.chart-scroll svg{display:block;min-width:520px;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-bottom:var(--s-3)}
.legend span{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-s);color:var(--ink-2)}
.sw{display:inline-block;width:10px;height:10px;border-radius:var(--r-s);box-sizing:border-box}
.sw--hatch{background-image:repeating-linear-gradient(45deg,var(--loss) 0 1.5px,transparent 1.5px 5px)}
.qx{font-family:var(--fm);font-weight:500;fill:var(--dim);text-anchor:middle}
.qx--alt{display:initial}
.geo-map{margin-top:var(--s-4);min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--dim-2)}
.geo-map svg{max-height:260px;width:auto;max-width:100%;height:auto}
.geo-map-e{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ---------- deals ---------- */
.deals{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.deal-b{flex:1;display:flex;flex-direction:column;gap:var(--s-4)}
.deal-b h4{margin:0;font-family:var(--fd);font-weight:400;font-size:var(--t-m);text-transform:uppercase;color:var(--ink)}
.deal-b .th{color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.deal-logo{height:40px;display:flex;align-items:center}
.deal-logo img{height:100%;width:auto;max-width:160px;object-fit:contain;object-position:left center}
.deal-cta{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:auto}
.deal .deal-cta .btn{align-self:auto}
.card-b > .deal-cta{margin-top:var(--s-5)}
.card-b > .th + .deal-cta{margin-top:var(--s-4)}
.canon3{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0 var(--s-1)}
.coinv{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ci{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3);border:1px solid var(--rule);border-radius:var(--r-m);background:var(--surface)}
.coinv .ci{display:inline-flex;align-items:center;gap:var(--s-2);padding:3px 12px;border-radius:var(--r-pill);font-size:var(--t-s);color:var(--ink-2)}
.ci i{flex:0 0 auto;width:20px;height:20px;border-radius:var(--r-pill);display:grid;place-items:center;font-style:normal;font-size:var(--t-xs);font-weight:600;margin-top:1px;background:var(--surface-3);color:var(--dim)}
.ci.ok i{background:var(--gain-wash);color:var(--gain)}
.ci b{display:block;font-size:var(--t-s);font-weight:500;color:var(--ink)}
.ci span{display:block;margin-top:2px;font-family:var(--fm);font-size:var(--t-xs);color:var(--dim)}
.ci-note{margin-top:var(--s-2);font-size:var(--t-xs);color:var(--dim)}
.disc{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--rule)}
.disc-h{margin-bottom:var(--s-2);font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim)}
.disc p{margin:0 0 var(--s-2);font-size:var(--t-s);line-height:1.55;color:var(--dim)}
.disc p:last-child{margin-bottom:0}

/* ---------- documents ---------- */
.docs{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.doc{display:flex;align-items:center;gap:var(--s-4);min-height:56px;padding:var(--s-3) 0;border-bottom:1px solid var(--rule)}
.doc-ic{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--r-m);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;background:var(--surface-3);color:var(--ink-3)}
.doc-ic.pdf,.pdf{background:var(--loss-wash);color:var(--loss-ink)}
.doc-ic.html,.html{background:var(--surface-3);color:var(--ink-3)}
.doc-m{flex:1;min-width:0}
.doc-m .t{font-size:var(--t-b);font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-m .s{margin-top:2px;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.04em;color:var(--dim)}
.doc-a{display:flex;flex-wrap:wrap;gap:var(--s-2)}
@media (max-width:720px){ .doc{flex-wrap:wrap} .doc-a{width:100%;padding-left:52px} }

/* quarter selector */
.qsel{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-5)}
.qs{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--s-2) var(--s-4);cursor:pointer;
  border:1px solid var(--rule);border-radius:var(--r-m);background:var(--surface);font:inherit;font-size:var(--t-s);font-weight:500;color:var(--ink)}
.qs:hover{border-color:var(--rule-strong)}
.qs span{font-family:var(--fm);font-weight:400;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.qs.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.qs.is-on span{color:var(--ink)}

/* ---------- messages, contact, priorities ---------- */
.msg{margin-bottom:var(--s-5);padding:20px var(--s-5);border-left:3px solid var(--accent);border-radius:0 var(--r-m) var(--r-m) 0;background:var(--accent-wash)}
.msg-k{margin-bottom:var(--s-2);font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-ink)}
.msg-b{font-size:var(--t-b);line-height:1.6;color:var(--ink)}
.msg-a{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-4)}
.msg-s{font-size:var(--t-xs);color:var(--dim)}
.ctc{display:flex;gap:var(--s-4);align-items:flex-start}
.ctc-n{font-family:var(--fd);font-weight:400;font-size:var(--t-m);text-transform:uppercase;color:var(--ink)}
.ctc-m{display:inline-block;margin-top:4px;font-family:var(--fm);font-size:var(--t-s);color:var(--accent-ink)}
.ctc-m:hover{text-decoration:underline}

/* ---------- capital account statement ---------- */
.stmt{padding:var(--s-6);background:var(--surface)}
.stmt-hd{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--s-5);padding-bottom:var(--s-5);border-bottom:2px solid var(--ink)}
.stmt-logo{height:20px;aspect-ratio:628/168;background:url("/assets/eqnx-logo-black.png") left center/contain no-repeat}
.stmt-b{font-family:var(--fd);font-size:var(--t-m);letter-spacing:.14em}
.stmt-b i{font-style:normal;color:var(--accent)}
.stmt-t{flex:1;min-width:180px}
.stmt-t div{font-family:var(--fd);font-weight:400;font-size:var(--t-l);line-height:1.15;text-transform:uppercase;color:var(--ink)}
.stmt-t span{display:block;margin-top:4px;font-size:var(--t-s);color:var(--dim)}
.stmt-id{display:grid;gap:2px;text-align:right;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.04em;color:var(--dim)}
.stmt-who{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:var(--s-5) 0;border-bottom:1px solid var(--rule);margin-bottom:var(--s-2)}
.stmt-who .s{margin-top:2px;font-size:var(--t-xs);color:var(--dim)}
.stmt-def{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--rule)}
.stmt-def h5{margin:0 0 var(--s-2);font-family:var(--fm);font-weight:500;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.stmt-def p{margin:0;font-size:var(--t-xs);line-height:1.55;color:var(--dim)}
.stmt-warn{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--rule);font-size:var(--t-xs);line-height:1.6;color:var(--dim)}
/* fixed table: headers wrap (FR labels are longer), data cells stay on one line */
.pt--stmt{font-size:var(--t-s);table-layout:fixed;min-width:1130px}
.pt--stmt thead th{white-space:normal;line-height:1.2;height:auto;padding:var(--s-2) var(--s-3)}
.pt--stmt td{padding:var(--s-2) var(--s-3);white-space:nowrap}
.pt--stmt col.c-tgt{width:150px}
.pt--stmt col.c-dat{width:140px}
.pt--stmt col.c-veh{width:210px}
.pt--stmt col.c-amt{width:108px}
.pt--stmt col.c-qty{width:116px}
.pt--stmt col.c-pct{width:104px}
.pt--stmt col.c-mul{width:78px}
.pt--stmt td:nth-child(3),.pt--stmt th:nth-child(3){text-align:left;white-space:normal;line-height:1.35}
.pt--stmt td:first-child{white-space:normal;line-height:1.3}
.pt--stmt td small{display:block;margin-top:1px;font-size:var(--t-xs);font-weight:400;color:var(--dim)}
.pt--stmt tr.veh td{font-weight:600}
.pt--stmt tr.spv td,.spv td{font-size:var(--t-xs)}
.pt--stmt tr.spv td:first-child{border-left:2px solid var(--rule)}
.pt--stmt tr.spv td:nth-child(3){padding-left:var(--s-4)}
.pt--stmt tr.cls td,.cls td{font-size:var(--t-xs);color:var(--dim)}
.pt--stmt tr.cls td:first-child{border-left:2px solid var(--rule)}
.pt--stmt tr.cls td:nth-child(3){padding-left:var(--s-6);font-style:italic}
.veh{font-weight:600}
@media print{ .stmt{padding:0} .pt--stmt td,.pt--stmt th{padding:var(--s-1) var(--s-2)} }

/* misc singletons emitted by lp.js */
.h{display:flex;align-items:baseline;gap:var(--s-2)}
.s{font-size:var(--t-xs);color:var(--dim)}
.t{font-weight:500;color:var(--ink)}

@media (max-width:560px){
  .chart-scroll svg{min-width:0}
  .qx--alt{display:none}
  .abar{height:12px}
  .geo-map svg{max-height:180px}
  .stmt{padding:var(--s-5) var(--s-4)}

  /* ⚠ 2026-10-05 — UNE SEULE COLONNE DE VALEURS SOUS 560 px.
     Mesuré à 360 px : la grille de 720 (`64px 1fr 1fr`) laisse 108 px par case,
     et « FMV · TVPI » en mono 12 px suivi d'un montant à six chiffres déborde
     de 25 px. Le débordement remontait jusqu'à `.pbody` (+59 px), donc la page
     entière glissait latéralement.
     Les valeurs s'empilent alors sur une colonne, chacune pleine largeur, avec
     son libellé au-dessus — la forme que le §17 donne déjà pour 720, poussée
     d'un cran. Le padding latéral reste à 24 px, comme le §17 l'exige. */
  .hrow{grid-template-columns:var(--s-8) minmax(0,1fr)}
  .hrow-f,
  .hrow-f:nth-of-type(1),.hrow-f:nth-of-type(2),
  .hrow-f:nth-of-type(3),.hrow-f:nth-of-type(4){grid-column:2;text-align:left}
  .hrow--sub{grid-template-columns:minmax(0,1fr)}
  .hrow--sub .hrow-f,
  .hrow--sub .hrow-f:nth-of-type(1),.hrow--sub .hrow-f:nth-of-type(2),
  .hrow--sub .hrow-f:nth-of-type(3),.hrow--sub .hrow-f:nth-of-type(4){grid-column:1}
  /* la seconde ligne d'une case se met a cote de sa valeur : empilees, deux
     etages par case feraient huit lignes pour une position. */
  /* ⚠ la valeur et sa seconde lecture tiennent sur une ligne, et CETTE LIGNE
     PEUT REVENIR : a 360 px, « 208 188 € 168,63× » depassait de 7 px la colonne
     pleine largeur. `nowrap` a sa place dans un tableau a colonnes fixes, pas
     dans une case qui occupe toute la largeur du telephone. */
  .hrow-f,.hrow-f b{white-space:normal}
  /* un montant ne se coupe JAMAIS en plein nombre : i et u restent entiers,
     la ligne casse entre les deux quand la case est trop etroite. */
  .hrow-f i{white-space:nowrap}
  /* MESURE, pas intuition : a 360 px la case fait 134 px, et 208 188 EUR
     (76) + 168,63x (56) + l ecart (8) font 140. Surtout, lp.js n emet
     AUCUNE espace entre les deux : white-space:normal ne trouve donc aucun
     point de coupure et la case deborde quoi qu on ecrive. Sous 560 la seconde
     lecture reprend sa propre ligne - la forme de base du composant. */
  .hrow-s{display:block;margin-top:2px;margin-left:0;white-space:nowrap}

  /* ⚠ ECART ASSUME AVEC LE §7.1, qui dit le titre de carte « jamais coupe »
     (`nowrap`, `flex-shrink:0`). Mesure a 360 px : « Where the performance
     comes from » en Questrial 17 px capitales sort de 59 px hors du cadre et
     pousse toute la page. Sous 560, un titre long n'a PAS la place : il passe
     donc a la ligne plutot que de deborder. A signaler au design. */
  .card-hd h4{white-space:normal;flex-shrink:1}

  /* la nav du bas debordait de 5 px a 360 : on resserre l'ecart HORIZONTAL,
     jamais la hauteur — le §17 exige 44 px de cible tactile. */
  .mtab{padding-left:var(--s-1);padding-right:var(--s-1);min-width:0}
  .mtab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* KPI band nested in a card */
.ph{flex:1 1 auto;min-width:0}
.card-b > .kpis{margin:var(--s-2) 0 0;border-top:0}
.card .kpi{background:var(--surface);padding-left:0}
.card .kpi + .kpi{padding-left:20px}
.deal-name{line-height:1.15;min-width:0}
div.deal-canon{display:flex;flex-wrap:wrap;gap:var(--s-2);-webkit-line-clamp:unset;overflow:visible}
.cx{white-space:nowrap}
.qs{white-space:nowrap;justify-content:center;min-height:40px}
.chip{height:auto;min-height:32px;padding:6px 14px;white-space:nowrap}
.chip .k{font-family:var(--fm);letter-spacing:.06em;text-transform:none;color:var(--dim-2)}
.chip[aria-pressed="true"] .k{color:var(--rule-strong)}
.stmt-who .k{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.stmt-who .v{margin-top:4px;font-weight:500;color:var(--ink)}
.login-sso-note{margin-top:var(--s-2)}
.card > .deal-cta{margin:0;padding:0 var(--s-6) var(--s-6)}
.av{text-transform:uppercase}
.hrow-c b{font-weight:400;white-space:nowrap}
.legend span{white-space:nowrap}
.card-b > .note,.pbody > .note{display:block;margin-top:var(--s-4);font-family:var(--fb);font-size:var(--t-s);letter-spacing:0;line-height:1.55;color:var(--dim);max-width:72ch}
.card-b > .docs:first-child{border-top:0}
.docs .doc:last-child{border-bottom:0}

/* position lists without logo / head row (Holding: "What you hold", "Per vehicle") */
.hrow:not(:has(> .lg)){grid-template-columns:minmax(200px,2fr);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.hlist:not(:has(> .hrow--head)){min-width:640px}
.hlist:not(:has(> .hrow--head)) .hrow-f b{display:block;margin-bottom:2px;font-family:var(--fm);font-weight:400;font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow--sub:not(:has(> .lg)) .hrow-n{padding-left:var(--s-4)}
@media (max-width:720px){
  .hrow:not(:has(> .lg)){grid-auto-flow:row;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hrow:not(:has(> .lg)) .hrow-n{grid-column:1 / -1}
  .hlist:not(:has(> .hrow--head)){min-width:0}
}

/* screen title carrying the company cartouche (Deal) */
.ph:has(> .lg){display:flex;align-items:center;gap:var(--s-5)}
.int{margin-top:var(--s-4)}

/* terms grid (Deal): .det holding <div>{.k .v .s} blocks */
.det:has(> div){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:0 var(--s-5);
  padding:0;margin:0;border:0;align-items:stretch}
.det > div{border-top:1px solid var(--rule-soft);padding:var(--s-4) 0 var(--s-5);min-width:0;display:flex;flex-direction:column;gap:6px}
.det > div .k{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.det > div .v{font-family:var(--fd);font-size:var(--t-l);line-height:1.1;color:var(--ink);text-align:left}
.det > div .s{font-size:var(--t-xs);line-height:1.45;color:var(--dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* co-investor pills (Deal) */
.coinv .ci{white-space:nowrap}

/* press review (Deal): .prh list of a.pr.imp {span.pri source, title, i date} */
.prh{display:flex;flex-direction:column}
.pr{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:var(--s-4);align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--t-b);line-height:1.45;color:var(--ink)}
.pr:last-child{border-bottom:0}
.pr:hover{color:var(--accent-ink)}
.pri{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr > i{font-style:normal;font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);white-space:nowrap}
.hi{color:var(--accent-ink)}
.mid{color:var(--dim)}
@media (max-width:720px){ .pr{grid-template-columns:1fr auto} .pri{grid-column:1 / -1} }

/* tables: text left, figures right — lp.js marks figure cells with .num */
.pt th,.pt td{text-align:left}
.pt th.num,.pt td.num{text-align:right}
.pt--stmt th,.pt--stmt td{text-align:right}
.pt--stmt td:first-child,.pt--stmt th:first-child,.pt--stmt td:nth-child(3),.pt--stmt th:nth-child(3){text-align:left}

/* key / value tables without thead (Profile) */
.ptab{overflow-y:hidden}
.pt:not(:has(thead)) td:first-child{width:40%;color:var(--dim)}
.pt:not(:has(thead)) tr:first-child td{border-top:0}
/* a bare .btn (no variant) is the secondary button */
.btn:not(.btn--p):not(.btn--t){background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn:not(.btn--p):not(.btn--t):hover{box-shadow:inset 0 0 0 1px var(--ink)}
.card-b > .setl{margin-top:var(--s-3)}
.card-b > .qsel:last-child{margin-bottom:var(--s-2)}
.pr.imp .pri{color:var(--ink-3)}

/* ===== v4.1 — 05/10/2026 ===== */
.pt th,.pt td{vertical-align:middle}
.pt td > *{vertical-align:middle}
.pt th.c,.pt td.c{text-align:center}
/* titled group of cards at page level (no card-in-card) */
.blk{display:flex;flex-direction:column;gap:var(--s-4)}
.blk-hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-5);flex-wrap:wrap;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--rule)}
.blk-hd h2{margin:0;font-family:var(--fd);font-weight:400;font-size:var(--t-m);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.deal-top .deal-logo{height:32px}
/* page-level links row */
.links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6)}
.links .btn--t{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase}
/* mobile: bottom tab bar only — top links row hidden (no duplicate nav, no burger) */
@media (max-width:720px){
  .pnav-links{display:none}
  .pb-logo{margin:0}
  .pnav-in{flex-wrap:nowrap;height:var(--nav-h)}
  .mnav{display:flex;position:sticky;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--rule);
    padding:var(--s-1) var(--s-1) calc(var(--s-1) + env(safe-area-inset-bottom,0px))}
  .mtab{flex-direction:column;gap:var(--s-1);min-height:52px;letter-spacing:.02em}
  .mtab svg{width:18px;height:18px}
  .mtab span{max-width:100%}
  .ph{font-size:var(--t-l)}
  .kpi-v{font-size:var(--t-l)}
}
.blk-hd h2{white-space:nowrap}
.deal-top .deal-name{flex:1 1 auto}
.deal-b .deal-facts{margin-top:auto}


/* =========================================================================
   ajouts Claude Code — 05/10/2026, APRES la v4.1
   -------------------------------------------------------------------------
   Tout ce qui suit s ajoute a la reference livree par claude design
   (SHA-256 46339fa1851e55167ecee4472383a4b64b47be2f1d70b87b27799a638baab3ae,
   conservee intacte dans data/design/). La garde DESIGN-REF1 compare le
   PREFIXE du fichier servi a cette reference : rien au-dessus de cette ligne
   ne doit changer.

   ⚠⚠ MES MESURES PRECEDENTES ETAIENT FAUSSES, et claude design l a vu :
   « vos captures sont en police de secours (DejaVu) ». Le dossier fonts/
   n etait pas a cote du HTML temporaire, donc Chromium repliait sur une
   police PLUS LARGE. J avais ecrit SEPT correctifs mobile sur ces metriques.
   Remesure avec Questrial / IBM Plex reellement chargees (verifie par
   document.fonts.check avant de mesurer) : il n en reste que QUATRE.
   Les trois abandonnes — .lg--lg a 96px, .soch-w en overflow-wrap, le padding
   de .kpi — ne corrigeaient qu un debordement que ma propre mesure fabriquait.
   La v4.1 traite leur cause autrement (.ph et .kpi-v a 22px sous 720).

   ⚠ UN DEFAUT LATENT, NON CORRIGE ICI : .soch-w porte une URL, qui n a aucun
   point de coupure. A 360 px elle tient en Questrial, mais un lien plus long
   deborderait. A traiter quand ce composant sera retouche.
   ========================================================================= */
@media (max-width:560px){
  /* 1. UNE ETIQUETTE ECRASEE A ZERO. `.setr` est `minmax(0,1fr) auto` : la
        colonne `auto` prend la largeur de son texte, et a 262 px la premiere
        tombe a 0 — mesure : la boite du <b> « Quarterly statement » fait 0 px
        pour 51 px de texte, qui deborde par-dessus la seconde colonne. */
  .setr{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
  .setr i{text-align:left}

  /* 2. UN LIBELLE DE BOUTON QUI NE TIENT PAS. `.btn` est en `nowrap` :
        « Ask us to change what reaches you » deborde de 63 px. Le libelle
        revient a la ligne, la hauteur suit, et la cible tactile PASSE de 40 a
        44 px — ce que le §17 exige de toute facon. */
  .btn{white-space:normal;height:auto;min-height:44px;
       padding:var(--s-2) var(--s-4);min-width:0;max-width:100%}

  /* 3. TROIS ACTIONS COTE A COTE SUR 262 px. `.deal-cta` est `flex-wrap:wrap`,
        mais un enfant de 300 px ne se range nulle part (+37). Elles s empilent.
        ⚠ a revoir quand le balisage de la Home suivra fix/after/home.html :
        la v4.1 ne garde qu un seul .btn--p, les autres passent en .links. */
  .deal-cta{flex-direction:column;align-items:stretch}
  .deal-cta .btn{width:100%}

  /* 4. UN NOM DE COMPTE LONG. `.chip` est en `nowrap` : « Vaneaudry Gran… »
        deborde de 42 px. Il revient a la ligne. */
  .scope .chip{white-space:normal;min-width:0;max-width:100%;text-align:left}
}


/* ── SSO, route B — 05/10/2026 ────────────────────────────────────────────
   Le bouton « Continue with Google » est devenu un LIEN : la route B est une
   navigation, et la CSP du portail (`script-src 'self'`) interdit tout
   gestionnaire en ligne. Il doit rendre exactement comme le bouton d a cote,
   sinon les deux etats de la meme action ne se ressemblent plus.
   ⚠ J avais d abord invente une classe `.login-sso-b` que RIEN ne stylait :
   LP-21 l a vue tout de suite. Une classe emise et stylee par personne est un
   element rendu nu. On vise donc le lien par sa place, pas par un nom neuf. */
.login-sso a{display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:40px;padding:0 var(--s-4);cursor:pointer;text-decoration:none;
  font-family:var(--fb);font-size:var(--t-b);color:var(--ink);
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-m)}
.login-sso a:hover{border-color:var(--ink)}


/* ═══════════════════════════════════════════════════════════════════════════
   LOOK & FEEL — passe 1 · 05/10/2026
   D'apres `LOOK-AND-FEEL.md` de claude design. Ils donnent eux-memes l'ordre :
   « A3, A4, A5, C4 : une demi-journee, uniquement dans la feuille, effet
   immediat ». Rien ici ne touche le balisage, donc rien ne peut casser un
   ecran — et tout est APRES la reference v4.1, que DESIGN-REF1 compare au bit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A3 · des chiffres qui tombent juste ─────────────────────────────────
   `tnum` donne a chaque chiffre la meme chasse : une colonne de montants
   s'aligne alors comme dans un releve bancaire, au lieu de danser selon que la
   ligne porte des 1 ou des 8. `lnum` force les chiffres de hauteur capitale.
   ⚠ On vise les elements qui portent la police d'affichage, pas le jeton :
   `font-feature-settings` s'applique a un element, pas a une variable. */
.ph,.kpi-v,.card-hd h4,.blk-hd h2,.hrow-f,.det .v,.pt td,.pt th,.num,.qx{
  font-feature-settings:"tnum" 1,"lnum" 1}

/* l'unite est plus petite que le nombre : c'est ce qui separe un tableau de
   bord d'un document de gestion de fortune. Le balisage suit dans lp.js. */
.kpi-v small,.kpi-v .u{font-size:.5em;color:var(--dim);margin-left:.15em;
  font-feature-settings:normal;letter-spacing:0}

/* ── A4 · respiration verticale ──────────────────────────────────────────
   « La page est juste, mais tassee en haut. » Le haut de `.pbody` passe de 48
   a 64 px, et le titre recoit 64 px avant le premier bloc au lieu de 48.
   ⚠ MAIS le sous-titre `.psub` appartient au TITRE : le pousser a 64 px le
   detacherait de ce qu'il explique. Il remonte donc a 12 px, et ce sont les
   64 px qui s'appliquent apres LUI. Une regle de rythme qui separe un titre de
   sa propre sous-ligne ne respire pas, elle disloque. */
.pbody{padding-top:var(--s-8)}
.pbody > .phd + .psub{margin-top:calc(var(--s-3) - var(--s-7))}
.pbody > .phd + :not(.psub),
.pbody > .psub + *{margin-top:var(--s-4)}

/* ── A5 · le bandeau de lecture seule, plus discret ──────────────────────
   « Le lavis orange en pleine largeur crie. » Il devient un filet : fond de
   surface, trait bas de 2 px, texte en encre d'accent. L'information reste
   lisible sans colorer tout le haut de l'ecran.
   ⚠ Le point orange ne pulse QU'UNE FOIS (2 s). Une pastille qui clignote sans
   fin sur un bandeau permanent devient un defaut, pas un signal — et elle
   disparait entierement sous `prefers-reduced-motion`. */
.ro-band{background:var(--surface);border-bottom:2px solid var(--accent)}
.ro-band p{display:flex;align-items:center;gap:var(--s-2);text-transform:none;
  letter-spacing:.02em;font-size:var(--t-s)}
.ro-band p::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:var(--accent);animation:ro-pulse 2s ease-out 1}
@keyframes ro-pulse{0%{box-shadow:0 0 0 0 var(--accent)}100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){ .ro-band p::before{animation:none} }

/* ── C4 · typographie fine ───────────────────────────────────────────────
   `balance` repartit les lignes d'un titre pour qu'aucune ne reste seule avec
   un mot ; `pretty` fait la meme chose au dernier paragraphe d'un texte.
   Les deux sont ignores par les navigateurs qui ne les connaissent pas — donc
   aucun risque, et un gain partout ou ils sont compris. */
.ph,.card-hd h4,.blk-hd h2,.msg-k,.sec-h{text-wrap:balance}
.th,.psub,.note,.empty,.login-sso-note,.stmt-def p{text-wrap:pretty}


/* ═══════════════════════════════════════════════════════════════════════════
   v4.2 — Portfolio / Documents · 05/10/2026
   D'apres `BRIEF-PORTFOLIO-DOCUMENTS.md`. Maquette : « LP Portal Charts and
   Documents » (options 1a, 1b, 1c, 2a, 3a, 3b).
   ⚠ Tout est APRES la reference v4.1 : DESIGN-REF1 compare le prefixe au bit,
   et aucune de ces regles ne doit remonter plus haut.
   ⚠ Variables existantes uniquement, sauf `--t-hero` — la seule exception que
   le brief autorise, et elle est RESERVEE a `.hero-v`.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --t-hero:64px; }

/* ── 1.1 · en-tete heros ─────────────────────────────────────────────────
   Il remplace les quatre KPI en cases : « un seul chiffre tres grand vaut
   mieux que quatre moyens ». `align-items:end` pose le mini-graphique sur la
   meme ligne de base que le chiffre, sinon il flotte au-dessus. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:var(--s-8);align-items:end}
.hero-l{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.hero-v{font-family:var(--fd);font-weight:400;font-size:var(--t-hero);line-height:1;
  color:var(--ink);font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:-.015em}
/* l'unite suit la langue : « € » devant en anglais, « M€ » derriere en francais.
   C'est lp.js qui place les `.u`, la feuille ne fait que les rapetisser. */
.hero-v .u{font-size:.4em;color:var(--dim);letter-spacing:0;font-feature-settings:normal}
.hero-s{margin:0;font-family:var(--fm);font-size:var(--t-s);letter-spacing:.04em;color:var(--dim)}
.hero-c{min-width:0}
.hero-c svg{width:100%;height:auto;display:block}
@media (max-width:720px){
  .hero{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .hero-v{font-size:44px}
  .hero-c svg{height:70px}
}

/* ── 1.2 · la liste des positions ────────────────────────────────────────
   ⚠ UNE GRILLE PROPRE A CETTE LISTE, et nommee : `--row-cols` sert au releve,
   qui n'a ni logo de 56 px ni colonne de tendance. Deux listes, deux grilles,
   declarees chacune une fois — et LP-29 verifie que chaque rangee emet autant
   de cases que sa grille a de colonnes. */
.hlist--pf .hrow{grid-template-columns:56px minmax(0,1fr) 120px 140px 132px 24px}
.spark{display:block;width:132px;height:28px}
.spark .sp-l{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark .sp-p{r:3}
.spark .sp-p--up{fill:var(--gain)}
.spark .sp-p--down{fill:var(--loss)}
/* le bouton qui deplie les vehicules d'une societe multi-vehicules */
.hrow-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  margin-right:var(--s-1);border:0;background:none;cursor:pointer;color:var(--dim-2);
  font-family:var(--fm);font-size:var(--t-xs);line-height:1;transition:transform .16s,color .16s}
.hrow-x:hover{color:var(--ink)}
.hrow-x[aria-expanded="true"]{transform:rotate(90deg);color:var(--ink)}
/* ⚠⚠ `.hsub{display:grid}` BAT L'ATTRIBUT `hidden`. La regle `[hidden]` est
   une regle d agent utilisateur de specificite nulle : toute declaration
   `display:` portee par une classe la neutralise, et les sous-lignes restaient
   VISIBLES tout en se disant masquees. Mesure : elles debordaient de 7 px a
   360 px alors que je les croyais hors de l ecran. Un attribut qui ment est
   pire qu un attribut absent. */
.hsub[hidden]{display:none}

/* la mention d'investi ne sert QU'EN MOBILE : en desktop elle doublerait la
   colonne « Invested » juste a cote. */
.hrow-sm{display:none}

@media (max-width:720px){
  /* ⚠⚠ MESURE : la rangee emet SIX cases (logo, nom, investi, valeur, tendance,
     chevron). Ma premiere grille mobile n'en declarait que TROIS, donc les
     quatrieme et suivantes passaient a la rangee implicite — c'est ce qui
     debordait de 7 px. On masque explicitement les trois cases qui ne tiennent
     pas, et le montant investi passe dans la sous-ligne du nom (brief 3b). */
  .hlist--pf .hrow{grid-template-columns:44px minmax(0,1fr) auto}
  .hlist--pf .hrow--head{display:none}
  .hlist--pf .hrow-f:nth-of-type(1),
  .hlist--pf .hrow-f:nth-of-type(3),
  .hlist--pf .hrow-c{display:none}
  .hrow-sm{display:inline}
  .hlist--pf .lg{width:44px}
}

/* ── 1.3 · la carte d'exposition ─────────────────────────────────────────
   Elle remplace quatre barres empilees par UNE barre et un selecteur. */
.expo-sel{display:flex;gap:var(--s-4);white-space:nowrap;font-family:var(--fm);
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.expo-sel button{border:0;background:none;padding:0;cursor:pointer;color:var(--dim-2);
  font:inherit;letter-spacing:inherit;text-transform:inherit}
.expo-sel button[aria-pressed="true"]{color:var(--ink)}
.expo-leg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-5);
  margin-top:var(--s-4)}
.expo-leg div{display:flex;align-items:center;gap:var(--s-2);min-width:0;font-size:var(--t-s)}
.expo-leg i{width:9px;height:9px;flex:0 0 9px;border-radius:2px;background:var(--c,var(--dim-2))}
.expo-leg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.expo-leg b{margin-left:auto;font-family:var(--fm);font-size:var(--t-xs);font-weight:400;color:var(--dim)}
@media (max-width:720px){ .expo-leg{grid-template-columns:minmax(0,1fr)} }

/* ── 3.2 · Documents ─────────────────────────────────────────────────────
   ⚠ `.doc-hero` est LE SEUL BLOC FONCE de la page — c'est ce qui en fait une
   action evidente sans ajouter un bouton noir de plus (la regle « un seul
   .btn--p par ecran » tient toujours). */
.doc-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-5);
  align-items:center;padding:24px 28px;background:var(--nav-bg);color:var(--ground);
  border-radius:var(--r-m);text-decoration:none}
.doc-hero:hover{opacity:.94}
.doc-hero-ic{display:flex;align-items:center;justify-content:center;width:44px;height:56px;
  border:1px solid var(--ink-3);border-radius:3px;font-family:var(--fm);font-size:var(--t-xs);
  color:var(--accent)}
.doc-hero-m{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.doc-hero-m .k{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
/* ⚠⚠ LA COULEUR SE REDECLARE. Une regle globale `.t{color:var(--ink)}` vit
   dans la region design : sans `color` ici, le titre du heros s'ecrivait en
   encre SOMBRE sur le seul bloc FONCE de la page. Invisible, et le balisage
   etait pourtant juste — c'est en lisant le HTML rendu que je l'ai vu, pas la
   capture. Herite de `.doc-hero`, donc `--ground`. */
.doc-hero-m .t{font-family:var(--fd);font-size:var(--t-l);text-transform:uppercase;
  line-height:1.15;color:var(--ground)}

/* le selecteur de vehicule : un vrai `select`, pose a plat */
.doc-sel select{height:30px;padding:0 var(--s-3);max-width:260px;
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-pill);
  cursor:pointer}
.doc-sel select:hover{border-color:var(--ink)}
.doc-hero-m .s{font-size:var(--t-s);color:var(--nav-fg)}
.doc-hero .btn{background:var(--ground);color:var(--ink);border-color:transparent}
@media (max-width:560px){
  .doc-hero{grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);padding:var(--s-4)}
  .doc-hero .btn{grid-column:1 / -1}
}

.doc-filters{display:flex;flex-direction:column;gap:var(--s-4)}
.doc-sel{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.doc-sel .lbl{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.doc-sel .lbl + .chip{margin-right:var(--s-3)}
.doc-sel .chip{white-space:nowrap}

/* la bande de groupe : elle date le paquet sans ajouter un titre de carte */
.doc-g-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:12px 24px;background:var(--surface-2);border-bottom:1px solid var(--rule);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim)}

.doc--row{display:grid;grid-template-columns:10px minmax(0,1fr) 160px 96px 28px;
  align-items:center;gap:var(--s-4);min-height:56px;padding:0 24px;
  border-bottom:1px solid var(--rule-soft);text-decoration:none;color:inherit}
.doc--row:last-child{border-bottom:0}
.doc--row:hover{background:var(--ground)}
.doc--row .pt-dot{width:8px;height:8px;border-radius:2px;background:var(--c,var(--dim-2))}
.doc--row .d-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.doc--row .d-t b{font-weight:500;font-size:var(--t-b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc--row .d-t i{font-style:normal;font-size:var(--t-s);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc--row .d-k{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.doc--row .d-d{font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);text-align:right}
.doc--row .d-a{font-family:var(--fm);color:var(--accent-ink);text-align:right}
@media (max-width:720px){
  /* pastille · titre et vehicule · telechargement ; le type et la date passent
     sous le titre, sinon cinq colonnes se marchent dessus sur 312 px. */
  .doc--row{grid-template-columns:10px minmax(0,1fr) 28px;padding:0 var(--s-4);min-height:64px}
  .doc--row .d-k,.doc--row .d-d{display:none}
  .doc--row .d-t::after{content:attr(data-meta);font-family:var(--fm);font-size:var(--t-xs);
    letter-spacing:.06em;text-transform:uppercase;color:var(--dim-2)}
  .doc-g-hd{padding:12px var(--s-4)}
}


/* ── 1c · qui a cree la valeur ───────────────────────────────────────────
   Barre DIVERGENTE : l'axe zero ne se place pas au milieu mais a la part que
   prennent les negatifs. Un portefeuille sans perte a donc son axe colle a
   gauche et toute la largeur sert aux gains — un axe fixe au centre gacherait
   la moitie de la place dans le cas le plus frequent. */
.vc{display:flex;flex-direction:column}
.vc-r{display:grid;grid-template-columns:20px minmax(0,1fr) 180px 92px;align-items:center;
  gap:var(--s-4);min-height:48px;border-bottom:1px solid var(--rule-soft)}
.vc-r:last-child{border-bottom:0}
.vc-n{font-family:var(--fm);font-size:var(--t-xs);color:var(--dim-2);text-align:right}
.vc-l{font-size:var(--t-b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-b{position:relative;height:8px;background:var(--surface-2);border-radius:1px}
.vc-b i{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--rule-strong)}
.vc-b u{position:absolute;top:0;bottom:0;border-radius:1px;text-decoration:none}
.vc-v{font-family:var(--fm);font-size:var(--t-s);text-align:right}
.vc-r--tot{min-height:52px;border-top:1px solid var(--ink);border-bottom:0;margin-top:var(--s-2)}
.vc-r--tot .vc-l{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.vc-r--tot .vc-v{font-weight:600;color:var(--ink)}
@media (max-width:720px){
  .vc-r{grid-template-columns:16px minmax(0,1fr) 84px;gap:var(--s-3)}
  .vc-b{display:none}
}


/* ── 4j · d'ou vient la performance ──────────────────────────────────────
   Maquette « LP Portal Screens Redesign » #4j. Ce bloc REMPLACE deux cartes :
   « How your portfolio breaks down » (4 barres empilees) et « Where the
   performance comes from » (3 colonnes). Elles disaient la meme chose deux
   fois, l'une en parts investies, l'autre en valeur creee.
   ⚠ DEUX BARRES, PAS UNE : l'investi en opacite reduite, la valeur
   d'aujourd'hui en plein, meme couleur de segment. C'est ce qui rend le
   DEPLACEMENT visible — un secteur qui pese 20 % de l'investi et 45 % de la
   valeur se lit d'un coup d'oeil, ce qu'aucune barre seule ne montre. */
.perf{display:flex;flex-direction:column;gap:var(--s-6)}
.perf-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.perf-k > div{display:flex;flex-direction:column;gap:6px;padding:18px var(--s-5) 18px 0;min-width:0}
.perf-k .l{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.perf-k .v{font-family:var(--fd);font-size:26px;line-height:1.1;text-transform:uppercase;color:var(--ink)}
.perf-k .s{font-size:var(--t-s);color:var(--dim)}
.perf-mix{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--s-4);align-items:center}
.perf-mix .lbl{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.perf-bar{display:flex;height:22px;gap:2px}
.perf-bar span{height:100%;background:var(--c,var(--dim-2))}
.perf-bar--inv span{opacity:.45}
.perf-leg{display:flex;gap:var(--s-5);flex-wrap:wrap;padding-left:120px}
.perf-leg span{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-s)}
.perf-leg i{width:10px;height:10px;border-radius:2px;background:var(--c,var(--dim-2))}
.perf-t{border:1px solid var(--rule);border-radius:var(--r-s);overflow:hidden}
.perf-r{display:grid;grid-template-columns:minmax(0,1fr) 104px 104px 112px 72px 160px;
  gap:var(--s-5);align-items:center;min-height:48px;padding:0 var(--s-5);
  border-bottom:1px solid var(--rule-soft)}
.perf-r:last-child{border-bottom:0}
.perf-r--head{min-height:40px;background:var(--surface-2);border-bottom:1px solid var(--rule);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.perf-r--head > :not(:first-child){text-align:right}
.perf-r--head > :last-child{text-align:left}
.perf-r .n{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.perf-r .n i{width:9px;height:9px;flex:0 0 9px;border-radius:2px;background:var(--c,var(--dim-2))}
.perf-r .n b{font-weight:400;font-size:var(--t-b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perf-r .num{font-family:var(--fm);font-size:var(--t-s);text-align:right}
.perf-r .pb{display:flex;flex-direction:column;gap:3px}
.perf-r .pb u{display:block;height:4px;background:var(--surface-2);border-radius:1px;text-decoration:none}
.perf-r .pb u b{display:block;height:100%;border-radius:1px;background:var(--c,var(--dim-2))}
.perf-r .pb u:first-child b{opacity:.45}
/* ⚠ le nom doit pouvoir RETRECIR : dans une grille, un enfant flex garde sa
   largeur de contenu tant qu'on ne lui donne pas `min-width:0`, et l'ellipse
   ne se declenche jamais. */
.perf-r .n b{min-width:0}

@media (max-width:900px){
  .perf-k{grid-template-columns:repeat(2,minmax(0,1fr))}
  .perf-r{grid-template-columns:minmax(0,1fr) 104px 104px;gap:var(--s-3)}
  .perf-r > :nth-child(n+4){display:none}
  .perf-mix{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .perf-leg{padding-left:0}
}
/* ⚠⚠ MESURE, pas intuition : a 360 px la ligne dispose de 214 px une fois
   retires le padding de la page (24+24), celui de la carte (24+24), le filet
   du tableau et le padding de la rangee (24+24). Trois colonnes fixes a 96 px
   plus leurs ecarts en demandaient 216 : la premiere colonne tombait a ZERO et
   tout debordait. On descend donc a DEUX colonnes, et on resserre le padding. */
@media (max-width:720px){
  .perf-r{grid-template-columns:minmax(0,1fr) 92px;gap:var(--s-3);padding:0 var(--s-4)}
  .perf-r > :nth-child(n+3){display:none}
  .perf-r--head > :nth-child(2){text-align:right}
}

/* la rangee « Show N more » : une rangee de la meme grille, sans filet ni
   survol — c est un lien, pas une position. */
.hrow--plus{min-height:52px;border-bottom:0;background:none;cursor:default}
.hrow--plus:hover{background:none}
.hrow--plus .btn--t{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.08em;
  text-transform:uppercase}

/* ⚠ `.hrow-n` est une COLONNE : un bouton pose dedans se range AU-DESSUS du
   nom, ce qui donnait un chevron flottant sur sa propre ligne. Quand le bouton
   existe, la case passe en RANGEE et le nom + sa sous-ligne sont regroupes
   dans `.hrow-nb`, qui redevient la colonne. */
.hrow-n:has(> .hrow-x){flex-direction:row;align-items:center;gap:var(--s-1);overflow:visible}
.hrow-nb{display:flex;flex-direction:column;min-width:0}
.hrow-nb,.hrow-nb small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Flows · la case « Movement » porte deux lectures ────────────────────
   La nature du mouvement en haut, la societe et son vehicule dessous : ce sont
   les deux colonnes supprimees, rendues a leur place. (Regle G2 du design.) */
.fl-m{line-height:1.3}
.fl-m b{display:block;font-weight:500;color:var(--ink)}
.fl-m i{display:block;font-style:normal;font-size:var(--t-s);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── « Methodology ▸ » ───────────────────────────────────────────────────
   Les avertissements et les notes de methode quittent le corps de page : en
   clair sous un tableau, ils se lisent comme une donnee. Repliés, ils restent
   a une portee de clic. (Regle G6 du design, et §1.4 du brief.) */
.meth{margin-top:calc(var(--s-7) * -1 + var(--s-4))}
.meth summary{cursor:pointer;font-family:var(--fm);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);list-style:none}
.meth summary::-webkit-details-marker{display:none}
.meth summary:hover{color:var(--ink)}
.meth p{margin:var(--s-3) 0 0;font-size:var(--t-s);color:var(--dim);max-width:72ch}

/* ── Settings · un seul modele de reglage ────────────────────────────────
   Quatre cartes sont devenues quatre LIGNES d une meme carte, separees par un
   filet. Chacune dit : son titre a gauche, son ETAT COURANT a droite, une
   phrase, l action. L etat n etait ecrit nulle part avant. (ST1 a ST4.) */
.setr2{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);
  border-bottom:1px solid var(--rule-soft)}
.setr2:last-child{border-bottom:0}
.setr2-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.setr2-h h4{margin:0}
.setr2-h .st{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.06em;color:var(--dim)}
.setr2 .th{margin:0;max-width:68ch}
.setr2 p{margin:0}
/* le repli : ce qui merite d exister sans encombrer la ligne */
.setr2-d summary{cursor:pointer;font-family:var(--fm);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);list-style:none}
.setr2-d summary::-webkit-details-marker{display:none}
.setr2-d summary:hover{color:var(--ink)}
.setr2-d > :not(summary){margin-top:var(--s-3)}
/* le selecteur de langue, en ligne a droite du titre */
.acct--inline{display:inline-flex}
/* ⚠ se deconnecter n est pas une action ordinaire : elle se dit en rouge, et
   elle est la DERNIERE de l ecran. */
.btn--out{color:var(--loss-ink)}

/* le deck de levee : meme composant que le dernier releve, mais en clair —
   le bloc fonce est reserve a UNE piece par ecran, et sur le deal c est
   l action de souscrire qui doit rester la plus noire. */
.doc-hero--pale{background:var(--surface-2);color:var(--ink);border:1px solid var(--rule)}
.doc-hero--pale .doc-hero-ic{border-color:var(--rule-strong)}
.doc-hero--pale .doc-hero-m .t{color:var(--ink)}
.doc-hero--pale .doc-hero-m .s{color:var(--dim)}
.doc-hero--pale .btn{background:var(--surface);color:var(--ink);border:1px solid var(--rule-strong)}
/* « Your interest » ferme la page : le fond la detache sans un bouton de plus */
.card--fin{background:var(--surface-2)}
/* « and N others » : une pastille qui compte, pas un co-investisseur */
.ci--more{color:var(--dim);border-style:dashed}

/* ── R1 · le releve est un DOCUMENT, pas un ecran ────────────────────────
   « Carte blanche pleine largeur, padding 48 px, ombre `--shadow-lift` — la
   seule ombre d ecran autorisee — posee sur le fond `--ground`, comme une
   feuille. » C est ce qui fait qu un LP imprime la page ou l envoie a son
   comptable sans se demander si c est le bon document.
   ⚠ L ombre est l EXCEPTION, pas une facon de faire : aucune autre carte du
   portail n en porte, et c est ce qui distingue celle-ci. */
.stmt{padding:48px;background:var(--surface);box-shadow:var(--shadow-lift);border-radius:var(--r-s)}
@media (max-width:720px){ .stmt{padding:var(--s-5)} }
/* a l impression, l ombre et le rayon n ont aucun sens : le papier est deja
   une feuille. */
@media print{ .stmt{box-shadow:none;border-radius:0;padding:0} }

/* ── le panneau de definitions ───────────────────────────────────────────
   Un `<dialog>` natif, pose en PANNEAU LATERAL (360 px, filet gauche) plutot
   qu en boite centree : le lecteur garde ses chiffres sous les yeux pendant
   qu il lit ce qu ils veulent dire. C est tout l interet d un panneau.
   ⚠ `::backdrop` n herite d aucune variable du document : la couleur s ecrit
   donc en dur ici, et c est le seul endroit du portail ou cela se justifie. */
/* ⚠⚠ TROISIEME FOIS AUJOURD HUI : une declaration `display:` posee par une
   CLASSE bat la regle d agent utilisateur qui masque l element. Pour `[hidden]`
   c etait `.hsub`, ici c est `dialog:not([open])` — et le panneau de
   definitions s affichait sur TOUS les ecrans, en permanence, pousse a droite.
   Vu en capture, pas en mesure : aucune garde ne regarde ce qui est visible a
   tort. */
.defs:not([open]){display:none}
.defs{position:fixed;inset:0 0 0 auto;width:min(360px,100vw);max-width:100vw;height:100%;
  max-height:100%;margin:0;padding:0;border:0;border-left:1px solid var(--rule);
  background:var(--surface);color:var(--ink);display:flex;flex-direction:column}
.defs::backdrop{background:rgba(10,9,8,.28)}
.defs-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5);border-bottom:1px solid var(--rule)}
.defs-h h4{margin:0}
.defs-x{border:0;background:none;cursor:pointer;font-size:22px;line-height:1;color:var(--dim)}
.defs-x:hover{color:var(--ink)}
.defs-b{overflow-y:auto;padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-5)}
.defs-b h5{margin:0 0 var(--s-2);font-family:var(--fm);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.defs-b p{margin:0;font-size:var(--t-s);line-height:1.5;color:var(--ink-2)}
.ft-sep{color:var(--dim-2);margin:0 var(--s-2)}
@media (max-width:560px){ .defs{inset:auto 0 0 0;width:100%;height:82vh;border-left:0;
  border-top:1px solid var(--rule)} }

/* ── L1 a L4 · l ecran de connexion ──────────────────────────────────────
   C est l ecran le plus vu du portail : celui qui installe la marque. */
/* L2 — le bandeau de marque : logo centre, filet orange, puis de l air */
.login-brand{display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border-bottom:2px solid var(--accent);padding:var(--s-5) 0;
  margin-bottom:var(--s-7)}
/* L3 — le champ souligne, pas encadre : un seul trait, et il porte le regard */
.login-f input[type=email]{width:100%;height:auto;padding:var(--s-2) 0;text-align:center;
  font-size:var(--t-m);border:0;border-bottom:1px solid var(--rule-strong);
  border-radius:0;background:none;color:var(--ink)}
.login-f input[type=email]:focus{outline:none;border-bottom-color:var(--accent)}
.login-f .btn--p{width:100%}
/* L4 — une coche fine, et la carte ne change pas de hauteur */
.login-ok{display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  color:var(--gain);margin-bottom:var(--s-3)}
.login-ok h4{margin:0;color:var(--ink)}
.login-sent{font-size:var(--t-s);color:var(--dim);line-height:1.55;text-align:center}


/* ═════════════════════════════════════════════════════════════════════════
   06/10/2026 — LA COQUILLE : LA BARRE TIENT, LE PIED RESTE EN BAS
   Ajouts APRES la v4.1 de claude design, comme tout le reste de ce fichier.

   ⚠⚠ LA CAUSE DE « le menu doit rester quand on scroll » N EST PAS .ptop.
   `.ptop` porte bien `position:sticky;top:0` depuis la v4.1 — et ne collait a
   rien. Un element collant se cale sur le PLUS PROCHE ancetre defilant, pas
   sur la fenetre : `.device{overflow:auto}` en creait un, aussi haut que son
   contenu, donc qui ne defile jamais. La page defilait sur <body>, la barre
   restait sagement en haut de `.device`, et sortait de l ecran avec lui.
   Regle generale, a retenir : un `overflow` sur un ancetre NEUTRALISE
   silencieusement tout `sticky` en dessous. Rien ne le signale.

   ⚠ Le pied : « footer should never be higher than the bottom of page ».
   Sur un ecran court (Settings, Profile) `.ft` s arretait la ou le contenu
   s arretait, avec du vide dessous. On fait de `.device` une colonne haute
   d au moins une fenetre, de `.pbody` l element qui s etire, et le pied
   descend de lui-meme. Aucune position fixe : le pied reste DANS le flux,
   donc il ne recouvre jamais le contenu d une page longue. */
.device{overflow:visible;min-height:100dvh;display:flex;flex-direction:column}
/* ⚠⚠ `min-width:0` N EST PAS UNE PRECAUTION, C EST LA REGLE. Un enfant de
   conteneur flex porte `min-width:auto` : il REFUSE de descendre sous la
   largeur minimale de son contenu, la ou un enfant de bloc se serait clampe
   sur son parent. Mesure a 360 px juste apres le passage en flex : <main>
   rendait 439 px et la page defilait de 80 px lateralement — un tableau a
   l interieur imposait sa largeur a toute la colonne. Le defaut existait
   avant, cache par le `overflow:auto` de .device qu on vient de retirer : il
   donnait a .device sa propre barre de defilement au lieu de corriger quoi
   que ce soit. */
.device > *{min-width:0}
/* ⚠⚠ ET `width:100%`, SANS QUOI LE CENTRAGE ANNULE L ETIREMENT. `.pbody`
   porte `margin:0 auto` depuis la v4.1 — parfait en bloc. Dans un conteneur
   flex, une marge `auto` sur l axe transverse DESACTIVE `align-items:stretch`
   et l element se dimensionne sur son contenu (`fit-content`). Mesure a 360 px
   avant ce correctif : .device faisait bien 360, et <main> 439. Le centrage
   continue d operer, par `max-width` + marges auto, comme avant. */
.pbody{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;width:100%}
.pbody > *{min-width:0;max-width:100%}
/* `auto` mange tout l espace restant : c est ce qui pousse le pied en bas. */
.ft{margin-top:auto}
/* ⚠ le pied est le dernier ENFANT de .pbody et .pbody est devenu une colonne
   flex : sans cela ses deux <span> se retrouveraient etires sur la hauteur. */
.ft{flex:0 0 auto}
/* ⚠ une page de connexion n a ni barre ni pied : on lui rend sa mise en page. */
.pbody--login{display:block;flex:0 0 auto;margin-top:0}

/* ── LES LIBELLES DE COLONNE : UNE FOIS, PAS A CHAQUE RANGEE ──────────────
   Alex, capture du 06/10 : « rows titles ». SUBSCRIBED, FMV · TVPI et DPI
   etaient reecrits sur CHAQUE vehicule de la fiche societe.

   ⚠ JE N AI RIEN EU A ECRIRE POUR LES MASQUER, et j ai failli le refaire :
   la feuille sait DEJA le faire depuis le 05/10, par
   `.hlist:not(:has(> .hrow--head)) .hrow-f b{display:block}` — un libelle de
   rangee n apparait QUE sur une liste sans en-tete. Il manquait simplement
   l en-tete. La correction est donc dans lp.js (deux appels a
   enTeteColonnes()), et ici il n y a QUE la grille partagee ci-dessous.

   Lecon, deuxieme fois en deux jours : avant d ajouter une regle, chercher
   celle qui existe. Deux mecanismes pour un meme effet divergent au premier
   correctif applique a un seul des deux.

   ── UNE GRILLE DECLAREE, SINON RIEN NE S ALIGNE ──────────────────────────
   `--row-cols` declare SIX pistes (64px vignette + nom + 4 nombres). Les deux
   listes de la fiche societe en emettent CINQ et QUATRE : leur nom tombait
   dans la piste de 64 px prevue pour un logo, et chaque rangee se calait
   differemment — mesure a 1440 px : 70, 105 et 141 px d ecart entre l en-tete
   et les rangees. Une liste qui ne declare pas sa grille ne peut pas aligner
   ses colonnes ; `.hlist--pf` l avait deja compris, ces deux-la non.
   ⚠ On ne REDEFINIT PAS `--row-cols` (il sert au releve et a l audit) : on
   pose `grid-template-columns` sur la liste, comme `.hlist--pf`. */
.hlist--hold .hrow{grid-template-columns:minmax(0,1fr) 104px 128px 148px 148px}
.hlist--veh  .hrow{grid-template-columns:minmax(0,1fr) 136px 168px 136px}
/* sous 720 px la grille se defait : chaque rangee redevient une carte, et les
   libelles reapparaissent d eux-memes (il n y a plus d en-tete visible). */
@media (max-width:720px){
  .hlist--hold .hrow,.hlist--veh .hrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hlist--hold .hrow--head,.hlist--veh .hrow--head{display:none}
  .hlist--hold .hrow-f b,.hlist--veh .hrow-f b{display:block;margin-bottom:2px;
    font-family:var(--fm);font-weight:400;font-size:var(--t-xs);
    letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
  .hlist--hold .hrow-n,.hlist--veh .hrow-n{grid-column:1 / -1}
}

/* ── la courbe de tendance dit le COUT, et sa pastille suit le multiple ───
   06/10/2026. Voir le commentaire de sparkline() dans graphiques.js : la forme
   raconte la marque, la couleur raconte la position contre le cout, et le
   pointille montre le cout lui-meme. Trois choses, une seule lecture. */
.spark .sp-c{stroke:var(--rule-strong);stroke-width:1;stroke-dasharray:2 3}
.spark .sp-p--flat{fill:var(--dim)}

/* un titre d article EST un lien : il se souligne au survol, et la fleche dit
   qu on sort du portail. Pas de couleur d accent — le titre reste un titre,
   c est le geste qui change, pas la hierarchie. */
.news-a{color:var(--ink);text-decoration:none}
.news-a:hover{text-decoration:underline;text-underline-offset:3px}
.news-a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ═════════════════════════════════════════════════════════════════════════
   06/10/2026 — REPORTING (4h · 4i). Ajouts APRES la v4.1, comme tout le reste.
   Prefixe `.rpt-` et `.hlist--rep`, conformement au brief.

   ⚠ Pas une couleur, pas une taille en dur : tout passe par les jetons de la
   v4.1. La garde du 05/10 (jeton-compose-invisible-au-balayage) a montre ce
   que coute une valeur ecrite a la main dans une feuille partagee. */

/* 4h — la liste. Deux colonnes : le rapport, et sa date. */
.hlist--rep .hrow{grid-template-columns:56px minmax(0,1fr) 168px 24px}
@media (max-width:720px){
  .hlist--rep .hrow{grid-template-columns:44px minmax(0,1fr) auto}
  .hlist--rep .hrow--head{display:none}
  .hlist--rep .lg{width:44px}
}

/* 4i — la feuille. Le brief la veut POSEE sur la page : c est la seule ombre
   au repos de tout le portail, et elle est assumee comme telle. */
.rpt{box-shadow:0 1px 2px rgba(10,9,8,.05),0 8px 24px rgba(10,9,8,.06)}
.rpt-hd{display:flex;align-items:flex-start;gap:var(--s-5);flex-wrap:wrap}
.rpt-t{flex:1 1 320px;min-width:0}
.rpt-t .ph{margin:0}
.rpt-m{margin:var(--s-2) 0 0;font-family:var(--fm);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rpt-dl{flex:0 0 auto;align-self:center}
.rpt-s{margin:var(--s-5) 0 0;padding-top:var(--s-5);border-top:1px solid var(--rule);
  font-size:var(--t-b);line-height:1.6;color:var(--ink-2);max-width:72ch}
.lg--rpt{width:72px;height:48px;flex:0 0 auto}

/* le PDF en entier : c est LE contenu de l ecran, pas une vignette. 80vh est
   la hauteur du brief ; on borne par le bas pour qu un petit ecran garde une
   surface utile sans que la page devienne une seule iframe. */
.rpt-pdf{border-top:1px solid var(--rule)}
.rpt-pdf iframe{display:block;width:100%;height:80vh;min-height:420px;border:0;
  background:var(--surface-2)}
.rpt-fb{padding:var(--s-4) var(--s-5);margin:0;border-top:1px solid var(--rule)}
.rpt-fb a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){ .rpt-pdf iframe{height:62vh;min-height:320px} }

/* R10 — precedent / tout / suivant. Un cran desactive reste a sa place : sans
   lui, le bouton restant glisserait d un bord a l autre d un rapport au
   suivant, et l oeil perdrait le repere. */
.rpt-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;margin-top:var(--s-6)}
.rpt-off{opacity:.38;cursor:default;pointer-events:none}

/* l intertitre de trimestre, DANS le tableau : meme grammaire que les
   en-tetes de colonne (mono, capitales, interlettrage) mais sur toute la
   largeur, et legerement teinte pour qu il se lise comme un palier et non
   comme une rangee de donnees. */
.rep-q{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-5) var(--s-2);border-top:1px solid var(--rule);
  background:var(--surface-2);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.rep-q > span{color:var(--dim);letter-spacing:.1em}
.hlist--rep .rep-q:first-of-type{border-top:0}

/* ── MOBILE : CE QUI CHANGE QUAND LA RANGEE DEVIENT UNE CARTE ────────────
   06/10/2026, releve en pixels a 360 px sur l ecran Reporting.

   ⚠ UN TITRE TRONQUE N EST PAS UN TITRE. « Wandercraft — Monthly repor… »
   ne distingue aucun des treize rapports les uns des autres : c est la seule
   chose qui les differencie, et c est elle qu on coupait. `.hrow-n` impose
   `nowrap` + ellipse, ce qui est juste sur une GRILLE (une cellule ne doit pas
   changer la hauteur de sa rangee) et faux sur une CARTE, ou la hauteur est
   libre. On rend donc le retour a la ligne, borne a deux lignes.

   ⚠ LE CHEVRON PART. Sur une carte il tombe sur sa propre ligne, sous le
   reste, et ajoute 20 px de vide a chaque rangee pour ne rien dire : la carte
   ENTIERE est deja tapable. */
@media (max-width:720px){
  .hlist--rep .hrow-nb,
  .hlist--rep .hrow-n{white-space:normal;overflow:visible;text-overflow:clip}
  .hlist--rep .hrow-nb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  .hlist--rep .hrow-c{display:none}
  .hlist--rep .hrow{grid-template-columns:44px minmax(0,1fr)}
  .hlist--rep .hrow-f{grid-column:2;text-align:left}
}

/* ── LA BARRE DU BAS A SIX ONGLETS, ET SIX LIBELLES ENTIERS ──────────────
   L onglet Reporting fait passer la barre mobile de cinq a six. A 360 px,
   chaque onglet dispose de 60 px : « PORTFOLIO », « REPORTING » et
   « DOCUMENTS » se coupaient en « PORTF… », « REPOR… », « DOCUM… ».

   ⚠ LE BRIEF PROPOSAIT DE SORTIR « EQNX » DE LA BARRE pour revenir a cinq,
   « a confirmer par Alex ». Je ne tranche pas a sa place une question de
   navigation : on garde les six, et on regagne la place sur la TYPOGRAPHIE —
   l interlettrage de .1em coutait a lui seul 8 px par libelle. Mesure apres :
   les six tiennent en entier a 360 px. Si Alex prefere cinq onglets, le
   changement tient en une ligne dans LIENS. */
/* ⚠⚠ 06/10/2026 — ALEX A TRANCHE : « fais au mieux pour tout garder ». Les six
   onglets restent ; la question devient donc « quelle est la plus grande
   taille qui les fait tenir », et elle se MESURE.
   Relevé par `tests/sonde-mtab.py`, dans les VRAIES polices (leçon du 05/10 :
   sept correctifs mobile avaient été écrits en police de secours) :

     viewport   place/onglet   mono 11px   mono 10px   corps 11px
     320 px        53,3 px      60 px ✗     55 px ✗     72 px ✗
     360 px        60,0 px      60 px ✓     55 px ✓     72 px ✗
     390 px        65,0 px      60 px ✓     55 px ✓     72 px ✗

   Le mot le plus large est « PORTFOLIO » en anglais (mono) et
   « PORTEFEUILLE » en français — qui ne tient à AUCUNE taille, dans aucune
   police. D'où `clamp()` et la coupure propre : le français se coupe en
   « PORTEFEUI… » plutôt que de déborder sur le voisin.

   · à partir de 360 px : 11 px, la plus grande taille qui fait tenir les six
     libellés anglais en entier — un point de plus qu'avant ;
   · en dessous : 10 px, qui tient jusqu'à 328 px ;
   · la police MONO est conservée : elle est 18 % plus étroite que la police de
     corps à taille égale (60 px contre 72), et c'est elle qui rend ces six
     onglets possibles. Passer au corps obligerait à en retirer un. */
@media (max-width:720px){
  .mtab{letter-spacing:0;padding-left:2px;padding-right:2px;min-width:0}
  .mtab span{font-size:clamp(10px,2.95vw,11px);letter-spacing:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .mtab svg{width:17px;height:17px}
}

/* sous 340 px (iPhone SE de premiere generation, et les navigateurs a zoom
   de texte), trois libelles perdaient 6 px. Mesure : 9 px les fait tenir.
   On ne descend pas plus bas — en dessous le libelle ne se lit plus, et
   mieux vaudrait alors cinq onglets qu un sixieme illisible. */
/* ⚠ LES 9 px SONT PARTIS AVEC LEUR CAUSE. Ils existaient pour faire tenir les
   libellés en entier sous 340 px ; le `clamp()` ci-dessus plancher à 10 px et
   l'ellipse prend le relais en dessous. Un libellé coupé proprement se lit ;
   un libellé de 9 px, non. */
@media (max-width:340px){ .mtab{padding-left:0;padding-right:0} }

/* ── 1a · le pont ────────────────────────────────────────────────────────
   Couleurs du brief, toutes en jetons : investi en --ink-3, plus-values en
   --gain, frais en --loss, valeur en --ink, distribue en --accent. */
.pont{display:block;width:100%;height:auto}
.pont .pt-b--inv{fill:var(--ink-3)}
.pont .pt-b--gai{fill:var(--gain)}
.pont .pt-b--fra{fill:var(--loss)}
.pont .pt-b--val{fill:var(--ink)}
.pont .pt-b--dis{fill:var(--accent)}
.pont .pt-r{stroke:var(--dim-2);stroke-width:1;stroke-dasharray:2 3}
.pont .pt-v{font-family:var(--fm);font-size:13px;font-weight:500}
.pont .pt-v--inv{fill:var(--ink-3)}
.pont .pt-v--gai{fill:var(--gain)}
.pont .pt-v--fra{fill:var(--loss)}
.pont .pt-v--tot{fill:var(--ink)}
.pont .pt-l{font-family:var(--fm);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--dim)}
/* le chiffre qui coiffe le pont : la valeur creee, nette de frais */
.pont-hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5);
  flex-wrap:wrap;margin-bottom:var(--s-5)}
.pont-v{font-family:var(--fd);font-weight:400;font-size:var(--t-hero);line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.pont-v .u{font-size:.42em;letter-spacing:.02em;color:var(--dim);margin-left:.18em}
.pont-l{display:block;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-2)}
.pont-m{font-family:var(--fm);font-size:var(--t-s);color:var(--dim)}
.pont-m b{color:var(--ink);font-weight:500}
/* ⚠⚠ UN SVG MET SON TEXTE A L ECHELLE AVEC LUI. A 360 px le pont passe de
   720 a 312 unites, soit un facteur 0,43 : les libelles de 11 px rendaient
   4,8 px a l ecran, illisibles. Capture a l appui. Un media query qui BAISSE
   la taille (ce que j avais ecrit d abord) aggrave le defaut au lieu de le
   corriger. On la REMONTE, pour qu elle retombe a ~10 px une fois reduite. */
@media (max-width:720px){
  /* le repere fait 1080 de large pour ~312 px a l ecran : facteur 0,29. Pour
     rendre 11 px il en faut 38 dans le repere. Mesure a l appui, pas a vue. */
  .pont .pt-l{font-size:38px;letter-spacing:.06em}
  .pont .pt-v{font-size:45px}
}

/* quand le pont ne peut pas se dessiner, on le DIT — discretement, mais on le
   dit : un graphique qui disparait sans un mot se lit comme une panne. */
.pont-abs{margin:0 0 var(--s-6);padding:var(--s-4) var(--s-5);
  background:var(--surface-2);border-left:2px solid var(--rule-strong)}

/* ── la legende du pont, en HTML ─────────────────────────────────────────
   Hors du SVG, donc elle ne se met pas a l echelle avec le dessin : meme
   taille a 1440 qu a 360, et elle passe a la ligne toute seule. */
.pont-lg{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-3)}
.pont-lgi{display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.pont-c{width:10px;height:10px;flex:0 0 auto;border-radius:1px}
.pont-c--val{background:var(--ink)}
.pont-c--dis{background:var(--accent)}

/* ═════════════════════════════════════════════════════════════════════════
   06/10/2026 — L EN-TETE DE SOCIETE : UNE PLAQUE, PUIS CE QU ELLE FAIT
   Alex : « remplace nom par logo. Ameliore mise en page. »

   Le logo remplace bien le nom (la regle du 28/09 tenait, c est la charge qui
   ne portait pas de logo — corrige cote API). Restait la mise en page : trois
   blocs empiles au meme pas, une plaque seule en haut a gauche, et la
   description collee aux puces. Rien ne disait ce qui va avec quoi.

   On passe en DEUX COLONNES au-dessus de 720 px : la plaque a gauche, le texte
   a droite. C est ce que le brief C2 decrit (« cartouche 200x80, nom,
   description, puces »), et c est ce qui donne une forme a l en-tete au lieu
   d un empilement. Sous 720 px la colonne revient — une plaque de 200 px et un
   texte de 64 caracteres ne tiennent pas cote a cote sur un telephone.

   ⚠ `.soch` est declare dans la v4.1 (flex-direction:column). On NE TOUCHE PAS
   au prefixe de reference — DESIGN-REF1 le compare octet par octet : on pose
   la variante ici, apres, comme tout le reste de ce fichier. */
@media (min-width:721px){
  .soch{flex-direction:row;align-items:flex-start;gap:var(--s-6)}
  /* la plaque du brief : 200 x 80, et elle ne se laisse pas comprimer */
  .soch > .lg--lg{width:200px;height:80px;flex:0 0 200px}
}
/* le texte respire : la description sur une mesure lisible, les puces
   detachees d elle. Elles disent des FAITS (secteur, pays, tour) ; la
   description dit ce que fait la societe. Deux natures, deux blocs. */
.soch-d{max-width:64ch;line-height:1.55}
.soch-m{margin-top:var(--s-4);gap:var(--s-2) var(--s-3)}
/* sans logo, le nom reprend sa place et porte l en-tete */
.soch-n + .soch-d{margin-top:var(--s-3)}
@media (max-width:720px){
  .soch > .lg--lg{width:168px;height:68px}
}

/* ── les filtres de Documents : UN GROUPE PAR RANGEE ─────────────────────
   06/10/2026. `.doc-sel` etait une seule rangee flex-wrap pour les DEUX
   groupes : quand les puces de vehicule debordaient, « YEAR » se posait au
   milieu d elles. Un libelle de groupe ouvre sa rangee, il ne flotte pas.
   ⚠ La rangee interieure garde `flex-wrap` : sept vehicules passent toujours
   a la ligne, mais entre eux, sous leur propre libelle. */
.doc-sel{flex-direction:column;align-items:stretch;gap:var(--s-3)}
.doc-grp{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2)}
.doc-grp .lbl{flex:0 0 auto;margin-right:var(--s-2)}

/* ── LE TABLEAU DES MOUVEMENTS TIENT DANS SA CARTE ───────────────────────
   06/10/2026, mesure a plusieurs largeurs : a 900 px le tableau rendait
   859 px dans une carte de 837, et a 800 px 859 dans 737. Il partait donc en
   defilement lateral alors qu il n a que quatre colonnes.

   La cause : `.pt td{white-space:nowrap}` s applique a TOUTES les cellules,
   y compris la colonne « Movement », dont la sous-ligne porte
   « Superpower · SPV Superpower 2 ». Une colonne de texte doit pouvoir
   revenir a la ligne ; les colonnes de CHIFFRES, elles, ne le doivent jamais
   (un montant coupe en deux ne se lit plus). On ouvre donc la seule colonne
   qui est du texte, et on laisse les autres telles quelles. */
.pt .fl-m{white-space:normal}
.pt .fl-m i{white-space:normal;line-height:1.35}
/* la colonne de texte prend la place qui reste, les autres se serrent */
.pt td:has(> .fl-m),.pt th:nth-child(2){width:auto;min-width:0}

/* ── un titre de document peut etre long ─────────────────────────────────
   06/10/2026. Les actes juridiques portent desormais leur vrai titre (« EQNX
   Star 3 Roundtable — PV d AG d augmentation de capital, SPV Sanas »), qui
   depasse la largeur de la colonne. On le laisse revenir a la ligne, borne a
   deux lignes : une ellipse sur une seule ligne couperait precisement la
   partie qui distingue deux pieces voisines (« PV » / « Extrait du PV »). */
.doc--row .d-t b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.3}

/* le mot qui manquait au selecteur de langue : on dit si la preference a ete
   retenue. Discret, mais ecrit — un lisere rouge ne se lit pas. */
.lsel-w{margin:0;padding:var(--s-3) var(--s-4);border-top:1px solid var(--rule);
  font-size:var(--t-xs);line-height:1.45;color:var(--dim);max-width:260px}

/* ── LES DEUX COLONNES DE CHIFFRES SE TIENNENT, A DROITE ────────────────
   06/10/2026, Alex : « invested est centre mais value est aligne a droite »,
   puis « les deux a droite ».

   ⚠ MESURE D ABORD : les deux sont bel et bien alignes a droite, et a la
   pixel pres — le bord droit du contenu touche le bord droit de la cellule
   dans les deux colonnes, en-tete comme valeurs. Ce n est pas un defaut
   d alignement.

   C est un defaut d ESPACEMENT. La piste « Invested » fait 120 px pour un
   contenu d environ 70 : il reste 50 px de vide a sa gauche, puis l ecart de
   grille, puis « Value ». Les deux nombres se retrouvent separes par pres de
   90 px et l oeil ne les lit plus comme une colonne de chiffres — il lit un
   nombre pose au milieu de son blanc. Le ressenti est juste, la cause etait
   ailleurs que la ou on la cherchait.

   On fait donc tenir la piste a son contenu (`max-content`) : elle se colle
   a « Value », les deux se lisent ensemble, et le nom reprend la place
   liberee. La piste reste une piste — en-tete, lignes et total partagent la
   meme, donc rien ne peut se decaler. */
/* ⚠ PAS `max-content` : chaque rangee est SA PROPRE grille (le `display:grid`
   est sur `.hrow`, pas sur la liste), donc une piste dimensionnee au contenu
   se dimensionne RANGEE PAR RANGEE. Essaye et mesure : le bord entre les deux
   colonnes se mettait a bouger d une ligne a l autre selon la longueur du
   montant. Des pistes FIXES, et dimensionnees au plus large contenu reel
   (« €2 746 390 » fait 105 px) : elles se touchent presque, et elles tiennent
   l alignement que LP-29 verifie. */
.hlist--pf .hrow{grid-template-columns:56px minmax(0,1fr) 112px 120px 132px 24px}

/* ═════════════════════════════════════════════════════════════════════════
   06/10/2026 — LES FILTRES, UNE SEULE FORME ; LES TABLEAUX, UN SEUL CALAGE
   Ajouts APRES la v4.1, comme tout le reste de ce fichier.

   ── 1 · le filtre segmente, partout ────────────────────────────────────
   Alex : « les filtres doivent avoir le meme format partout. Utiliser le
   meme que dans portfolio ». Trois formes coexistaient pour une seule
   intention ; il ne reste que `.acct`. Voir filtreSegmente() dans lp.js.
   ⚠ Au-dela de quatre choix la bande passe a la ligne : huit vehicules sur
   une seule rangee deborderaient, et `.acct` ne sait pas se couper. */
.fseg{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);margin:0 0 var(--s-5)}
.fseg-l{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);flex:0 0 auto}
.acct--multi{flex-wrap:wrap}
.acct button i{font-style:normal;color:var(--dim-2);margin-left:var(--s-1)}
.acct button[aria-selected="true"] i{color:var(--dim)}
@media (max-width:720px){ .acct--multi button{flex:0 1 auto} }

/* ── 2 · le calage des colonnes ─────────────────────────────────────────
   Alex : « colonne de gauche, aligne a gauche, autres colonnes : centre.
   Comme ca sur tous les tableaux ».

   ⚠ CE QUE CELA COUTE, ET QUI EST ASSUME : des nombres centres ne s alignent
   plus en colonne. `tabular-nums` donne a chaque chiffre la meme chasse pour
   que les unites tombent sous les unites et les milliers sous les milliers —
   un calage a droite en tire parti, un centrage l annule. « 2,5 M€ » et
   « 10,0 M€ » n ont plus leur virgule au meme endroit. C est un choix de
   lecture, pas une erreur : dit ici pour qu il ne se redecouvre pas.

   `tabular-nums` RESTE pose : il garde la largeur des chiffres stable d une
   ligne a l autre, donc les colonnes ne respirent plus au changement de
   valeur, meme centrees. */
.pt th,.pt td{text-align:center}
.pt th:first-child,.pt td:first-child{text-align:left}
.pt th.num,.pt td.num{text-align:center}
.pt th.num:first-child,.pt td.num:first-child{text-align:left}
/* les listes `.hrow` suivent la meme regle : le nom a gauche, les cases au
   centre. L en-tete porte les memes classes, donc il suit sans rien de plus. */
.hrow-f{text-align:center}
.hrow-n{text-align:left}

/* ── un titre de colonne sur deux lignes ────────────────────────────────
   Voir titreColonne() dans lp.js : le point median separait deux notions,
   on coupe la. `line-height` resserre pour que deux lignes de libelle ne
   fassent pas gonfler la rangee d en-tete. */
.tc-l{display:block;line-height:1.25}
.hrow--head{height:auto;min-height:40px;padding-top:var(--s-2);padding-bottom:var(--s-2)}

/* ── le tableau de performance suit la meme regle de calage ─────────────
   Alex : « colonne de gauche, aligne a gauche, autres colonnes : centre.
   Comme ca sur tous les tableaux ». `.perf-r` a sa propre grille, donc ses
   regles de calage lui sont propres — et il portait `text-align:right` sur
   toutes ses colonnes sauf la derniere, alignee a gauche. Trois calages dans
   un seul en-tete. */
.perf-r--head > :not(:first-child),
.perf-r--head > :last-child{text-align:center}
.perf-r > :not(:first-child){text-align:center}
.perf-r .num{text-align:center}
/* la barre de parts reste etiree : ce n est pas un nombre, c est un dessin */
.perf-r .pb{text-align:left}

/* ── LA SECTION PERFORMANCE, REMISE D APLOMB ─────────────────────────
   06/10/2026, Alex : « l organisation de cette section est bordelique ».
   `.perf-hd` est SUPPRIME du gabarit (voir lp.js) : c etait un flex
   `space-between` laisse ouvert, qui posait le selecteur et les indicateurs
   cote a cote et vidait le quart haut-gauche. Ses regles partent avec lui —
   une regle sans emploi redevient vraie au premier qui recopie son nom. */
/* Les indicateurs tiennent la largeur, et leurs filets les separent vraiment :
   un `padding-right` seul laissait la derniere colonne coller au bord. */
.perf-k > div{padding:var(--s-4) var(--s-5) var(--s-4) 0}
.perf-k > div + div{padding-left:var(--s-5);border-left:1px solid var(--rule-soft)}
.perf-k > div:last-child{padding-right:0}

/* Les barres et leur legende forment UN bloc : sans ce groupe, le `gap` de
   `.perf` les separait autant que deux sections, et la legende flottait. */
.perf-mixw{display:flex;flex-direction:column;gap:var(--s-3)}

@media (max-width:720px){
  .perf-k > div{padding:var(--s-3) 0}
  .perf-k > div + div{padding-left:0;border-left:0}
}
/* FIN-PERF-ORG */

/* ── LE PORTEFEUILLE EN LOGOS ────────────────────────────────
   06/10/2026, Alex : une grille de logos avant les millesimes, un popup par
   societe. « mets juste les logos » — donc AUCUNE puce de secteur sous la
   plaque : sur sa capture, « DEEPTECH » se coupait en « DEEPTEC / H ».

   ⚠ La plaque fait 148×64, pas 64×32 comme `.lg`. Le brief pose la question
   ouverte : « la vignette de 26 px rend un logotype horizontal illisible —
   elargir la case pour les logotypes, ou n y mettre qu une marque carree ? ».
   Ici la reponse est CASE LARGE : c est le seul ecran ou le logo est le sujet
   et non un reperage en bout de ligne, donc il a droit a sa largeur.
   ⚠ `auto-fill`, pas `auto-fit` : avec `auto-fit` trois sociétés s etiraient
   sur toute la largeur et chaque plaque devenait un panneau. La grille garde
   son pas, et une rangee incomplete reste alignee a gauche. */
.pco-g{display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.pco-i{padding:0;border:1px solid var(--rule);border-radius:var(--r-m);
  background:var(--ground);cursor:pointer;display:flex;align-items:center;
  justify-content:center;min-width:0;transition:border-color .12s,background .12s}
.pco-i:hover{border-color:var(--dim-2);background:var(--surface-2)}
.pco-i:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.lg--pco{width:100%;height:64px;border:0;background:transparent;padding:var(--s-3) var(--s-4);
  font-family:var(--fd);font-size:var(--t-l);text-transform:uppercase;color:var(--ink)}
.lg--pco.lg--img{background:var(--logo-bg)}
.pco-i .lg--pco.lg--img{background:transparent}

.pco-d .defs-h{align-items:center}
.pco-d .lg--pco{width:auto;max-width:200px;height:48px;padding:0}
/* La regle pco-n est supprimee le 06/10 : « in the company card, no need to name it,
   logo is enough ». Le nom vit dans l `aria-label` du <dialog> pour qui ne
   voit pas le logo, et `plaqueSociete()` rend le NOM quand le fichier manque —
   un panneau n est donc jamais anonyme. */
.pco-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.pco-f > div{min-width:0}
.pco-w{margin:0}
/* FIN-PCO */

/* ── LE RYTHME VERTICAL N A QU UN PROPRIETAIRE ───────────────────────
   06/10/2026, Alex : « il y a des problemes de spacing vertical ».
   MESURE, ecran par ecran, des ecarts entre enfants directs de `.pbody` :
     home 12 · 64 · 48 · 48 · 80      portfolio 64 · 48 · 48 · 48
     statement 48 · 64 · 72 · 48 · 48   holding 48×6 · 68 · 63
     eqnx 48×5 · 16 · 48           settings 64 · 107
   `.pbody` est une colonne flex avec `gap:var(--s-7)` : 48 px est LE pas. En
   flex, une marge ne se fond PAS dans le gap, elle s y AJOUTE — donc chaque
   bloc qui garde une marge de l epoque « display:block » decale son voisin.
   Les ecarts voulus (12 titre/sous-titre, 64 apres le titre) sont ecrits une
   fois, en haut, et corrigent le gap exprès. Les autres etaient des restes.

   • 72 px : `.qsel{margin:0 0 var(--s-5)}` — 24 px de marge basse + 48 de gap.
   • 68 / 63 px : un <p> a style en ligne (corrige dans lp.js).
   • 16 px : `.meth` se tirait de 32 px vers le haut. Resultat a l ecran : la
     mention « Methodology » collee a la derniere carte, puis un vide jusqu au
     pied. Un renvoi de bas de page se lit AVEC le pied, pas accroche au corps.
   • 80 / 107 px sur `.ft` : ce sont les `margin-top:auto` qui poussent le pied
     en bas d une page courte — voulu (« footer should never be higher that the
     bottom of page », 06/10). Ils ne sont PAS corriges. */
.qsel{margin-bottom:0}
.meth{margin-top:0}
.retour{display:flex}
/* FIN-RYTHME-V */

/* ── LES CONSTANTES QUI PARTAIENT EN LIGNE ────────────────────────
   Regle dure n°1 du brief : « Aucun style en ligne. Jamais. » La CSP servie est
   `style-src 'self'`. `data-sty` est l echappatoire sanctionnee pour ce que
   SEUL le rendu connait — une largeur de barre, une teinte de segment — et se
   reconnait a son interpolation. Neuf `data-sty` n en portaient aucune : des
   constantes, donc des regles de feuille ecrites ailleurs que dans la feuille,
   invisibles a qui lit le CSS. La garde LP-30 les compte desormais.
   ⚠ `margin-top:20px` devient `--s-5` (24) : 20 n est dans aucun token, et
   c etait un des ecarts qu Alex voyait le 06/10. */
.lg--creux{visibility:hidden}
.hrow-c--fin{width:14px}
.card--attention{border-color:var(--accent)}
.legend--sous{margin-top:var(--s-5)}
.sw--deploye{background:var(--dim-2)}
.sw--fmv{background:var(--accent)}
.sw--gain{background:var(--accent-wash);border:1px solid var(--accent)}
.sw--perte{background:var(--loss-wash);border:1px solid var(--loss)}
.note--serre{margin-top:var(--s-3)}
/* FIN-NO-INLINE */

/* ⚠ MEME DEFAUT QUE `.qsel`, autre endroit : `.fseg{margin:0 0 var(--s-5)}`
   datait de l epoque ou il vivait dans un `display:block`. Dans `.perf`
   (colonne flex, `gap:var(--s-6)`) les 24 px S AJOUTENT aux 32 : mesure 56 px
   sous le selecteur contre 32 partout ailleurs dans la carte. Le conteneur
   possede le rythme ; le filtre ne le double pas.
   ⚠ La marge reste utile la ou `.fseg` n est PAS dans un conteneur a gap —
   l ecran Documents. On ne la retire donc que sous `.perf`, qui en a un. */
.perf > .fseg{margin-bottom:0}
/* FIN-FSEG */

/* ⚠ `.cx .k` N ETAIT STYLE NULLE PART. La feuille habille `.cx b` ; la
   maquette du brief ecrit `<span class="k">sector</span>`, et l ecran Deal l a
   recopiee telle quelle (lp.js, carte de levee). Resultat : « sector », « geo »,
   « hq » y sortent en texte courant au lieu du petit mono en capitales — la
   faute n°2 du brief, mot pour mot : « un nom de classe se LIT dans la feuille,
   il ne se devine pas ». On accepte les deux graphies plutot que de corriger un
   seul des deux appelants : la maquette restera lisible elle aussi.
   ⚠ Les plaques du panneau societe se mettent a la ligne : `.cx{white-space:
   nowrap}` (l.663) ferait deborder « Paris, France » d un panneau de 360 px. */
.cx b,
.cx .k{font-family:var(--fm);font-weight:400;font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pco-d .soch-m{margin-top:var(--s-5)}
.pco-d .cx{white-space:normal}
/* FIN-CX-K */

/* ⚠ MESURE A 360 px : `.pco-g` rendait UNE colonne de 262 px, soit dix
   plaques l une sous l autre et un ecran de defilement pour une grille de
   logos. 148 px de pas ne tiennent pas deux fois dans 262 (2×148+12 = 308).
   Le pas descend a 112 sous 720 px : 2×112+12 = 236, deux colonnes passent.
   La plaque garde sa hauteur — c est la LARGEUR qui manquait, et un logotype
   horizontal a besoin de largeur avant d avoir besoin de hauteur. */
@media (max-width:720px){
  .pco-g{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s-2)}
  .lg--pco{height:56px;padding:var(--s-2) var(--s-3)}
}
/* FIN-PCO-MOB */

/* ── LA LEGENDE DE LA CARTE, EN HTML ───────────────────────────
   06/10/2026, Alex : « ameliorer le look des legendes ». Elle vivait dans le
   SVG, a `font-size:9` — une taille qui n existe pas dans l echelle de la page
   et que le viewBox redimensionnait differemment a chaque largeur.
   Elle prend ici le meme gabarit que `.perf-leg` : `--t-s`, pastille de 10 px,
   `--s-5` entre les entrees. Centree, parce que la carte l est.
   Les trois marques reprennent EXACTEMENT ce que le dessin trace : un aplat
   de pays (`--accent-2`), un point plein pour un siege, un anneau creux pour
   un autre bureau — memes roles de couleur que `dot-map.php` sous `css=1`. */
.geo-leg{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-3) var(--s-5);margin-top:var(--s-4)}
.geo-leg[hidden]{display:none}
.geo-leg span{display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--t-s);color:var(--ink-2)}
.geo-m{width:10px;height:10px;flex:0 0 10px;box-sizing:border-box}
.geo-m--pays{border-radius:2px;background:var(--accent-2)}
.geo-m--hq{border-radius:50%;background:var(--ink)}
.geo-m--bureau{border-radius:50%;background:var(--surface);border:1.5px solid var(--ink)}
/* FIN-GEO-LEG */

/* ── LES TROIS RANGEES DE FILTRES, UNE SEULE FORME ──────────────────
   06/10/2026, Alex : « pas super bien aligne etc ».
   • `.doc-filters` et `.doc-sel` sont des colonnes flex : `align-items` y vaut
     `stretch` par defaut et ETIRAIT chaque rangee sur toute la largeur — d ou
     un bandeau beige de 1 870 px pour trois puces. `flex-start` le corrige.
   • `.doc-grp` etait un flex `wrap` : des que les puces debordaient, le
     libelle partait seul sur la ligne du dessus. Une grille a deux colonnes ne
     peut pas se separer de son libelle.
   • La premiere colonne est FIXE (76 px, la largeur de « VEHICLE » en mono
     capitales) : c est elle qui fait que les trois groupes de puces commencent
     au meme x. `auto` l aurait recalculee par rangee, donc trois x differents.
   • `justify-self:start` : sans lui la grille etire les puces sur la colonne,
     et on retrouvait le bandeau pleine largeur de depart. */
.doc-filters,
.doc-sel{align-items:flex-start}
.doc-grp{display:grid;grid-template-columns:76px minmax(0,1fr);
  align-items:center;gap:var(--s-3);width:100%}
.doc-grp > .lbl{margin-right:0}
.doc-grp > .acct,
.doc-grp > select{justify-self:start;min-width:0;max-width:100%}

@media (max-width:720px){
  /* sur telephone le libelle passe au-dessus : 76 px de colonne morte a cote
     de puces deja a l etroit coutent plus qu ils ne rangent. */
  .doc-grp{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
}
/* FIN-DOCFIL */

/* ⚠ UNE COURBE RABATTUE LE DIT. L echelle des micro-courbes est desormais
   PARTAGEE par toute la colonne (en multiple du cout, centree sur 1,00×) :
   c est ce qui rend deux lignes comparables. Une valeur qui sort de cette
   echelle est donc bornee au bord — et une courbe qui s arrete au bord sans
   le dire ment sur son amplitude. Le pointille l annonce. */
/* ⚠ PLUS DE POINTILLE. Il devait signaler une courbe rabattue sur le bord ;
   avec une bande trop serree il s allumait sur des lignes ordinaires (Alex,
   06/10 : « courbe en pointilles… » sur un 1,10×). La bande est desormais
   assez large pour que le cas soit rare, et quand il survient la courbe colle
   visiblement au bord — ce qui se voit. Le fait reste dit dans le texte de
   remplacement de la courbe, pour qui la lit a la synthese vocale. */
.sp-l--hors{stroke-dasharray:none}
/* FIN-SPARK-ECH */

/* ── L ACCUEIL : ANNONCE ET NOUVEAUTES ─────────────────────────
   06/10/2026, Alex : « un espace communication EQNX pour un billet ou
   l annonce d un evenement, un encart pour les nouveaux documents publies /
   reportings ».
   `.msg` existait deja (sans ecrivain) ; il gagne un titre et, pour un
   evenement, sa date en tete — ce qu on retient d une invitation, c est QUAND. */
.msg-t{margin:var(--s-3) 0 0;font-family:var(--fd);font-weight:400;
  font-size:var(--t-l);letter-spacing:-.01em;color:var(--ink)}
.msg-q{display:block;margin-top:var(--s-2);font-family:var(--fm);
  font-size:var(--t-xs);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--accent-2)}
.msg-a{display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:wrap}

/* Les nouveautes : une LISTE, pas des cartes. Cinq lignes au plus, chacune un
   type, un objet et une date — et le clic mene a l onglet qui porte la piece,
   jamais au fichier (voir lpNouveautes dans lp-api.php). */
.nouv{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.nouv-i{border-bottom:1px solid var(--rule)}
.nouv-i > a{display:grid;grid-template-columns:150px minmax(0,1fr) auto;
  align-items:baseline;gap:var(--s-4);padding:var(--s-4) 0;color:var(--ink)}
.nouv-i > a:hover{color:var(--accent-2)}
.nouv-k{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--dim)}
.nouv-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--t-b)}
.nouv-d{font-family:var(--fm);font-size:var(--t-s);color:var(--dim);
  font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .nouv-i > a{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3)}
  .nouv-k{grid-column:1 / -1}
}
/* FIN-HOME-NEWS */

/* ⚠ UNE COLONNE DE MOINS. 06/10, Alex : « mettre le multiple tvpi sous la
   valeur ce qui permet d avoir un bloc / colonne KPI de moins ». La grille
   passe donc de six pistes a cinq ; la colonne de valeur s elargit pour porter
   ses deux lignes. Une piste declaree que rien ne remplit est le debut d une
   derive — et la garde LP-29 la verrait. */
.perf-r{grid-template-columns:minmax(0,1fr) 104px 112px 112px 160px}
.perf-k--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* la cellule « valeur + multiple » : meme forme que les millesimes */
.perf-r .vm{display:flex;flex-direction:column;gap:2px}
.perf-r .vm b{font-weight:400}
.perf-r .vm i{font-style:normal;font-size:var(--t-xs);color:var(--dim)}
.perf-r .vm i.up{color:var(--gain)}
.perf-r .vm i.down{color:var(--loss)}
@media (max-width:980px){
  .perf-r{grid-template-columns:minmax(0,1fr) 104px 112px}
  .perf-r > :nth-child(n+4){display:none}
  .perf-k--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .perf-r{grid-template-columns:minmax(0,1fr) 92px}
  .perf-r > :nth-child(n+3){display:none}
  .perf-k--3{grid-template-columns:minmax(0,1fr)}
}
/* FIN-PERF-VM */

/* ⚠ LE FIL D ARIANE PORTE LE MEME BOUTON QUE LE RETOUR DU BAS. `.crumb` le
   coiffait en petit mono gris (`color:var(--dim)`, interlettrage, capitales) :
   pose sur un `.btn--g`, cet habillage gagnait et le bouton n en etait plus un.
   On rend donc la main au bouton quand il y en a un, et `.crumb` garde son
   style pour le texte nu. */
.crumb .btn{font-family:var(--fb);letter-spacing:normal;text-transform:none;
  font-size:var(--t-s);color:var(--ink)}
.crumb a.btn:hover{color:var(--ink)}
/* FIN-CRUMB */

/* ⚠ 06/10/2026, Alex : « pas sur que la police des legendes soit bonne ».
   Verifie : les trois legendes du portail (`.legend` du graphe, `.perf-leg` de
   la performance, `.geo-leg` de la carte) emploient la MEME police de corps au
   MEME corps — c est voulu, et c est ce qui fait qu une legende se reconnait
   d un ecran a l autre. Une seule divergeait : `.perf-leg` n heritait pas de
   `--ink-2` et sortait en encre pleine. Elle rentre dans le rang.
   ⚠ PAS DE MONO ICI, meme si l axe du graphe en emploie. L axe est une
   GRADUATION (des chiffres a aligner) ; une legende est du TEXTE. */
.perf-leg span{color:var(--ink-2)}
/* FIN-LEG-UNE */

/* ── UN LOGO NE SE MET PAS DANS UN CADRE ────────────────────────
   06/10/2026, Alex : « un peu partout les logos sont encadres … Je prefere
   qu ils ne soient pas encadres ».
   `.lg` portait `border:1px solid var(--rule)` ET `background:var(--logo-bg)`.
   Le cadre etait la pour que des INITIALES ne flottent pas dans le vide — un
   besoin reel, mais qui ne concerne QUE le repli sans fichier. Un logotype, lui,
   porte deja sa forme : l encadrer ajoute un rectangle que le graphiste de la
   societe n a pas dessine, et met deux bordures cote a cote quand la plaque est
   dans une carte.
   ⚠ LA DISTINCTION EST DEJA DANS LE GABARIT : `vignette()` pose `.lg--img`
   quand il y a un fichier, et rien quand il rend des initiales. On s appuie
   dessus au lieu d ajouter un modificateur de plus. */
.lg--img{border-color:transparent;background:transparent;padding:0}
.lg--img img{max-width:100%;max-height:100%}
/* FIN-LOGO-NU */

/* ── LES ELEMENTS CLES D UNE SOCIETE ──────────────────────────
   Trois faits par carte, chacun : une etiquette, un chiffre, et la precision
   qui le date ou le nomme. Meme forme que `.kpi`, mais la sous-ligne peut
   courir sur plusieurs lignes (une liste de co-investisseurs ou de marches). */
.kf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.kf > div{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.kf > div + div{padding-left:var(--s-5);border-left:1px solid var(--rule-soft)}
.kf-l{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--dim)}
.kf-v{font-family:var(--fd);font-size:var(--t-xl);line-height:1.1;color:var(--ink)}
.kf-s{font-size:var(--t-s);color:var(--dim);line-height:1.5}
/* les deux onglets d une fiche societe */
.socngl[hidden]{display:none}
@media (max-width:720px){
  .kf{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .kf > div + div{padding-left:0;border-left:0;padding-top:var(--s-4);
    border-top:1px solid var(--rule-soft)}
}
/* FIN-KF */

/* ⚠ LA GARDE LP-31 M A REPRIS, le jour meme ou je l ai posee : les deux
   onglets de la fiche societe sont un `.fseg` pose en enfant direct de
   `.pbody`, et `.fseg` porte `margin-bottom:var(--s-5)` de l epoque
   `display:block`. 24 px s ajoutaient donc aux 48 du `gap`.
   La regle est la meme que pour `.perf > .fseg` : le conteneur qui possede un
   `gap` possede le rythme, et ses enfants ne le doublent pas. */
.pbody > .fseg{margin-bottom:0}
/* FIN-FSEG-PBODY */

/* ── LES CARTES D UN ONGLET GARDENT LE RYTHME DE LA PAGE ──────────────
   ⚠ CAUSE MESUREE : en enveloppant les cartes dans `.socngl`, elles ont cesse
   d etre des enfants DIRECTS de `.pbody` — et le `gap:var(--s-7)` de `.pbody`
   ne s applique qu a ses enfants directs. Les cartes se touchaient donc bord a
   bord, « Business » et « Press review » formant un seul bloc a deux en-tetes.
   L enveloppe reprend le meme rythme : c est le prix d un conteneur
   intermediaire, et il se paie explicitement. */
.socngl{display:flex;flex-direction:column;gap:var(--s-7)}

/* ⚠ `repeat(3, 1fr)` laissait DEUX COLONNES VIDES quand une societe n a qu un
   fait connu (Moon Surgical : « Markets 2 », seul, sur un tiers de la carte).
   `auto-fit` + `minmax` : un fait occupe la largeur, trois se partagent. */
.kf{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* les logos de co-investisseurs : des plaques, pas une liste de noms. */
.kf-inv{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--rule-soft)}
.kf-ig{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-3)}
.kf-i{display:inline-flex}
.lg--inv{width:104px;height:40px}
/* FIN-SOC-ONGL */

/* ⚠ 06/10/2026, Alex : « when value created is negative : red ».
   `.num.up/.down/.flat` porte la couleur depuis la l.225, mais plusieurs
   conteneurs de chiffre posent `color` APRES, sur le meme element ou sur son
   parent : `.perf-k .v` (l.1094), `.kpi-v`, `.kf-v`. A specificite egale, la
   regle la plus tardive gagne — et un montant negatif ressortait en encre
   pleine, comme un gain.
   On reaffirme la regle LA OU ELLE DOIT GAGNER, et dans les deux sens : un
   chiffre signe se lit a sa couleur avant de se lire a son signe. */
.perf-k .v .num.up, .kpi-v.up, .kpi-v .num.up, .kf-v .num.up, .pont-v.up{color:var(--gain)}
.perf-k .v .num.down, .kpi-v.down, .kpi-v .num.down, .kf-v .num.down, .pont-v.down{color:var(--loss)}
.perf-k .v .num.flat, .kpi-v.flat, .kpi-v .num.flat, .kf-v .num.flat{color:var(--flat)}
/* FIN-NEG */

/* ── UN INDICATEUR EST CENTRE DANS SA CELLULE ───────────────────────
   06/10/2026, Alex : « les KPIs doivent etre centres dans leurs cellules de
   partout » + « le cadre des KPIs dans performance pas top ».
   Les trois familles d indicateurs (`.kpis/.kpi` des ecrans, `.perf-k` de la
   carte Performance, `.kf` des elements cles) etaient callees a gauche : dans
   une cellule a largeur egale, un libelle court et un montant long ne
   commencent pas au meme endroit, et l oeil ne retrouve plus de colonne.
   ⚠ ET LE CADRE. `.perf-k` portait un filet haut ET bas, et son
   `padding-right` sans `padding-left` decalait tout le bloc d un cran vers la
   gauche de la carte. Les filets VERTICAUX entre cellules suffisent a separer
   trois mesures ; les horizontaux dessinaient une boite dans une boite, juste
   sous le filet de l en-tete de carte. */
.kpi, .perf-k > div, .kf > div{align-items:center;text-align:center}
.perf-k{border-top:0;border-bottom:0}
.perf-k > div{padding:var(--s-5) var(--s-4)}
.perf-k > div + div{padding-left:var(--s-4)}
/* la sous-ligne reste lisible meme centree sur deux lignes */
.kpi-s, .perf-k .s, .kf-s{max-width:28ch;margin-inline:auto}
/* FIN-KPI-CENTRE */

/* ── UNE VALEUR ET SON MULTIPLE S ALIGNENT L UN SUR L AUTRE ───────────
   06/10/2026, Alex : « centrage » — sur une capture ou la valeur est callee a
   droite et le multiple juste en dessous a gauche, dans la MEME cellule. Les
   deux lignes decrivent la meme position : desalignees, elles se lisent comme
   deux colonnes qui se chevauchent.
   La regle du portail, posee le 06/10 : premiere colonne a gauche, les autres
   centrees. Une cellule a deux etages suit donc le meme axe pour ses deux
   etages — c est le minimum pour qu on les rattache l un a l autre. */
.hrow-f{text-align:center}
.hrow-f i, .hrow-f u.hrow-s{display:block;text-align:center}
.hrow--head .hrow-f, .hrow--head .hrow-f b{text-align:center}
/* la premiere colonne (le nom) garde sa gauche */
.hrow-n{text-align:left}
/* le meme etage dans un tableau `.pt` */
.pt td .hrow-s, .pt td u.hrow-s{display:block;text-align:center}
/* FIN-VM-CENTRE */

/* ── LA FICHE D UN UPDATE TRIMESTRIEL ───────────────────────────
   L accroche en tete, puis le recit. C est du TEXTE SUIVI : il lui faut une
   colonne de lecture (65 caracteres environ) et de l interligne, sinon une
   page de rapport se lit comme un tableau. */
.rpt-lead{margin:0;font-family:var(--fd);font-weight:400;
  font-size:clamp(19px,2.4vw,var(--t-xl));line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);max-width:46rem;text-wrap:balance}
.rpt-txt{max-width:40rem}
.rpt-txt p{margin:0 0 var(--s-4);font-size:var(--t-b);line-height:1.65;color:var(--ink-2)}
.rpt-txt p:last-child{margin-bottom:0}
/* l etat de sante dans la liste : une puce, pas un pave de couleur */
.hlist--rep .hrow-f .st{font-style:normal;font-size:var(--t-s)}
.hlist--rep .hrow-n small{display:block;margin-top:3px;color:var(--dim);
  font-size:var(--t-s);line-height:1.45;white-space:normal}
/* FIN-RPT-TXT */

/* ⚠ LA GARDE LP-31 A REPRIS L ECRAN DEAL. Il ne se rendait pas tant qu aucune
   levee n etait ouverte ; la publication de Sanas 2 l a fait apparaitre, et
   avec lui deux marges que `.pbody{gap:--s-7}` double :
     · `.canon3{margin:var(--s-3) 0 var(--s-1)}` — un reste de l epoque
       `display:block`, comme `.qsel` et `.fseg` avant lui ;
     · `.pbody > .note{margin-top:var(--s-4)}` — juste quand la note suit un
       texte DANS une carte, faux quand elle est enfant direct de `.pbody`.
   Ce sont les troisieme et quatrieme occurrences de la meme cause aujourd hui :
   le conteneur qui possede un `gap` possede le rythme, et aucun enfant ne le
   double. La garde les trouve maintenant toute seule. */
.pbody > .canon3{margin-top:0;margin-bottom:0}
/* ⚠ ET LA MARGE BASSE AUSSI : un `<p>` porte `margin: 1em 0` par defaut du
   navigateur. Ne remettre que la haute a zero laissait 13 px en bas — la
   sonde l a vu tout de suite, et elle avait raison : la moitie d un
   correctif est un correctif qui se represente. */
.pbody > .note{margin-top:0;margin-bottom:0}
/* FIN-LP31-DEAL */

/* ⚠ 06/10/2026, Alex : « toujours un petit probleme d alignement ». Mesure sur
   sa capture : « €1.0M » cale a x=1270, « 1.74× » a x=1197 — la valeur et son
   multiple, DANS LA MEME CELLULE, sur deux axes differents.
   LA CAUSE : `.perf-r .vm` est un flex en colonne. `text-align:center` herite
   bien, mais `align-items` y vaut `stretch` par defaut : chaque enfant occupe
   toute la largeur et centre son propre texte — ce qui marche tant que les
   deux enfants ont la meme largeur disponible, et echoue des que l un d eux
   (`<i>`, en ligne) ne s etire pas. On centre donc les ELEMENTS, pas seulement
   leur texte, et on l affirme sur les deux. */
.perf-r .vm{align-items:center;text-align:center}
.perf-r .vm > b, .perf-r .vm > i{display:block;width:100%;text-align:center}
/* FIN-VM-ALIGN */

/* ══ 06/10/2026 — SEPT CORRECTIONS DE MISE EN PAGE ═══════════════════════
   Toutes relevees par Alex en capture, toutes corrigees a leur cause. */

/* ── 1 · LE FILTRE SEGMENTE NE S ETIRE PLUS ──────────────────────────
   « le fond gris des filtres est sur toute la largeur dans flows, pas comme
   le format ailleurs ». `.acct` est un bloc flex : pose en enfant direct de
   `.pbody` (flex column, align-items:stretch) il prend toute la largeur.
   `filtreSegmente()` rend desormais son `.fseg` lui-meme — un seul ecrivain —
   et `.fseg` etant une rangee flex, le `.acct` s y replie sur son contenu.
   Il reste a neutraliser la marge basse partout ou le conteneur porte un gap
   (la regle du 06/10 : qui a le gap a le rythme). */
.pbody > .fseg, .perf > .fseg, .doc-grp > .fseg{margin-bottom:0}
.doc-grp > .fseg{justify-self:start;min-width:0;max-width:100%}

/* ── 2 · LE RETOUR A LA LIGNE S ALIGNE SUR LES NOMS ──────────────────
   « je voudrais que la deuxieme ligne du filtre vehicule soit alignee avec le
   premier de la premiere ligne autre que all. aussi noms justifies dans la
   premiere ligne ».
   « All » n est pas un choix parmi les autres : c est leur absence. Il garde
   sa place en tete et sort de la rangee des noms, qui occupe le reste et se
   repartit. `space-between` s applique LIGNE PAR LIGNE : la premiere rangee
   se justifie sur toute la largeur, la derniere reste callee a gauche — donc
   sous le premier nom, et non sous « All ». */
/* ⚠ PREMIERE VERSION FAUSSE, CORRIGEE LE MEME JOUR. J avais lu « noms
   justifies » comme `space-between` : la premiere rangee s etalait sur toute
   la largeur, avec des trous de 80 px entre les noms, et « ALL » se retrouvait
   seul en haut a gauche. Alex : « it is not what i wanted. only 2 lines but an
   alignment on the right side of all for both lines ».
   CE QU IL DEMANDE est plus simple et plus juste : « All » garde sa place en
   tete, les noms occupent le reste, et CHAQUE rangee de noms commence au meme
   endroit — a la droite de « All ». Le retour a la ligne se cale donc sous le
   PREMIER NOM, pas sous « All ».
   Deux choses le produisent : `align-items:flex-start` sur le `.acct` (sinon
   « All » se centre sur la hauteur des deux rangees et flotte), et un
   `flex-start` sur la rangee des noms, qui est son propre bloc de largeur. */
.acct{align-items:flex-start}
.acct-n{display:flex;flex-wrap:wrap;justify-content:flex-start;
  align-content:flex-start;gap:2px var(--s-2);flex:1 1 auto;min-width:0}

/* ── 3 · L EN-TETE D UN DEAL : LE LOGO AU-DESSUS DU TITRE ────────────
   « logo on top instead of title ». Et le site passe par `lienSite()`, qui
   porte la regle de l hote sans « www. » depuis le 28/09. */
.dealh{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4)}
.dealh .lg--lg{flex:0 0 auto}
.dealh .ph{margin:0}
.dealh-w{display:flex}

/* ── 4 · LE RECIT ET LES CHIFFRES COTE A COTE ────────────────────────
   « mise en page a ameliorer pour company et reporting ». La colonne de
   lecture garde sa mesure (65 signes) ; les 700 px laisses vides a sa droite
   recoivent les chiffres du trimestre, jusqu ici en carte separee dessous. */
.rpt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,264px)}
.rpt-grid--1{grid-template-columns:minmax(0,1fr)}
.rpt-grid > .rpt-txt{padding:var(--s-5) 20px;max-width:46rem}
.rpt-fig{display:flex;flex-direction:column;border-left:1px solid var(--rule)}
.rpt-fig .kpi{border-bottom:1px solid var(--rule);background:transparent;
  text-align:left;align-items:flex-start}
.rpt-fig .kpi:last-child{border-bottom:0}
.rpt-fig .kpi-l, .rpt-fig .kpi-s{max-width:none;margin-inline:0}
.rpt-fig .kpi-v{font-size:clamp(20px,2.2vw,var(--t-xl))}
@media (max-width:860px){
  .rpt-grid{grid-template-columns:minmax(0,1fr)}
  .rpt-fig{border-left:0;border-top:1px solid var(--rule);
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
  .rpt-fig .kpi{border-bottom:0;border-right:1px solid var(--rule);padding:var(--s-4) 20px}
  .rpt-fig .kpi:last-child{border-right:0}
}

/* ── 5 · DEUX INDICATEURS SE PARTAGENT LA LARGEUR ────────────────────
   « merge distributed & dpi » : Flows passe de trois cellules a deux. */
.kpis--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── 6 · LA MENTION DE BAS DE PAGE PREND TOUTE LA LARGEUR ────────────
   « all text like : Nothing on this page is an offer to sell securities […]
   in bottom of pages should be full width ».
   `.card-b > .note` et `.pbody > .note` partageaient une regle, donc une
   mesure de 72 signes. Ce sont deux objets differents : la premiere commente
   le contenu d une carte et se lit comme de la prose ; la seconde est la
   mention legale de la PAGE. Elle se detache donc par un filet et occupe la
   largeur, comme un pied. */
.pbody > .note{max-width:none;padding-top:var(--s-5);
  border-top:1px solid var(--rule-soft)}

/* ── 7 · LA CARTE BUSINESS RESPIRE ───────────────────────────────────
   La sous-ligne d un fait tenait quatre lignes (la note de saisie y etait
   recopiee, et jusqu a huit marches). Elle est bornee en hauteur de contenu
   par l ecran JS ; ici on borne sa MESURE pour qu une cellule etroite ne
   produise pas une colonne de mots isoles. */
.kf-s{max-width:34ch}
.kf-v{overflow-wrap:anywhere}
/* FIN-MEP-0610 */

/* ── UNE PLAQUE DE CO-INVESTISSEUR SANS LOGO PORTE LE NOM ────────────
   06/10/2026. Mesure sur Moon Surgical : les sept co-investisseurs rendaient
   « SP », « N( », « GH », « J& », « CH », « FM », « SC ». `initiales()` prend
   la premiere lettre des deux premiers mots — ce qui marche pour une PERSONNE
   et pour une societe courte, pas pour un nom de fonds, ou la deuxieme lettre
   tombe sur une parenthese (« NVIDIA (NVentures) ») ou une esperluette
   (« Johnson & Johnson »).
   Une plaque de 92 px porte le nom entier, en petit : c est ce qu un lecteur
   reconnait, et c est lisible meme quand le fichier manque. */
.lg--nom{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:4px 6px;font-family:var(--fb);font-size:11px;line-height:1.15;
  letter-spacing:0;text-transform:none;color:var(--dim);
  overflow:hidden;hyphens:auto;overflow-wrap:anywhere}

/* ── LES TERMES D UNE LEVEE SONT CENTRES DANS LEUR CELLULE ───────────
   « we are missing type of securities and all terms centered in their cell ».
   C est la meme regle que les indicateurs (FIN-KPI-CENTRE, 06/10) : une
   cellule de grille centre son contenu, sinon la colonne de droite flotte
   seule a gauche de son filet. */
/* ⚠ LA SPECIFICITE DOIT EGALER CELLE QU ON CORRIGE :  porte
    (l.700). Un  (0,2,0) ne la bat pas — il faut
   le meme chemin (0,2,1), sinon la valeur reste callee a gauche dans une
   cellule par ailleurs centree, et le defaut se represente. */
.det > div{text-align:center;align-items:center}
.det > div .k, .det > div .v, .det > div .s{margin-inline:auto;text-align:center}
.det > div .s{max-width:30ch}
/* FIN-LOGO-NOM */

/* ── UNE MARGE NEGATIVE APPARTIENT A SON COUPLE, PAS A L ELEMENT ─────
   LP-31, 06/10 : `deal · p.psub (mt=-24px)`.
   `.psub` porte `margin-top:calc(var(--s-5) * -1)` depuis toujours — un
   rattrapage qui n a de sens que COLLE SOUS `.phd`, dont il est le
   sous-titre. L en-tete de l ecran deal est devenue `.dealh` (le logo
   au-dessus du titre, 06/10) : le `.psub` qui la suit a herite du
   rattrapage sans avoir rien a rattraper, et il remontait de 24 px dans le
   `gap` de 48 px de `.pbody`.
   La regle du 06/10 vaut ici comme ailleurs : le conteneur qui possede un
   `gap` possede le rythme. La marge revient donc au COUPLE
   `.phd + .psub` — ou elle etait deja reaffirmee (l.863) avec une
   specificite superieure, donc rien ne change la ou c est juste. */
.pbody > .psub{margin-top:0}
/* FIN-PSUB-COUPLE */

/* ══ RESPONSIVE : LA SURFACE TOUCHABLE, SUR TOUT L ESPACE LP ═════════════
   06/10/2026, Alex : « optimize responsiveness across the whole LP space ».
   La sonde `tests/sonde-responsive-lp.py` passe les DOUZE ecrans a trois
   largeurs (360 / 768 / 1440) sur les charges reelles. Resultat : aucun
   debordement, aucun chevauchement — et SIX commandes sous 32 px de haut,
   presentes sur tous les ecrans parce qu elles vivent dans la coquille ou
   dans des composants partages.

   32 px est le plancher que tient tout le reste du portail (`.acct button`
   fait 34, `.btn` 36) : ce sont ces six-la qui divergeaient, pas la regle.

   ⚠ ON AGRANDIT LA ZONE, PAS LE DESSIN. Un lien textuel qui grossirait
   casserait le rythme de la ligne ou il vit. `min-height` + centrage vertical
   donnent la surface sans deplacer un pixel de texte ; la marge negative
   rattrape la hauteur ajoutee la ou l element est dans un flux serre. */
@media (pointer:coarse), (max-width:860px){
  /* le selecteur de langue, dans la coquille : present sur les 12 ecrans */
  .lsel-b{min-height:32px;padding-top:0;padding-bottom:0;
    display:inline-flex;align-items:center}
  /* les liens textuels : « My documents → », « Show 5 other holdings » */
  .btn--t{display:inline-flex;align-items:center;min-height:32px}
  /* le chevron d une rangee de portefeuille */
  .hrow-x{min-width:32px;min-height:32px;display:inline-flex;
    align-items:center;justify-content:center;margin:-7px 0}
  /* le site d une societe, et l adresse du contact */
  .soch-w,.ctc-m{display:inline-flex;align-items:center;min-height:32px}
  /* une plaque de co-investisseur sans logo : 10 px ne se lit pas sur un
     telephone. La plaque grandit AVEC le texte — sinon le nom se tronque, et
     un nom tronque ne se reconnait pas mieux que des initiales. */
  .lg--nom{font-size:11px}
  .lg--inv{width:104px;height:44px}
}
/* FIN-TOUCH-LP */

/* ── LES LOGOS NE SONT PAS ENCADRES ──────────────────────────────────
   06/10/2026, Alex : « remove logo frames ». C est la DEUXIEME fois — il
   l avait deja dit ce matin (« un peu partout les logos sont encadres […] je
   prefere qu ils ne soient pas encadres »), et j avais retire le cadre des
   vignettes SANS voir que la grille du portefeuille EQNX dessinait le sien,
   ailleurs dans la feuille, sur `.pco-i`.
   La regle vaut pour tout plateau de logo : le dessin se suffit, et onze
   rectangles alignes font une grille de cases, pas une liste de societes.
   ⚠ UN PLATEAU RESTE CLIQUABLE : on ne retire pas la lisibilite de l etat.
   Le survol et le focus passent du BORD au FOND — le premier etait decoratif,
   le second est une information. */
.pco-i{border-color:transparent;background:transparent}
.pco-i:hover{border-color:transparent;background:var(--surface-2)}
/* FIN-LOGO-SANS-CADRE */

/* ── LA DATE D ARRETE EST UNE NOTE SOUS LES CHIFFRES ─────────────────
   06/10/2026, Alex : « Your account · valued as at Q3 2026 below bridge
   graph ». Elle etait sous-titre de page : elle ANNONCAIT. Sous le pont, elle
   QUALIFIE ce qu on vient de lire — et c est son role.
   ⚠ `.psub` porte une marge negative qui n a de sens que collee sous `.phd`
   (voir FIN-PSUB-COUPLE) ; en pied, elle n a rien a rattraper. */
.psub--pied{margin-top:0;font-family:var(--fm);font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--dim)}

/* ── LA CARTE DU CONTACT RESPIRE ─────────────────────────────────────
   06/10/2026, Alex : « vertical spacing, carmen linares pardo ». Le nom et
   l adresse se touchaient (4 px) sous une vignette de 48 px : le bloc de
   texte paraissait colle en haut de sa cellule. Le nom et son adresse sont
   DEUX lignes d un meme bloc — un `gap` les tient, et le bloc se centre sur
   la vignette au lieu de s aligner sur son sommet. */
.ctc{align-items:center}
.ctc > div{display:flex;flex-direction:column;gap:var(--s-2)}
.ctc-m{margin-top:0}

/* ── LA COLONNE EVOLUTION MONTRE L ECART ─────────────────────────────
   Une seule barre : le cout en teinte du segment, puis l ecart a sa suite —
   vert s il est gagne, rouge s il manque. Deux barres partant de zero
   rendaient un ecart de 40 % comme deux rubans presque identiques.
   ⚠ `<s>` porte un `text-decoration:line-through` par defaut du navigateur :
   on le retire, c est une boite, pas du texte barre. */
/* ⚠⚠ 07/10/2026, Alex : « off scale evolution » + « when value created is
   negative, the red should not be additive ».
   `overflow:hidden` sur la piste : une somme de largeurs qui depasserait 100 %
   par un arrondi est COUPEE au lieu de sortir du cadre. Et `min-width:0` pour
   que les deux segments puissent se reduire au lieu de pousser. */
.perf-r .pb u{display:flex;align-items:stretch;overflow:hidden}
.perf-r .pb u b{flex:0 1 auto;min-width:0}
.perf-r .pb u s{display:block;flex:0 0 auto;height:100%;text-decoration:none;
  border-radius:0 1px 1px 0}
.perf-r .pb u s{flex:0 1 auto;min-width:0}
.perf-r .pb u s.up{background:var(--gain)}
/* ⚠ LA PERTE SE DESSINE EN CREUX. Un gain est une longueur EN PLUS — le vert
   est donc plein. Une perte est une longueur QUI MANQUE : la remplir de rouge
   rendait la barre de valeur aussi longue que celle de l investi, et l oeil y
   lisait une valeur qui n existe pas. Bordee et non remplie, elle montre
   l ecart sans l ajouter. */
.perf-r .pb u s.down{background:transparent;
  border:1px solid var(--loss, #b4453a);border-left:0;box-sizing:border-box}
.perf-r .pb u s.down{background:var(--loss)}
/* ⚠ LES DEUX BARRES SONT REVENUES (Alex, 06/10 : « I prefer the previous
   format but with improved display of value created »). La premiere garde
   donc son opacite reduite — c est elle qui dit le COUT, en retrait — et la
   seconde est pleine. Seul l ecart, au bout de la seconde, change de
   couleur. */
.perf-r .pb u b{border-radius:1px 0 0 1px}
.perf-r .pb u:first-child b{opacity:.45}
.perf-r .pb u:last-child b{opacity:1}
/* FIN-MEP-0610-B */

/* ⚠ LE GROUPEMENT PAR MILLESIME A VECU UNE HEURE. C etait ma reponse a
   « une plus jolie organisation » ; vu a l ecran, il coupait dix logos en deux
   rangees etiquetees pour un gain de sens nul, et Alex a tranche : « logos not
   by vintage it is not necessary ». Les quatre regles (pco-s, pco-sh,
   pco-sa, pco-ss) sont SUPPRIMEES, pas commentees — une regle morte finit
   par etre remise en service sans qu on sache pourquoi elle avait ete coupee.
   FIN-PCO-MILLESIME */

/* ── LA VIGNETTE RESPIRE AVANT LE NOM ────────────────────────────────
   06/10/2026, Alex : « un peu d'espace entre la colonne du logo et la colonne
   suivante ». Le `gap` de `.hrow` vaut `--s-4` pour TOUTES les pistes — il
   sépare aussi bien deux colonnes de chiffres que le logo du nom. Or ces deux
   voisinages ne se ressemblent pas : des nombres alignés se lisent serrés, un
   logo a besoin d'un blanc pour cesser d'être un préfixe du nom.
   ⚠ `--row-cols` N'EST PAS REDÉFINI — il sert au relevé de compte et à
   l'audit, et le redéfinir localement est précisément la dérive du 05/10.
   ⚠ ET LA MARGE S'AJOUTE AU `gap`, VOLONTAIREMENT ICI. C'est d'habitude le
   défaut (06/10, quatre fois) ; c'est ici le moyen : le conteneur garde son
   rythme pour toutes les autres pistes, et cette seule frontière gagne la
   différence. On l'écrit pour qu'une relecture ne la « corrige » pas. */
/* 06/10, second passage : « increase the space between logo and the next cell
   laterally, just a bit » — un cran sur l'echelle, --s-3 (12px) -> --s-4 (16px),
   soit 32px avec le `gap` au lieu de 28. Le chevron suit du MEME cran : il est
   tire dans ce blanc, et ne pas le deplacer avec la marge le laisserait deriver
   de 4px vers le nom — l'ecart qu'on vient d'ouvrir se refermerait sur lui. */
/* ⚠ 06/10, TROISIEME passage sur ce meme blanc : 12 px, puis 16, puis 24.
   Alex l a demande pour la liste des updates, puis pour celle des holdings —
   c est donc le blanc de TOUTES les lignes a logo, pas une exception. On monte
   la regle PARTAGEE a --s-5 et on retire la derogation posee pour `hlist--rep`
   une heure plus tot : une valeur reglee a deux endroits se remet a diverger
   au prochain reglage. 24 px de marge + 16 px de gap = 40. */
.hrow > .lg{margin-right:var(--s-5)}
.hrow-x{margin-left:calc(var(--s-5) * -1)}
/* FIN-LOGO-ESPACE */

/* ── MASQUÉ À L'ŒIL, PRÉSENT POUR LE RESTE ──────────────────────────
   06/10/2026, Alex, sur l'en-tête d'une levée : « logo missing. Dont need the
   name of the company ». Une fois le logo là, le titre répète la même chose
   trente pixels plus bas, en plus grand et en moins reconnaissable.
   ⚠ MAIS LE `h1` NE DISPARAÎT PAS. Il est le titre de la page pour un lecteur
   d'écran, pour la navigation au clavier et pour le plan du document. Le
   retirer rendrait la page muette à qui ne voit pas le logo — ce n'est pas la
   même chose que de ne pas l'afficher. Il se masque donc VISUELLEMENT, par la
   recette standard : hors cadre, taille nulle, mais lisible par la machine.
   ⚠ `clip-path` ET `clip` : le second est obsolète et le premier ne suffit pas
   sur tous les moteurs. Les deux, c'est la recette qui tient partout. */
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* FIN-VH */

/* ── LA CARTE D UNE LEVÉE : DEMI-LARGEUR, EN-TÊTE, DESCRIPTION PLUS SOBRE ──
   06/10/2026, Alex : « i think font size of description is a little bit too
   big. Layout of the card can be a little bit improved with the logo and the
   card should be half width so you can have the fund galaxy I as first card ».

   1 · DEMI-LARGEUR. `.deals` était `auto-fit` : une seule levée occupait TOUTE
       la largeur, et le jour où une seconde s'ouvre la première se serait
       rétrécie de moitié sans prévenir. Deux colonnes fermes : une carte seule
       prend la moitié, et la place de la seconde se voit — c'est aussi ce qui
       permet au fonds de prendre le premier emplacement.
   2 · L'EN-TÊTE. Le logo partageait sa rangée avec le libellé de tour, puis la
       description commençait aussitôt : rien ne séparait l'IDENTITÉ de ce
       qu'on en dit. Un filet dessous, et la rangée devient un en-tête — la
       même grammaire que `.card-hd` partout ailleurs.
   3 · LA DESCRIPTION. `--t-b` (15 px) est la taille du corps de texte : une
       accroche de carte se lit sous le titre, pas à la place du titre. `--t-s`
       (13 px) la remet à sa place sans la rendre illisible.
   ⚠ SOUS 860 px, UNE SEULE COLONNE : à 430 px par carte le logo et le libellé
     de tour se chevauchent, et les deux boutons passent à la ligne. */
.deals{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){ .deals{grid-template-columns:minmax(0,1fr)} }
.deal-top--hd{padding-bottom:var(--s-4);border-bottom:1px solid var(--rule-soft)}
.deal-b .th{font-size:var(--t-s);line-height:1.6}
/* FIN-DEAL-CARTE */

/* ── LE DERNIER TRIMESTRE TENAIT HORS DU CADRE ───────────────────────
   06/10, Alex : « the last quarter is cropped ». `.qx` est centre, et la
   derniere etiquette est centree sur X1 = 1424 dans un viewBox large de
   1440 : « Q3 26 » demandait 27 px de part et d autre. On ancre la
   premiere a gauche et la derniere a droite — le trace ne bouge pas, et
   aucune des deux ne depasse. */
.qx--deb{text-anchor:start}
.qx--fin{text-anchor:end}
/* FIN-AXE-BORDS */

/* ── LE NIVEAU DE RISQUE, EN PASTILLE ────────────────────────────────────────
   06/10, Alex : « missing risk level / risk levels should have colors / little
   bit smaller tag ». Le libelle sortait en texte brut, au meme corps que la
   ligne : il se lisait comme une suite de la phrase, pas comme un etat.
   ⚠ TROIS PALIERS, PAS DEUX. `up`/`down` laissait « below expectations » et
     « under vigilance » sans couleur — or c est exactement l etat qu on veut
     voir de loin. On surveille au centre, on ne l efface pas.
   ⚠ Les jetons `--gain/--warn/--loss` et leurs `-wash` existent deja et sont
     definis pour les deux themes : on ne pose aucune couleur litterale ici. */
.hrow-f i.st{display:inline-block;font-family:var(--fm);font-size:10px;font-weight:500;
  letter-spacing:.04em;line-height:1.5;padding:2px 8px;border-radius:999px;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hrow-f i.st--pos{color:var(--gain);background:var(--gain-wash)}
.hrow-f i.st--warn{color:var(--warn-ink);background:var(--warn-wash)}
.hrow-f i.st--bad{color:var(--loss-ink);background:var(--loss-wash)}
/* ⚠ 06/10, second passage : « not readable / 2 lines / same format / color ».
   La premiere version (mono, capitales, une ligne, ellipsis) tronquait
   « Development below expectations ». On reprend la puce `.cx` du reste du
   portail et on AUTORISE DEUX LIGNES : `.cx` est `white-space:nowrap` au-dela
   de 663, ce qui convient a « AI » ou « France » mais pas a une phrase. */
/* ⚠ RETOUR A UNE SEULE LIGNE. Les libelles tiennent desormais (« Below
   expectations », deux mots) : une pastille qui s empile deforme la rangee,
   et c etait le remede a un probleme qu il fallait traiter a la source. */
.cx--st{white-space:nowrap}
.cx--st.st--pos{--c:var(--gain);color:var(--gain);border-color:color-mix(in srgb,var(--gain) 34%,transparent)}
.cx--st.st--warn{--c:var(--warn);color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.cx--st.st--bad{--c:var(--loss);color:var(--loss-ink);border-color:color-mix(in srgb,var(--loss) 34%,transparent)}
/* FIN-SANTE-PASTILLE */

/* ── LES DEUX SORTIES DU RAPPORT, EN EN-TETE ────────────────────────────────
   06/10, Alex : « link to company page and all reportings should be in header,
   not in bottom ». Posees dans `.soch-m`, elles suivent le trimestre et la
   sante : meme ligne, meme rythme, et elles s enroulent avec le reste sous une
   largeur de telephone. Pas de bordure — ce sont des liens, pas des puces. */
.soch-m .soch-l{font-size:var(--t-s);white-space:nowrap;align-self:center}
/* FIN-LIENS-ENTETE */




/* ── L EN-TETE DES SECTIONS RENTRE DANS LA CARTE ──────────────────────────
   06/10/2026, Alex : « en fait holding et performance on va faire le format
   de bordures identiques aux autres sections comme celle en exemple ».
   Holdings et Performance posaient leur titre DEHORS (`.blk-hd`) : un filet
   nu, pas de cadre. Les douze autres cartes le posent DEDANS (`.card-hd`).
   Le balisage a change ; il ne restait qu une chose a regler ici — `.fseg`
   porte `margin:0 0 var(--s-5)` pour les filtres poses en pleine page, et
   cette marge, dans un en-tete de carte, decalait le filtre de 24 px vers le
   bas : le titre et son filtre ne tenaient plus la meme ligne. */
.card-hd > .fseg{margin-bottom:0}

/* ── LES LOGOS DU PORTEFEUILLE : QUATRE PAR LIGNE ─────────────────────────
   06/10/2026, Alex : « pour les logos du portfolio EQNX, 4 logos par ligne,
   le tout un petit peu plus espace et plus harmonieux », puis la precision
   qui commande tout : « dont make the logos larger just more spaced ».

   ⚠ C EST LA CONSIGNE DIFFICILE. Passer de six colonnes a quatre ELARGIT la
   case (1022 px utiles : 160 px a six, 237 px a quatre) — et comme
   `.lg--pco` fait `width:100%` avec `object-fit:contain`, le logotype aurait
   grandi avec elle. On borne donc la plaque a sa largeur ACTUELLE (160 px) :
   la case respire, le logo garde sa taille au pixel pres.
   Le `padding` vertical de la case fait le reste — la hauteur de `.lg--pco`
   est fixe, donc l air ajoute autour n agrandit rien.
   ⚠ SOUS `min-width:721px` UNIQUEMENT : la regle mobile de `.pco-g` vit plus
   haut dans ce fichier, et une regle non bornee posee ici, apres elle,
   l aurait ecrasee — quatre colonnes dans 360 px font des cases de 75 px. */
@media (min-width:721px){
  .pco-g{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
  .pco-i{padding:var(--s-3) var(--s-4)}
  .pco-i .lg--pco{max-width:160px;margin-inline:auto}
}

/* ── LA CARTE DE CONTACT ──────────────────────────────────────────────────
   06/10/2026, Alex : « ajouter son numero de telephone +33 et ameliorer un
   peu la mise en page ». Trois choses : le role s affiche (l API le servait,
   l ecran le jetait), le numero rejoint le courriel sur une ligne de liens
   qui se replie, et le bloc gagne de l air entre l avatar et le texte.
   ⚠ `.ctc > .ctc-i` ET NON `.ctc-i` : `.ctc > div{gap:var(--s-2)}` existe
   plus haut et pese (0,1,1). Une classe seule (0,1,0) perd, ou que je la
   pose — ce n est pas une question d ordre mais de specificite. */
.ctc{gap:var(--s-5)}
.ctc > .ctc-i{gap:2px}
.ctc-r{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.ctc-ls{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-5);margin-top:var(--s-3)}
/* FIN-CONTACT-TEL */

/* ── LA FORMULE, SOUS LA DEFINITION ───────────────────────────────────────
   06/10/2026, Alex : « add also the formulas of calculation ». Elle se lit
   comme ce qu elle est — une ligne de calcul — donc en chasse fixe et dans
   un cadre : l oeil la retrouve sans lire la definition en entier. */
.defs-f{margin:var(--s-2) 0 0;padding:7px 10px;font-family:var(--fm);
  font-size:var(--t-xs);line-height:1.5;color:var(--ink);
  background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-m)}
/* FIN-DEFS-FORMULE */

/* ── LE NOM DU FONDS, A COTE DU LOGO DE LA MAISON ─────────────────────────
   06/10/2026, Alex : « besides EQNX logo add "Galaxy 1 fund" ». Le logo
   servi pour un fonds est celui d EQNX : il nomme la maison, pas le vehicule.
   Le nom se pose donc A COTE, en second — d ou la ligne de base commune et
   la teinte attenuee : c est une precision sur le logo, pas un second titre.
   `.deal-top` est deja un flex ; il n y a rien d autre a poser. */
.deal-name--fd{align-self:center;font-family:var(--fd);font-size:var(--t-m);
  letter-spacing:.01em;color:var(--dim);white-space:nowrap}
@media (max-width:480px){ .deal-name--fd{white-space:normal} }
/* FIN-NOM-FONDS */







/* ── LES PRINCIPES DE STRATEGIE D UN FONDS ────────────────────────────────
   06/10/2026. Quatre blocs titre + corps, deux par rangee au-dessus de 720 px
   et empiles en dessous. `minmax(0,1fr)` et non `1fr` : une piste `auto` ne
   descend pas sous son contenu et pousserait sa voisine hors de la carte —
   c est le defaut mesure le 06/10 sur une autre grille. */
.strat{display:grid;gap:var(--s-6);grid-template-columns:repeat(2,minmax(0,1fr))}
/* ⚠ DEUX COLONNES FIXES, PAS `auto-fit`. Mesure du 06/10 a 1440 px :
   `auto-fit` avec un pas de 280 px rendait TROIS colonnes, donc trois
   principes sur une rangee et le quatrieme seul sur la suivante. Une rangee
   depareillee se lit comme un oubli. Quatre points se posent deux par deux ;
   si un fonds en declare trois ou cinq, la derniere rangee reste a gauche,
   alignee, ce qui se lit comme une liste et non comme un trou. */
@media (max-width:720px){ .strat{grid-template-columns:minmax(0,1fr);gap:var(--s-5)} }
.strat-i{min-width:0}
.strat-i h5{margin:0 0 var(--s-2);font-family:var(--fd);font-weight:400;
  font-size:var(--t-b);letter-spacing:.01em;color:var(--ink)}
.strat-i p{margin:0;font-size:var(--t-s);line-height:1.55;color:var(--dim)}
/* FIN-STRAT-FONDS */

/* ── LE FILTRE SEGMENTE NE DEBORDE PLUS A 360 px ──────────────────────────
   07/10/2026, mesure de `tests/sonde-responsive-lp.py` : sur Portfolio et sur
   EQNX, `div.fseg`, `div.acct` et un `button` sortaient du cadre — 384 px de
   bord droit pour un ecran de 360. C est le defaut qui force un defilement
   horizontal de toute la page.

   LA CAUSE. `.acct button` porte `white-space:nowrap`, et la regle telephone
   existante leur donne `flex:1`. Or `flex:1` vaut `flex-basis:0` avec un
   `min-width:auto` implicite : un element flex ne descend JAMAIS sous la
   largeur de son contenu. « BY VALUE · BY MULTIPLE · A–Z » en chasse fixe,
   majuscules et interlettrage, demandent environ 335 px ; il y en avait 262.
   Les boutons ne pouvaient donc ni retrecir ni se couper — ils sortaient.

   ⚠ ON NE LES LAISSE PAS RETRECIR (`min-width:0` les aurait tronques :
   « BY MULTIP… » ne se lit pas), ON LES FAIT SE REPLIER. Deux rangees dans la
   pastille, chacune pleine. C est aussi ce que `.acct--multi` fait deja pour
   le selecteur de comptes depuis le 05/10 — meme remede, meme cause.
   ⚠ ET `.card-hd` GAGNE UN `row-gap` : le titre et le filtre passent sur deux
   lignes a cette largeur, et sans interligne ils se touchaient. */
@media (max-width:720px){
  .card-hd{row-gap:var(--s-3)}
  .card-hd > .fseg{width:100%;min-width:0}
  .fseg > .acct{flex-wrap:wrap}
  .fseg > .acct button{flex:1 1 auto}
}
/* FIN-FSEG-TEL */

/* ── CE QUE LE VEHICULE A ACQUIS ──────────────────────────────────────────
   Une classe de titres par ligne, sous le nom du vehicule. `.det--txt` est
   une grille clef/valeur ; la valeur peut donc porter plusieurs lignes, et
   c est a elles de se separer. */
.acq-l{display:block}
.acq-l + .acq-l{margin-top:2px}
/* FIN-ACQ */