/* Lemsy Portfolios — composants. Préfixe lp-. Lit uniquement les variables de tokens.css. */

/* Base */
.lp-page { background: var(--surface-page); color: var(--ink); font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.lp-container { max-width: var(--size-container); margin: 0 auto; padding: var(--space-10) var(--space-6) 64px; display: flex; flex-direction: column; gap: var(--space-7); box-sizing: border-box; }
@media (max-width: 640px) { .lp-container { padding: 20px var(--space-4) 40px; gap: var(--space-4); } }
.lp-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.lp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-h1 { margin: 0; font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
@media (max-width: 640px) { .lp-h1 { font-size: 26px; line-height: 30px; } }
.lp-eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--gold-ink); }
:where(.lp-page) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Button */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-touch); padding: 0 18px; border-radius: var(--radius-md); border: 1px solid transparent; font: inherit; font-family: var(--font-sans); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.lp-btn--primary { background: var(--navy); color: var(--on-navy); }
.lp-btn--primary:hover { background: var(--navy-hover); }
.lp-btn--secondary { background: var(--surface-card); color: var(--navy); border-color: var(--border-control); }
.lp-btn--secondary:hover { background: var(--surface-sunken); }
.lp-btn--ghost { background: transparent; color: var(--ink-secondary); }
.lp-btn--ghost:hover { background: var(--surface-sunken); color: var(--navy); }
.lp-btn--icon { width: var(--size-touch); padding: 0; background: var(--surface-card); color: var(--navy); border-color: var(--border); }
.lp-btn:disabled { opacity: .5; cursor: not-allowed; }
.lp-btn svg { width: 20px; height: 20px; flex: none; }

/* Card */
.lp-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); min-width: 0; box-sizing: border-box; }
.lp-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.lp-card__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; color: var(--navy); }
.lp-inset { background: var(--surface-highlight); border-radius: 14px; padding: 14px var(--space-4); }
.lp-inset__title { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 700; color: var(--gold-ink); }

.lp-card--link { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--space-2); color: inherit; text-decoration: none; }
a.lp-card--link:hover { border-color: var(--border-control); color: inherit; }

/* KpiCard */
.lp-kpi { flex: 1 1 220px; display: flex; flex-direction: column; gap: var(--space-2); }
.lp-kpi__label { font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.lp-kpi__value { font-size: 28px; line-height: 32px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.lp-kpi__hint { font-size: 13px; color: var(--ink-muted); }
.lp-kpi--hero { flex: 2 1 320px; background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.lp-kpi--hero .lp-kpi__label, .lp-kpi--hero .lp-kpi__hint { color: var(--on-navy-muted); }
.lp-kpi--hero .lp-kpi__value { font-size: 44px; line-height: 44px; letter-spacing: -0.02em; color: var(--on-navy); }
@media (max-width: 640px) { .lp-kpi--hero .lp-kpi__value { font-size: 36px; line-height: 36px; } }
.lp-kpi--hero :focus-visible { outline-color: var(--on-navy); }

/* Deux indicateurs secondaires groupés : deux cartes sur grand écran, une seule carte à deux colonnes sous 640px */
.lp-kpi-pair { display: contents; }
@media (max-width: 640px) {
  .lp-kpi-pair { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-sizing: border-box; }
  .lp-kpi-pair > .lp-card { padding: 0; border: 0; background: none; min-width: 0; }
  .lp-kpi-pair .lp-kpi__value { font-size: 22px; line-height: 28px; }
}

/* Amount : signe + couleur, jamais la couleur seule */
.lp-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-amount--gain { color: var(--gain); }
.lp-amount--loss { color: var(--loss); }
.lp-amount--flat { color: var(--ink-muted); }
.lp-delta { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; padding: 6px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); font-size: 14px; font-weight: 700; white-space: nowrap; }
.lp-delta--gain { color: var(--gain-on-navy); }
.lp-delta--loss { color: var(--loss-on-navy); }

/* Badge */
.lp-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.lp-badge--gain { background: var(--badge-gain-bg); color: var(--badge-gain-ink); }
.lp-badge--info { background: var(--badge-info-bg); color: var(--badge-info-ink); }
.lp-badge--warn { background: var(--surface-gold-soft); color: var(--gold-ink-strong); }
.lp-badge--neutral { background: var(--surface-sunken); color: var(--ink-secondary); }

/* SegmentedControl (sélecteur de période) */
.lp-segmented { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--surface-sunken); border-radius: var(--radius-md); }
.lp-segmented__opt { min-width: var(--size-touch); height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-secondary); font: inherit; font-family: var(--font-sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.lp-segmented__opt:hover { color: var(--navy); }
.lp-segmented a.lp-segmented__opt { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.lp-segmented__opt[aria-pressed="true"],
.lp-segmented__opt[aria-current="true"] { background: var(--surface-card); color: var(--navy); font-weight: 800; box-shadow: var(--shadow-raised); }

/* Toggle (Inclure dans le total) */
.lp-toggle { width: 46px; height: 28px; padding: 3px; border: 0; border-radius: var(--radius-pill); background: var(--border-control); display: inline-flex; justify-content: flex-start; cursor: pointer; box-sizing: border-box; position: relative; }
.lp-toggle::after { content: ""; position: absolute; inset: -8px; }
.lp-toggle__knob { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-card); box-shadow: var(--shadow-raised); }
.lp-toggle[aria-pressed="true"] { background: var(--navy); justify-content: flex-end; }

/* NavBar */
.lp-nav { position: relative; z-index: 20; background: var(--surface-card); border-bottom: 1px solid var(--border); }
.lp-nav__inner { max-width: var(--size-container); margin: 0 auto; padding: 14px var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) 32px; box-sizing: border-box; }
/* Logo : fichier SVG vectorisé (arpent-logo-horizontal-clair.svg), jamais recomposé en texte */
.lp-logo { display: inline-flex; align-items: center; text-decoration: none; }
.lp-logo img { display: block; height: 44px; width: auto; }
@media (max-width: 640px) { .lp-logo img { height: 38px; } }
.lp-nav__links { display: flex; flex-wrap: wrap; gap: var(--space-1); flex: 1 1 auto; }
.lp-nav__link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--size-touch); padding: 0 14px; border-radius: var(--radius-sm); color: var(--ink-secondary); font-size: 15px; font-weight: 600; text-decoration: none; box-sizing: border-box; }
.lp-nav__link:hover { color: var(--navy); background: var(--surface-sunken); }
.lp-nav__menu { position: relative; }
button.lp-nav__link { border: 0; background: none; font-family: inherit; cursor: pointer; }
.lp-menu--left { left: 0; right: auto; }
.lp-nav__tools { position: relative; display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) { .lp-nav__links { display: none; } .lp-nav__inner { justify-content: space-between; padding: 10px var(--space-4); } .lp-nav__label { display: none; } }
.lp-tabbar { display: none; }
@media (max-width: 640px) {
  .lp-tabbar { display: flex; position: sticky; bottom: 0; z-index: 20; background: var(--surface-card); border-top: 1px solid var(--border); padding: 6px 8px 14px; }
  .lp-tabbar__link { flex: 1 1 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-muted); font-size: 12px; font-weight: 600; text-decoration: none; }
  .lp-tabbar__link svg { width: 22px; height: 22px; }
  .lp-tabbar__link[aria-current="page"] { color: var(--navy); font-weight: 800; box-shadow: inset 0 3px 0 var(--gold); }
}
.lp-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 30; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--navy); color: var(--on-navy); font-weight: 700; text-decoration: none; }
.lp-skip:focus { top: var(--space-2); }

/* Menu (panneau opaque sous un bouton ; menu du compte) */
.lp-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 260px; display: flex; flex-direction: column; padding: var(--space-2); background: var(--surface-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-overlay); }
.lp-menu[hidden] { display: none; }
.lp-menu__item { display: flex; align-items: center; gap: 10px; min-height: var(--size-touch); padding: 0 10px; border-radius: var(--radius-sm); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; box-sizing: border-box; }
a.lp-menu__item:hover, button.lp-menu__item:hover { background: var(--surface-sunken); }
.lp-menu__form { margin: 0; }
button.lp-menu__item { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.lp-menu__item[aria-disabled="true"] { color: var(--ink-muted); cursor: default; }
.lp-menu__item svg { width: 18px; height: 18px; flex: none; }
.lp-menu__aside { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.lp-menu__sep { margin: 6px 4px; border: 0; border-top: 1px solid var(--border-subtle); }
/* Avatar : logo du titre dans un carré arrondi (ou deux initiales). Tailles --36 (listes, tableaux) et --48 (fiche titre) ;
   --cash : ligne de liquidités (billet) ; --account : le bouton du compte. */
.lp-avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-card); border: 0; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; box-sizing: border-box; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.lp-avatar--36 { width: 36px; height: 36px; border-radius: 10px; }
.lp-avatar--48 { width: 48px; height: 48px; border-radius: 12px; font-size: 16px; }
.lp-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--surface-card); }
.lp-avatar--initials { background: var(--surface-sunken); }
.lp-avatar--cash { background: var(--surface-sunken); color: var(--ink-secondary); }
.lp-avatar--cash svg { width: 20px; height: 20px; }
.lp-avatar--48.lp-avatar--cash svg { width: 24px; height: 24px; }
.lp-avatar--account { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--on-navy); }
.lp-avatar svg { width: 16px; height: 16px; }
/* PortfolioIcon : carré arrondi de la couleur du portefeuille (classe lp-pc-N), icône en couleur « on ». */
.lp-picon { flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--pc); color: var(--pc-on); box-sizing: border-box; }
.lp-picon svg { width: 55%; height: 55%; }
.lp-picon--28 { width: 28px; height: 28px; border-radius: 8px; }
.lp-picon--32 { width: 32px; height: 32px; border-radius: 9px; }
.lp-picon--40 { width: 40px; height: 40px; border-radius: 11px; }
.lp-picon--44 { width: 44px; height: 44px; border-radius: 12px; }
.lp-picon--56 { width: 56px; height: 56px; border-radius: 16px; }
.lp-namecell { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lp-namecell--head { display: flex; gap: var(--space-3); }
.lp-btn__chevron { width: 14px; height: 14px; transition: transform .15s; }
[aria-expanded="true"] > .lp-btn__chevron { transform: rotate(180deg); }
.lp-btn--account { padding: 0 12px 0 8px; }
@media (max-width: 640px) { .lp-btn--account { padding: 0 8px; } .lp-btn--account .lp-btn__chevron { display: none; } }

/* PrivacyMode (mode discret) : bouton .lp-privacy + masquage des montants quand html[data-discret="true"] */
.lp-privacy .lp-privacy__off { display: none; }
.lp-privacy[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.lp-privacy[aria-pressed="true"] .lp-privacy__on { display: none; }
.lp-privacy[aria-pressed="true"] .lp-privacy__off { display: block; }
html[data-discret="true"] :is(.lp-kpi__value, .lp-secret) { display: inline-block; align-self: flex-start; min-width: 6ch; border-radius: var(--radius-sm); background: var(--border); user-select: none; }
html[data-discret="true"] :is(.lp-kpi__value, .lp-secret),
html[data-discret="true"] :is(.lp-kpi__value, .lp-secret) * { color: transparent; text-shadow: none; }
html[data-discret="true"] .lp-kpi--hero .lp-kpi__value { background: var(--on-navy-muted); opacity: .4; }

/* DataTable (grille de lignes, défile dans sa boîte, jamais la page) */
.lp-table { overflow-x: auto; }
.lp-table__grid { min-width: 760px; }
.lp-table__row { display: grid; grid-template-columns: var(--lp-cols, minmax(220px, 2.4fr) 1.1fr .9fr 1fr 96px); gap: var(--space-4); align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); font-size: 15px; }
.lp-table__row--head { padding: 10px 0; border-bottom-color: var(--border); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lp-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-table__name { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.lp-table__swatch { width: 10px; height: 36px; border-radius: 4px; flex: none; }
.lp-table__title { font-weight: 700; color: var(--navy); text-decoration: none; }
.lp-table__sub { display: block; font-size: 13px; color: var(--ink-muted); }

.lp-table__grid--lines { --lp-cols: minmax(0, 2.4fr) .7fr 1fr 1.1fr 1fr 1.2fr; min-width: 680px; gap: var(--space-3); }
.lp-table__grid--top { --lp-cols: minmax(190px, 2.2fr) 1.3fr 1fr 1.3fr; min-width: 640px; }
.lp-table__grid--moves { --lp-cols: .9fr .9fr minmax(160px, 2fr) .8fr 1fr .8fr 1.1fr; min-width: 880px; }
.lp-table__grid--tickers { --lp-cols: minmax(190px, 2.2fr) 1fr .9fr minmax(160px, 2fr); min-width: 700px; }
.lp-st-meta { display: contents; }
/* Ordre des colonnes quand l'ordre du balisage (empilé) diffère de celui du tableau large */
.lp-col-1 { order: 1; } .lp-col-2 { order: 2; } .lp-col-3 { order: 3; } .lp-col-4 { order: 4; } .lp-col-5 { order: 5; } .lp-col-6 { order: 6; } .lp-col-7 { order: 7; }
.lp-table__namewrap { display: block; min-width: 0; }
.lp-table__row--total { font-weight: 800; color: var(--navy); }
.lp-table__cell-wrap { display: flex; flex-wrap: wrap; gap: 6px; }

/* DataTable empilée (variante .lp-table--stack) : sous 640px, chaque rangée devient un bloc de trois lignes.
   Ligne 1 : titre (lp-st-title) et valeur (lp-st-value) ; ligne 2 : sous-titre (lp-st-sub) et plus-value (lp-st-gain) ;
   ligne 3 : autres colonnes en texte secondaire (lp-st-meta, chaque cellule porte data-label). */
@media (max-width: 640px) {
  .lp-table--stack { overflow-x: visible; }
  .lp-table--stack .lp-table__grid { min-width: 0; }
  .lp-table--stack .lp-table__row--head { display: none; }
  .lp-table--stack .lp-table__row { position: relative; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title value" "sub gain" "meta meta"; gap: 2px var(--space-3); align-items: start; padding: 12px 0; min-height: var(--size-touch); }
  .lp-table--stack .lp-table__name, .lp-table--stack .lp-table__namewrap { display: contents; }
  .lp-table--stack .lp-table__swatch { display: none; }
  .lp-table--stack .lp-table__row--logo { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "avatar title value" "avatar sub gain" "meta meta meta"; }
  .lp-table--stack .lp-table__row--logo > .lp-table__name > .lp-avatar { grid-area: avatar; align-self: center; }
  .lp-table--stack .lp-st-title { grid-area: title; min-width: 0; font-weight: 700; color: var(--navy); }
  .lp-table--stack .lp-st-sub { grid-area: sub; min-width: 0; }
  .lp-table--stack .lp-st-value { grid-area: value; font-weight: 700; }
  .lp-table--stack .lp-st-gain { grid-area: gain; }
  .lp-table--stack .lp-st-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 2px var(--space-3); margin-top: 4px; font-size: 13px; color: var(--ink-muted); }
  .lp-table--stack .lp-st-meta > [data-label]::before { content: attr(data-label) " : "; font-weight: 600; }
  .lp-table--stack .lp-st-meta .lp-table__num { text-align: left; }
  .lp-table--stack .lp-st-meta .lp-table__sub { display: inline; margin-left: var(--space-1); }
  .lp-table--stack .lp-st-meta .lp-table__sub::before { content: "("; }
  .lp-table--stack .lp-st-meta .lp-table__sub::after { content: ")"; }
  .lp-table--stack a.lp-table__title::after { content: ""; position: absolute; inset: 0; }
  .lp-table--stack .lp-st-meta a { position: relative; z-index: 1; }
  .lp-table--stack .lp-st-skip { display: none; }
}

/* AllocationBar */
.lp-alloc__bar { display: flex; gap: 3px; height: 14px; border-radius: var(--radius-pill); overflow: hidden; }
.lp-alloc__seg { display: block; height: 100%; }
.lp-alloc__item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 15px; }
.lp-alloc__dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.lp-alloc__name { flex: 1 1 auto; font-weight: 600; }
.lp-alloc__pct { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Couleurs de série (utilitaires) */
.lp-s1 { background: var(--series-1); } .lp-s2 { background: var(--series-2); } .lp-s3 { background: var(--series-3); } .lp-s4 { background: var(--series-4); }
.lp-s5 { background: var(--series-5); } .lp-s6 { background: var(--series-6); } .lp-s7 { background: var(--series-7); } .lp-s8 { background: var(--series-8); }
.lp-s9 { background: var(--series-9); } .lp-s10 { background: var(--series-10); } .lp-s11 { background: var(--series-11); } .lp-s12 { background: var(--series-12); }
.lp-s-off { background: var(--series-off); }
/* Couleur de portefeuille : une classe par couleur pose les variables lues par PortfolioIcon, les pastilles et l'en-tête de page. */
.lp-pc-1 { --pc: var(--series-1); --pc-soft: var(--series-1-soft); --pc-line: var(--series-1-line); --pc-on: var(--series-1-on); --pc-stroke: var(--series-1-stroke); }
.lp-pc-2 { --pc: var(--series-2); --pc-soft: var(--series-2-soft); --pc-line: var(--series-2-line); --pc-on: var(--series-2-on); --pc-stroke: var(--series-2-stroke); }
.lp-pc-3 { --pc: var(--series-3); --pc-soft: var(--series-3-soft); --pc-line: var(--series-3-line); --pc-on: var(--series-3-on); --pc-stroke: var(--series-3-stroke); }
.lp-pc-4 { --pc: var(--series-4); --pc-soft: var(--series-4-soft); --pc-line: var(--series-4-line); --pc-on: var(--series-4-on); --pc-stroke: var(--series-4-stroke); }
.lp-pc-5 { --pc: var(--series-5); --pc-soft: var(--series-5-soft); --pc-line: var(--series-5-line); --pc-on: var(--series-5-on); --pc-stroke: var(--series-5-stroke); }
.lp-pc-6 { --pc: var(--series-6); --pc-soft: var(--series-6-soft); --pc-line: var(--series-6-line); --pc-on: var(--series-6-on); --pc-stroke: var(--series-6-stroke); }
.lp-pc-7 { --pc: var(--series-7); --pc-soft: var(--series-7-soft); --pc-line: var(--series-7-line); --pc-on: var(--series-7-on); --pc-stroke: var(--series-7-stroke); }
.lp-pc-8 { --pc: var(--series-8); --pc-soft: var(--series-8-soft); --pc-line: var(--series-8-line); --pc-on: var(--series-8-on); --pc-stroke: var(--series-8-stroke); }
.lp-pc-9 { --pc: var(--series-9); --pc-soft: var(--series-9-soft); --pc-line: var(--series-9-line); --pc-on: var(--series-9-on); --pc-stroke: var(--series-9-stroke); }
.lp-pc-10 { --pc: var(--series-10); --pc-soft: var(--series-10-soft); --pc-line: var(--series-10-line); --pc-on: var(--series-10-on); --pc-stroke: var(--series-10-stroke); }
.lp-pc-11 { --pc: var(--series-11); --pc-soft: var(--series-11-soft); --pc-line: var(--series-11-line); --pc-on: var(--series-11-on); --pc-stroke: var(--series-11-stroke); }
.lp-pc-12 { --pc: var(--series-12); --pc-soft: var(--series-12-soft); --pc-line: var(--series-12-line); --pc-on: var(--series-12-on); --pc-stroke: var(--series-12-stroke); }
.lp-pc-off { --pc: var(--series-off); --pc-soft: var(--surface-page); --pc-line: var(--border); --pc-on: var(--ink-secondary); --pc-stroke: var(--ink-muted); }

/* Field : étiquette, champ, aide, message d'erreur */
.lp-form { display: grid; gap: var(--space-4); }
.lp-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.lp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-field[hidden] { display: none; }
.lp-field__label { font-size: 14px; font-weight: 700; color: var(--ink); }
.lp-field__hint { margin: 0; font-size: 13px; color: var(--ink-muted); }
.lp-field__error { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 600; color: var(--loss); }
.lp-field__error svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.lp-input { width: 100%; min-height: var(--size-touch); padding: 0 14px; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-card); color: var(--ink); font: inherit; font-family: var(--font-sans); font-size: 15px; font-weight: 500; box-sizing: border-box; }
.lp-input::placeholder { color: var(--ink-muted); }
.lp-input:hover { border-color: var(--ink-secondary); }
.lp-input:disabled { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--border); cursor: not-allowed; }
.lp-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.lp-input[aria-invalid="true"] { border-color: var(--loss); border-width: 2px; padding: 0 13px; }
.lp-select { position: relative; }
.lp-select .lp-input { appearance: none; padding-right: 40px; cursor: pointer; }
.lp-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-secondary); border-bottom: 2px solid var(--ink-secondary); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* Checkbox */
.lp-check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--size-touch); padding: 10px 0; box-sizing: border-box; font-size: 15px; font-weight: 600; cursor: pointer; }
.lp-check__box { appearance: none; flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 0; border: 2px solid var(--border-control); border-radius: 6px; background: var(--surface-card); cursor: pointer; }
.lp-check__box::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid var(--on-navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); opacity: 0; }
.lp-check__box:checked { background: var(--navy); border-color: var(--navy); }
.lp-check__box:checked::after { opacity: 1; }
.lp-check__box[aria-invalid="true"] { border-color: var(--loss); }
.lp-check__box:disabled { background: var(--surface-sunken); border-color: var(--border); cursor: not-allowed; }

/* Banner : bandeau d'information sur toute la largeur, en haut de page (mode démo) */
.lp-banner { padding: 10px var(--space-6); background: var(--surface-gold-soft); border-bottom: 1px solid var(--gold-line); color: var(--gold-ink-strong); font-size: 14px; font-weight: 700; text-align: center; }
@media (max-width: 640px) { .lp-banner { padding: 6px var(--space-3); font-size: 12px; } }

/* Notice : message ponctuel dans la page (confirmation, avertissement) */
.lp-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: 12px var(--space-4); border-radius: var(--radius-md); background: var(--badge-info-bg); color: var(--badge-info-ink); font-size: 14px; font-weight: 600; }
.lp-notice--gain { background: var(--badge-gain-bg); color: var(--badge-gain-ink); }
.lp-notice--warn { background: var(--surface-gold-soft); color: var(--gold-ink-strong); }
.lp-notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* Empty : encart « il n'y a rien ici pour l'instant » ou « bientôt » */
.lp-empty { padding: var(--space-6); border: 2px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface-highlight); text-align: center; }
.lp-empty__title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--navy); }
.lp-empty__text { margin: 0; font-size: 14px; color: var(--ink-muted); }

/* Chart : courbe SVG générée côté serveur (chart_line) ; repères d'axe en HTML autour du SVG */
.lp-chart { --lp-chart-h: 220px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); margin: 0; }
@media (max-width: 640px) { .lp-chart { --lp-chart-h: 170px; column-gap: var(--space-2); } }
.lp-chart__yaxis { display: flex; flex-direction: column; justify-content: space-between; height: var(--lp-chart-h); font-size: 12px; line-height: 1; color: var(--ink-muted); text-align: right; }
.lp-chart__plot { display: block; width: 100%; height: var(--lp-chart-h); overflow: visible; }
.lp-chart__grid line { stroke: var(--border-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-chart__area { fill: var(--series-2); fill-opacity: .16; stroke: none; }
.lp-chart__line { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lp-chart__xaxis { grid-column: 2; display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-muted); }
@media (max-width: 640px) { .lp-chart__xaxis span:nth-child(2), .lp-chart__xaxis span:nth-child(3) { display: none; } }
.lp-chartpane[hidden], .lp-chart [hidden] { display: none; }
.lp-chart__stage { position: relative; height: var(--lp-chart-h); touch-action: pan-y; border-radius: var(--radius-sm); cursor: crosshair; }
.lp-chart__stage:focus-visible { outline: 2px solid var(--focus-ring, var(--series-2)); outline-offset: 2px; }
.lp-chart__stage .lp-chart__plot { height: 100%; }
.lp-chart__cursor { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--ink-muted); pointer-events: none; }
.lp-chart__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--navy); border: 2px solid var(--surface-card); box-sizing: border-box; pointer-events: none; }
.lp-chart__tip { position: absolute; top: 0; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--surface-card); border: 1px solid var(--border); box-shadow: var(--shadow-raised); color: var(--navy); font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.lp-chart__tip--low { top: auto; bottom: 0; }
.lp-chart__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* ---- Refonte (brief 6) ---- */
/* En-tête : onglet actif = trait or de 3px en bas ; barre mobile : trait or en haut. */
.lp-nav__link[aria-current="page"], button.lp-nav__link[aria-current="page"] { background: none; box-shadow: inset 0 -3px 0 var(--gold); border-radius: 0; color: var(--navy); font-weight: 800; }
.lp-nav__link[aria-current="page"]:hover { background: var(--surface-sunken); }
.lp-menu__item[aria-current="page"] { background: var(--surface-sunken); }
.lp-menu__item--pf { justify-content: flex-start; }
.lp-menu__item--pf .lp-menu__aside { font-weight: 700; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.lp-eyebrow--sq::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; background: var(--gold); }
.lp-caption { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.lp-only-mobile { display: none; }
@media (max-width: 640px) { .lp-only-mobile { display: inline; } .lp-only-desktop { display: none !important; } }
/* Bouton or : fond gold, texte marine (jamais de texte blanc sur or). */
.lp-btn--gold { background: var(--gold); color: var(--navy); font-weight: 800; }
.lp-btn--gold:hover { background: var(--gold-line); color: var(--navy); }
.lp-btn--gold svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 640px) { .lp-btn--gold.lp-btn--iconless { width: 44px; padding: 0; } .lp-btn--gold.lp-btn--iconless .lp-btn__label { display: none; } }
/* Repère des courbes : or. */
.lp-chart__cursor { background: var(--gold-line); }
.lp-chart__dot { background: var(--gold); border: 2px solid var(--gold-line); }

/* PortfolioPills : petit écran seulement (là où la barre d'onglets remplace l'en-tête) ; la rangée défile dans sa boîte. */
.lp-pills { display: none; }
@media (max-width: 640px) {
  .lp-pills { display: flex; gap: var(--space-2); overflow-x: auto; max-width: 100%; padding: 2px 2px var(--space-1); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .lp-pill { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; max-width: 76px; padding: 2px 2px 4px; color: var(--ink-secondary); text-decoration: none; box-sizing: border-box; }
  .lp-pill__icon { position: relative; display: block; line-height: 0; padding-bottom: 6px; }
  .lp-pill__name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; }
  .lp-pill[aria-current="page"] { color: var(--navy); }
  .lp-pill[aria-current="page"] .lp-pill__name { font-weight: 800; color: var(--navy); }
  .lp-pill[aria-current="page"] .lp-pill__icon::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; border-radius: 2px; background: var(--gold); }
}

/* Page d'accueil (vue d'ensemble) */
.dash { display: flex; flex-direction: column; gap: var(--space-4); }
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.dash-asof { margin: 0; font-size: 13px; color: var(--ink-muted); }
.dash-row { display: grid; gap: var(--space-4); align-items: stretch; }
.dash-row > * { min-width: 0; }
.dash-row--top { grid-template-columns: 1.4fr 1fr; }
.dash-row--bottom { grid-template-columns: 1.75fr 1fr; }
@media (max-width: 900px) { .dash-row--top, .dash-row--bottom { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .dash-row { display: contents; }
  .dash-hero { order: 1; } .dash-pf { order: 2; } .dash-chart { order: 3; } .dash-alloc { order: 4; } .dash-top { order: 5; }
}
/* Carte héro : marine, symbole du logo en décor (débordant, rogné), un seul grand chiffre. */
.lp-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); padding: var(--space-7); border-radius: var(--radius-lg); background: var(--navy); color: var(--on-navy); }
.lp-hero__deco { position: absolute; top: 20px; right: 20px; width: 64px; height: 64px; pointer-events: none; }
.lp-hero__top, .lp-hero__bottom { display: flex; flex-direction: column; gap: var(--space-2); }
.lp-hero__label { margin: 0; font-size: 14px; font-weight: 600; color: var(--on-navy-muted); }
.lp-hero__value { margin: 0; font-size: 52px; line-height: 56px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--on-navy); }
.lp-hero__hint { margin: 0; font-size: 14px; color: var(--on-navy-muted); }
.lp-hero__rule { margin: 0 0 var(--space-2); border: 0; border-top: 1px solid var(--on-navy-muted); opacity: .35; }
.lp-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lp-hero__stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-hero__stat-value { font-size: 24px; line-height: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-hero__stat-value.is-gain { color: var(--gain-on-navy); }
.lp-hero__stat-value.is-loss { color: var(--loss-on-navy); }
.lp-hero__stat-hint { font-size: 13px; color: var(--on-navy-muted); }
html[data-discret="true"] .lp-hero .lp-secret { background: var(--on-navy-muted); opacity: .4; }
@media (max-width: 640px) { .lp-hero { padding: var(--space-6) var(--space-4); } .lp-hero__value { font-size: 36px; line-height: 40px; } .lp-hero__stat-value { font-size: 18px; line-height: 24px; } }

/* Donut : répartition par portefeuille (SVG serveur : un segment par portefeuille, 3 unités de vide entre deux segments). */
.lp-donut { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.lp-donut__figure { position: relative; width: 168px; height: 168px; flex: none; }
.lp-donut__svg { display: block; width: 168px; height: 168px; transform: rotate(-90deg); }
.lp-donut__track { fill: none; stroke: var(--surface-sunken); stroke-width: 22; }
.lp-donut__seg { fill: none; stroke-width: 22; stroke-linecap: butt; }
.lp-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
html[data-discret="true"] .lp-donut__center .lp-secret { align-self: center; }
.lp-donut__center-label { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.lp-donut__center-value { font-size: 18px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.lp-donut__legend { width: 100%; margin: 0; padding: 0; list-style: none; }
.lp-donut__item { display: flex; align-items: center; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: 15px; }
.lp-donut__item:first-child { border-top: 0; }
.lp-donut__name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.lp-donut__pct { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.lp-stroke-1 { stroke: var(--series-1); } .lp-stroke-2 { stroke: var(--series-2); } .lp-stroke-3 { stroke: var(--series-3); } .lp-stroke-4 { stroke: var(--series-4); }
.lp-stroke-5 { stroke: var(--series-5); } .lp-stroke-6 { stroke: var(--series-6); } .lp-stroke-7 { stroke: var(--series-7); } .lp-stroke-8 { stroke: var(--series-8); }
.lp-stroke-9 { stroke: var(--series-9); } .lp-stroke-10 { stroke: var(--series-10); } .lp-stroke-11 { stroke: var(--series-11); } .lp-stroke-12 { stroke: var(--series-12); }

/* PortfolioList : une rangée-lien par portefeuille (la ligne entière mène au portefeuille). */
.lp-plist { display: flex; flex-direction: column; }
.lp-prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto 20px; grid-template-areas: "icon name value gain chev"; align-items: center; column-gap: var(--space-4); min-height: 64px; padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); color: var(--ink); text-decoration: none; }
.lp-prow:first-child { border-top: 0; }
.lp-prow:hover .lp-prow__name { text-decoration: underline; }
.lp-prow .lp-picon { grid-area: icon; }
.lp-prow__main { grid-area: name; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-prow__name { font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.lp-prow__sub { font-size: 13px; color: var(--ink-muted); }
.lp-prow__value { grid-area: value; justify-self: end; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; text-align: right; }
.lp-prow__gain { grid-area: gain; justify-self: end; min-width: 120px; display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; font-variant-numeric: tabular-nums; }
.lp-prow__chev { grid-area: chev; color: var(--ink-muted); }
.lp-prow__chev svg { width: 18px; height: 18px; display: block; }
.lp-plist__off { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.lp-plist__off .lp-prow { padding: var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--surface-page); }
.lp-plist__off .lp-prow:first-child { border-top: 0; }
.lp-plist__off .lp-caption { margin-top: var(--space-4); }
.lp-card__bar { display: none; }
@media (max-width: 640px) {
  .lp-prow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon name value" "icon name gain"; column-gap: var(--space-3); min-height: 60px; }
  .lp-prow .lp-picon { width: 40px; height: 40px; border-radius: 11px; }
  .lp-prow__gain { min-width: 0; font-size: 13px; }
  .lp-prow__gain-abs, .lp-prow__chev { display: none !important; }
  .lp-card__bar { display: flex; width: 100%; margin-top: var(--space-3); }
}

/* TopPositions : liste des plus grosses positions. */
.lp-toplist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lp-toprow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "avatar name value" "avatar sub gain"; align-items: center; column-gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border-subtle); color: inherit; text-decoration: none; min-height: var(--size-touch); }
.lp-toplist > li:first-child .lp-toprow { border-top: 0; }
.lp-toprow .lp-avatar { grid-area: avatar; }
.lp-toprow__name { grid-area: name; min-width: 0; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.lp-toprow:hover .lp-toprow__name { text-decoration: underline; }
.lp-toprow__sub { grid-area: sub; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; color: var(--ink-muted); }
.lp-toprow__sub .lp-alloc__dot { width: 10px; height: 10px; border-radius: 3px; }
.lp-toprow__value { grid-area: value; justify-self: end; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.lp-toprow__gain { grid-area: gain; justify-self: end; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Page d'un portefeuille : bloc d'en-tête de la couleur du portefeuille (la teinte soft ne sert qu'ici). */
.pf-head { padding: var(--space-6); border: 1px solid var(--pc-line); border-radius: var(--radius-lg); background: var(--pc-soft); display: flex; flex-direction: column; gap: var(--space-6); }
.pf-head__top { display: flex; align-items: center; gap: var(--space-4); }
.pf-head__title { flex: 1 1 auto; min-width: 0; }
.pf-head__title .lp-eyebrow { margin-bottom: 4px; }
.pf-head__title .lp-h1 { font-size: 32px; line-height: 36px; }
.pf-head__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.pf-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-stat__label { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.pf-stat__value { font-size: 20px; line-height: 26px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.pf-stat__value--big { font-size: 32px; line-height: 38px; letter-spacing: -0.01em; }
.pf-stat__hint { font-size: 13px; color: var(--ink-secondary); }
.pf-head .lp-amount--gain { color: var(--gain-on-soft); }
.pf-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: var(--space-4); align-items: start; }
.pf-grid > * { min-width: 0; }
.pf-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.pf-aside .lp-chart { --lp-chart-h: 160px; }
.pf-aside .lp-chart__xaxis span:nth-child(2), .pf-aside .lp-chart__xaxis span:nth-child(3) { display: none; }
.pf-mini { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pf-mini__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amount" "meta amount"; column-gap: var(--space-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.pf-mini > li:first-child { }
.pf-mini > li:first-child .pf-mini__row { border-top: 0; }
.pf-mini__name { grid-area: name; font-weight: 700; color: var(--navy); min-width: 0; }
.pf-mini__meta { grid-area: meta; font-size: 13px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pf-mini__amount { grid-area: amount; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .pf-grid { grid-template-columns: 1fr; } .pf-head__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pf-head { padding: var(--space-4); gap: var(--space-3); }
  .pf-head__top { gap: var(--space-3); }
  .pf-head__title .lp-h1 { font-size: 22px; line-height: 26px; }
  .pf-head__title .lp-eyebrow { font-size: 13px; margin-bottom: 2px; }
  .pf-head__stats { grid-template-columns: 1fr; gap: var(--space-1); }
  .pf-stat--secondary { display: none; }
  .pf-stat__value--big { font-size: 30px; line-height: 34px; }
  .pf-stat--gain { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
}
.pf-mini-card .lp-card__head a { font-size: 14px; font-weight: 700; }
/* Table « lignes » compacte : sur petit écran, avatar + nom + « N parts · cours », valeur, plus-value en % seulement. */
@media (max-width: 640px) {
  .lp-table--compact.lp-table--stack .lp-st-meta { display: none; }
  .lp-table--compact .lp-gain__abs, .lp-table--compact .lp-gain__suffix { display: none !important; }
  .lp-table--compact .lp-st-gain { text-align: right; }
}

/* Courbes : sélecteurs, séries multiples, légende, ligne du zéro, ombrage gain / perte (brief 7) */
.lp-chartbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.lp-chartbar .lp-segmented[hidden] { display: none; }
.lp-segmented--compact { padding: 2px; border-radius: 10px; }
.lp-segmented--compact .lp-segmented__opt { position: relative; min-width: 36px; height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.lp-segmented--compact .lp-segmented__opt::after { content: ""; position: absolute; inset: -8px -2px; }
.lp-chart__line--value, .lp-chart__line--plain, .lp-chart__line--total { stroke: var(--navy); }
.lp-chart__line--total { stroke-width: 3.5; }
.lp-chart__line--cost { stroke: var(--gold-line); stroke-width: 2.5; stroke-dasharray: 1 6; }
.lp-chart__line--ref { stroke: var(--gold-line); stroke-width: 2; stroke-dasharray: 7 5; }
.lp-chart__line--portfolio { stroke-width: 2; }
.lp-chart__zero { stroke: var(--ink-secondary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lp-chart__area--gain { fill: var(--gain); fill-opacity: .16; }
.lp-chart__area--loss { fill: var(--loss); fill-opacity: .16; }
.lp-chart__legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-secondary); }
.lp-chart__legend li { display: inline-flex; align-items: center; gap: 8px; }
.lp-legend__sw { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--navy); border-radius: 2px; flex: none; }
.lp-legend__sw--cost { border-top: 3px dotted var(--gold-line); }
.lp-legend__sw--ref { border-top: 2px dashed var(--gold-line); }
.lp-legend__sw--portfolio { height: 10px; width: 10px; border-top: 0; border-radius: 3px; }
.lp-legend__sw--total { border-top-width: 4px; }
.lp-chart__tip { display: flex; flex-direction: column; gap: 2px; }
.lp-chart__tip-date { font-weight: 800; }
.lp-chart__tip-row { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: 600; }
.lp-chart__tip-row strong { font-weight: 800; }

/* MovementType : type d'un mouvement en pictogramme (le libellé est dans title et dans un texte masqué). */
.lp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lp-mvt { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex: none; position: relative; }
.lp-mvt svg { width: 16px; height: 16px; }
.lp-mvt--buy { background: var(--badge-info-bg); color: var(--badge-info-ink); }
.lp-mvt--sell { background: var(--surface-gold-soft); color: var(--gold-ink-strong); }
.lp-mvt--maj { background: var(--surface-sunken); color: var(--ink-secondary); }

/* Teintes d'un portefeuille (anneau des lignes) : sa couleur mêlée de blanc, calculée depuis le token (--pc = series-N). */
.lp-tint-0 { background: color-mix(in srgb, var(--pc) 100%, white); } .lp-stroke-tint-0 { stroke: color-mix(in srgb, var(--pc) 100%, white); }
.lp-tint-1 { background: color-mix(in srgb, var(--pc) 80%, white); } .lp-stroke-tint-1 { stroke: color-mix(in srgb, var(--pc) 80%, white); }
.lp-tint-2 { background: color-mix(in srgb, var(--pc) 62%, white); } .lp-stroke-tint-2 { stroke: color-mix(in srgb, var(--pc) 62%, white); }
.lp-tint-3 { background: color-mix(in srgb, var(--pc) 46%, white); } .lp-stroke-tint-3 { stroke: color-mix(in srgb, var(--pc) 46%, white); }
.lp-tint-4 { background: color-mix(in srgb, var(--pc) 32%, white); } .lp-stroke-tint-4 { stroke: color-mix(in srgb, var(--pc) 32%, white); }
.lp-tint-5 { background: color-mix(in srgb, var(--pc) 20%, white); } .lp-stroke-tint-5 { stroke: color-mix(in srgb, var(--pc) 20%, white); }
.lp-stroke-off { stroke: var(--series-off); }
/* En-tête fixe sur grand écran : il reste visible en haut quand la page défile ; sur téléphone il défile (la barre d'onglets du bas reste fixe). */
@media (min-width: 641px) { .lp-nav { position: sticky; top: 0; z-index: 40; } }

/* Courbes (brief 8) : un seul rang de sélecteurs, ligne de légende avec la bascule d'option, couleur du portefeuille. */
.lp-chartbar [data-end] { margin-left: auto; }
.lp-chart__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.lp-chart__foot .lp-chart__legend { grid-column: auto; }
.lp-chart__foot .lp-segmented { margin-left: auto; }
.lp-chart__line--pc { stroke: var(--pc-stroke); }
.lp-chart__area--pc { fill: var(--pc-soft); fill-opacity: 1; }
.lp-chart__line--cost-navy { stroke: var(--navy); }
.lp-legend__sw--pc { border-top-color: var(--pc); }
.lp-legend__sw--cost-navy { border-top-color: var(--navy); }

/* Performance annuelle moyenne (brief 10) */
.lp-perf { display: inline-flex; flex-direction: column; gap: 2px; }
.lp-perf { display: inline-flex; flex-direction: column; gap: 2px; }
.lp-prow { grid-template-columns: auto minmax(0, 1fr) auto auto auto 20px; grid-template-areas: "icon name value gain perf chev"; }
.lp-prow__perf { grid-area: perf; justify-self: end; min-width: 92px; display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; font-variant-numeric: tabular-nums; }
.lp-prow__perf .lp-perf { align-items: flex-end; }
@media (max-width: 640px) {
  .lp-prow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon name value" "icon name perf"; }
  .lp-prow__gain { display: none; }
  .lp-prow__perf { min-width: 0; font-size: 13px; }
}

.lp-table__grid--lines { --lp-cols: minmax(0, 2.2fr) .6fr .9fr 1fr .95fr 1.1fr .8fr; min-width: 720px; }
.lp-perf-m { display: none; }
.lp-st-perf .lp-table__sub { white-space: normal; }
@media (max-width: 640px) {
  .lp-perf-m { display: inline-flex; align-items: baseline; gap: 4px; margin-left: 6px; font-size: 13px; color: var(--ink-muted); }
  .lp-table--compact.lp-table--stack .lp-st-gain { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; }
  .lp-table--stack .lp-st-perf { display: none; }
}


@media (max-width: 640px) {
  .lp-chartbar { gap: var(--space-1) var(--space-2); }
  .lp-chartbar .lp-segmented--compact .lp-segmented__opt { min-width: 30px; padding: 0 7px; }
}

.lp-table__grid--lines { --lp-cols: minmax(0, 2fr) .55fr .85fr .95fr .9fr 1fr .75fr; min-width: 600px; gap: var(--space-2); }
@media (max-width: 640px) {
  .lp-table--compact.lp-table--stack .lp-st-gain { display: block; }
  .lp-perf-m { display: block; margin: 2px 0 0; font-size: 12px; text-align: right; }
}

/* Prix de revient : toujours lisible (≥ 2 px, ≥ 3:1 sur blanc et sur les fonds soft), dessiné au-dessus de l'aire (brief 9). */
.lp-chart__line--cost { stroke: var(--gold-stroke); stroke-width: 3; stroke-dasharray: 1 6; }
.lp-chart__line--ref { stroke: var(--gold-stroke); }
.lp-legend__sw--cost { border-top: 3px dotted var(--gold-stroke); }
.lp-legend__sw--ref { border-top: 2px dashed var(--gold-stroke); }
.lp-chart__line--cost.lp-chart__line--cost-navy { stroke: var(--navy); }
.lp-legend__sw--cost.lp-legend__sw--cost-navy { border-top-color: var(--navy); }

/* Brief 9 : menu sans valeur, en-tête de portefeuille (nom puis détails), avatar 28, tableau des mouvements, dépliant à la demande */
.lp-menu__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-head__meta { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-secondary); }
.lp-avatar--28 { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.lp-avatar--28.lp-avatar--cash svg { width: 16px; height: 16px; }
/* Mouvements : Date | Ligne | Ordre | Frais | Total ; sur téléphone, deux lignes par mouvement. */
.lp-table__grid--moves { --lp-cols: .9fr 2fr 2.6fr .8fr 1.1fr; min-width: 640px; }
.lp-namecell__text { min-width: 0; overflow-wrap: anywhere; }
.lp-mv-order { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lp-mv-order__detail { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .lp-table--moves .lp-table__grid { min-width: 0; }
  .lp-table--moves .lp-table__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "date line total" "order order fees"; gap: 6px var(--space-3); align-items: center; }
  .lp-table--moves .lp-mv-date { grid-area: date; font-size: 13px; color: var(--ink-muted); }
  .lp-table--moves .lp-mv-line { grid-area: line; min-width: 0; font-weight: 700; color: var(--navy); }
  .lp-table--moves .lp-mv-total { grid-area: total; font-weight: 700; }
  .lp-table--moves .lp-mv-order { grid-area: order; font-size: 13px; color: var(--ink-secondary); }
  .lp-table--moves .lp-mv-fees { grid-area: fees; font-size: 13px; color: var(--ink-muted); }
  .lp-table--moves .lp-mv-fees::before { content: "Frais " ; font-weight: 600; }
}

.pf-stat__label { display: flex; align-items: center; gap: 2px; }
.lp-prow__perf .lp-perf { align-items: flex-end; }
/* En-tête de colonne de la liste des portefeuilles (le « ? » de la performance s'y trouve une seule fois). */
.lp-plist__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto 20px; grid-template-areas: ". . value gain perf ."; column-gap: var(--space-4); align-items: center; padding-bottom: var(--space-1); border-bottom: 1px solid var(--border-subtle); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lp-plist__cap--value { grid-area: value; justify-self: end; }
.lp-plist__cap--gain { grid-area: gain; justify-self: end; min-width: 120px; text-align: right; }
.lp-plist__cap--perf { grid-area: perf; justify-self: end; min-width: 92px; display: flex; align-items: center; justify-content: flex-end; }
@media (max-width: 640px) {
  .lp-plist__head { display: flex; justify-content: flex-end; }
  .lp-plist__cap--value, .lp-plist__cap--gain { display: none; }
}
/* HelpTip : bulle « ? » (20 px visuels, zone cliquable de 44 px) qui ouvre une fenêtre modale courte. */
.lp-helptip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -10px -12px -2px; flex: none; color: var(--navy); text-decoration: none; text-transform: none; letter-spacing: 0; }
.lp-helptip__dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--navy); font-size: 12px; font-weight: 800; line-height: 1; background: var(--surface-card); }
.lp-helptip:hover .lp-helptip__dot { background: var(--surface-sunken); }
.lp-helptip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; border-radius: 50%; }
.lp-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-overlay); }
.lp-dialog::backdrop { background: color-mix(in srgb, var(--navy) 45%, transparent); }
.lp-dialog__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.lp-dialog__body p { margin: 0; }
.lp-dialog__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--navy); }
.lp-dialog__close { align-self: flex-end; }
/* Sans JavaScript, le texte de chaque bulle est rendu en bas de page. */
.lp-helptexts { display: flex; flex-direction: column; gap: var(--space-4); }
.lp-helptext { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card); font-size: 14px; color: var(--ink-secondary); }
.lp-helptext[hidden] { display: none; }
.lp-helptext__title { margin: 0 0 var(--space-2); font-size: 16px; font-weight: 800; color: var(--navy); }
.lp-helptext p { margin: 0 0 var(--space-2); }