/* =========================================================
   SPOT CORPORATION — App Shell Polish
   Shared by the storefront (index.html), the admin portal
   (portal.html) and the legacy admin (admin.html).

   Pure presentation / UX layer: viewport containment, iOS/Android
   app-like touch behavior, safe-area handling. No markup, no
   business logic, no data, no permissions — nothing here changes
   what the app does, only how it feels to touch and how it holds
   together on real phone screens.

   Loaded LAST on every page so it can safely patch component-level
   rules that predate these fixes, without having to touch every
   single one of them by hand.
   ========================================================= */

/* ---------------------------------------------------------
   1) SAFE AREAS (notch / Dynamic Island / home indicator / Android
   gesture bar). env() resolves to 0 on any device without a safe
   area, so every var() below is a no-op there — this never adds
   spacing on a normal screen, it only protects notch devices.
   Requires <meta name="viewport" content="...viewport-fit=cover">
   on the page, otherwise env() itself resolves to 0.
--------------------------------------------------------- */
:root{
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* ---------------------------------------------------------
   2) VIEWPORT CONTAINMENT — safety net against accidental
   horizontal scroll of the whole app (a stray fixed-width child,
   a negative margin, a too-wide table). This clips overflow only
   at the document root; every internal scroll container (drawers,
   modals, tables) keeps its own overflow-y exactly as before.
--------------------------------------------------------- */
html{ overflow-x: hidden; }
body{ max-width: 100%; }

/* `overflow-x: hidden` on BODY would be a trap here, not a safety net:
   the portal sets html,body{height:100%}, and a fixed-height body with
   a hidden axis turns into a clipping scroll container — the login card
   grows past it with the keyboard open and the submit button becomes
   unreachable, because the document scroller has nothing left to
   scroll. `clip` never creates a scroll container, so overflow still
   propagates up to the page scroller the way it should. Engines without
   `clip` keep the html-only rule above, which has the same effect
   without ever touching body. */
@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}

/* ---------------------------------------------------------
   2b) NO ZOOM AT ALL — the app stays at 1:1 like an installed
   app. `pan-x pan-y` allows every kind of scrolling but removes
   pinch-zoom and double-tap-zoom from the gesture set. Chrome
   Android obeys this (and the viewport meta); iOS Safari needs
   js/viewport-lock.js on top, since it ignores user-scalable=no
   by design. Elements that declare their own touch-action (the
   3D intro canvas) keep theirs — touch-action is per-element,
   not inherited.

   Also pins the text size: without this, iOS silently inflates
   body copy in landscape ("text autosizing"), which is its own
   kind of unasked-for zoom.
--------------------------------------------------------- */
html{
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------------------------------------------------------
   3) iOS SAFARI — NEVER LET A FIELD TRIGGER PAGE ZOOM.
   Any text-entry control under 16px makes iOS Safari zoom the
   whole page in on focus. This is the single biggest source of
   "feels like a website, not an app" on mobile forms. Checkboxes,
   radios and range inputs are excluded: their font-size doesn't
   matter and a couple of them use it as a sizing hack.
   `!important` is deliberate here — dozens of component-specific
   selectors across three stylesheets set their own smaller
   font-size, and this single rule is the only way to guarantee
   the invariant everywhere (present and future) without editing
   every one of them by hand.
--------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.pin-box):not(#search-input),
select,
textarea{
  font-size: 16px !important;
}

/* ---------------------------------------------------------
   4) TOUCH FEEL — remove the gray tap-flash, kill the 300ms tap
   delay + double-tap-to-zoom on controls, WITHOUT disabling
   pinch-zoom (accessibility) or single-finger scrolling anywhere.
--------------------------------------------------------- */
a, button, [role="button"], input, select, textarea, label,
.icon-btn, .role-btn, .pin-toggle, .pin-box{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---------------------------------------------------------
   5) MOMENTUM SCROLL + SCROLL CONTAINMENT for panels that scroll
   internally (dropdowns, tables, side menus), so a finger drag
   inside them never leaks into scrolling the page behind them.
--------------------------------------------------------- */
.modal-box, .notif-panel, .sidebar-nav, .table-wrap{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------
   6) MINIMUM TOUCH TARGET — 44x44 CSS px (Apple HIG / WCAG 2.5.5).
   These specific controls were 30-38px; the hit area grows, the
   icon inside does not, so nothing looks bigger except what you
   can actually tap.
--------------------------------------------------------- */
.icon-btn{ width:44px; height:44px; }
.mobile-menu-btn{ min-width:44px; min-height:44px; }
.nav-icon-btn{ min-width:44px; min-height:44px; justify-content:center; }

/* 6b) The controls section 6 missed, found by walking the real customer
   journey on 27 device viewports: the burger was 24x15, "Fermer" on the
   product/checkout views 97x18, the cart/account/search closes ~30x20,
   "Retirer" in the cart 66x13. All visible, all hard to hit with a thumb.

   These grow through an invisible ::after centred on the control instead
   of through padding, so the hit area reaches 44px while the rendered
   layout stays pixel-for-pixel identical. Touch pointers only -- on a
   mouse a hit area larger than the visible control is surprising, not
   helpful. `min-width/min-height:100%` keeps a control that is already
   wider than 44px at its own size instead of shrinking it. */
@media (pointer: coarse){
  .nav-burger, .cart-close, .account-close, .search-close,
  .pv-close, .ci-remove, .footer-social a, .btn-ghost{ position:relative; }

  .nav-burger::after, .cart-close::after, .account-close::after,
  .search-close::after, .pv-close::after, .ci-remove::after,
  .footer-social a::after, .btn-ghost::after{
    content:''; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:44px; height:44px; min-width:100%; min-height:100%;
  }

  /* Portal controls that render 26-31px tall. Unlike the icon buttons
     above these carry text, so they take the height directly -- a few
     px taller reads as normal on a phone, an invisible overlay on a
     text button would not. */
  .btn-sm{ min-height:40px; }
  .lf-field input, .donut-editable input{ min-height:40px; }
  .search-top input{ min-height:44px; }

  /* Sidebar: the nav items themselves were only 22px tall and the
     collapse toggle 26x26 -- the two things every session starts with. */
  .sidebar-nav button{ min-height:44px; }
  .sidebar-collapse-btn{ position:relative; }
  .sidebar-collapse-btn::after{
    content:''; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%); width:44px; height:44px;
  }

  /* Row action buttons (edit / delete) inside a table: section 6 gives
     .icon-btn a 44px box, but a narrow table column was squeezing them
     back down to 13px WIDE, so the two sat almost on top of each other
     and hitting "delete" instead of "edit" was a real risk. */
  .row-actions{ gap:10px; }
  .row-actions .icon-btn{ flex-shrink:0; min-width:44px; }

  /* Stacked footer links: a 44px zone would swallow the neighbouring
     link (the rhythm is only 27px), so here the padding absorbs the
     existing margin instead -- same 27px pitch on screen, but the whole
     row is tappable rather than just the 15px of text. */
  .footer-col a{ padding-block:6px; margin-bottom:0; }

  /* Pill tabs and map markers in the portal: 24-30px tall / 16px wide. */
  .of-tab, .period-tabs button{ min-height:38px; display:inline-flex; align-items:center; justify-content:center; }
}

/* 6c) Second pass on the same 27-viewport walk, after the fixes in 6b were
   in place. Four more controls were still under 32px on touch, all of them
   on the storefront -- and all four sit on the critical path (the desktop
   nav row that tablets in landscape get instead of the burger, and the two
   consent boxes you cannot check out without). */
@media (pointer: coarse){
  /* Desktop nav row, shown from 900px up -- so every tablet in landscape
     taps it. The links are 24px tall and the wordmark 26px. `::after` is
     already taken on both (the underline sweep on the links), hence
     `::before`: transparent, full link width, 44px tall, zero layout
     change -- the nav bar keeps its exact height. */
  .nav-links a::before, .nav-brand::after{
    content:''; position:absolute; left:0; right:0; top:50%;
    transform:translateY(-50%); height:44px;
  }
  .nav-brand{ position:relative; }

  /* Newsletter row in the CTA band: the field and its submit rendered
     20px tall (no padding, borderless by design). These take real height
     rather than an overlay -- an input cannot carry a pseudo-element, and
     a 20px submit next to a 40px field would look broken. The band has
     room to spare, so nothing else moves. */
  .cta-form input, .cta-form button{ min-height:40px; }

  /* Checkout consent boxes: 18px native checkboxes. The wrapping label
     already toggles them, but these two gate the order -- the box itself
     has to be hittable, not just its text. */
  .co-check input{ width:24px; height:24px; }
}

/* ---------------------------------------------------------
   7) MOTION — respect the OS-level "reduce motion" preference.
   Belt-and-braces on top of any per-file handling: every
   transition/animation collapses to nearly-instant instead of
   being disabled outright, so state changes stay legible.
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   KEYBOARD FOCUS
   :focus-visible only matches when the browser decides a focus ring is
   useful (keyboard, not a mouse click or a tap), so none of this shows
   up for pointer users and nothing about the look of the app changes.
   Before this, many controls had no visible focus at all -- the
   buttons, tabs and clickable rows either reset the outline or never
   styled one -- so someone navigating with Tab could not see where they
   were.
--------------------------------------------------------- */
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"]), select,
       input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"]):focus-visible{
  outline: 2px solid var(--accent-bright, #d21f30);
  outline-offset: 2px;
}
/* Rows in a table have no room outside them: draw the ring inside. */
tr:focus-visible, .task-row:focus-visible, .ledger-row:focus-visible{
  outline: 2px solid var(--accent-bright, #d21f30);
  outline-offset: -2px;
}
/* Text fields that removed their outline with no replacement. */
.cta-form:focus-within{ border-bottom-color: var(--bone, #f3efe6); }
.search-top:focus-within{ border-bottom-color: var(--line-strong, rgba(244,241,235,.18)); }
.product-line-row input:focus-visible{ border-color: var(--accent-bright, #d21f30); }

/* =========================================================
   CORRECTIFS D'AUDIT — 6 octobre 2026
   ========================================================= */

/* L'ICÔNE DES BOUTONS « AJOUTER » ÉTAIT GÉANTE.

   `.icon-btn svg` avait sa taille (14px) ; `.btn-sm svg` n'en avait
   aucune. Un SVG sans width/height prend la taille par défaut du
   remplacement, 300×150, que le flex ramenait à ~82px de haut : le
   bouton « + Ajouter un détaillant » faisait 201×103 au lieu de ~36 de
   haut, sur neuf écrans, sur téléphone comme sur ordinateur.

   `flex:0 0 auto` empêche en plus le conteneur flex d'étirer le SVG.
   Seul `.btn-sm` porte des icônes aujourd'hui ; la règle reste sur lui
   plutôt que sur tous les boutons, pour ne rien rétrécir ailleurs sans
   l'avoir vu. */
.btn-sm > svg{ width:14px; height:14px; flex:0 0 auto; }

/* UNE CARTE SEULE LAISSAIT UN TROU.

   En dessous de 620px la grille est figée à deux colonnes : avec trois
   ou cinq cartes, la dernière restait seule avec un vide à côté d'elle
   (Tableau de bord détaillant, Audience, et ailleurs). Elle prend
   maintenant toute la largeur, ce qui remplit la ligne au lieu de la
   laisser à moitié vide. */
@media (max-width: 620px){
  .stat-grid > :last-child:nth-child(odd){ grid-column: 1 / -1; }
}

/* =========================================================
   CLASSEMENT DES ARTICLES
   ========================================================= */
.reorder-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.reorder-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px;
  background:var(--charcoal); border:1px solid var(--line);
  /* Le réordonnancement doit se lire : la ligne qui arrive glisse à sa
     place au lieu d'y apparaître. */
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.reorder-item.dragging{
  background:var(--panel-solid); border-color:var(--accent-bright);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8);
  opacity:.92;
}
/* La poignée, et elle seule, confisque le geste tactile : le reste de
   la liste continue de défiler normalement au doigt. */
.reorder-grip{
  flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; color:var(--bone-faint); cursor:grab; touch-action:none;
  border:1px solid transparent; background:transparent;
}
.reorder-grip:hover{ color:var(--bone); background:rgba(255,255,255,.05); }
.reorder-grip:active{ cursor:grabbing; }
.reorder-grip svg{ width:18px; height:18px; pointer-events:none; }
.reorder-rank{
  flex:0 0 auto; min-width:24px; text-align:center;
  font-family:var(--f-grotesk); font-size:.78rem; font-weight:700; color:var(--bone-faint);
  font-variant-numeric: tabular-nums;
}
.reorder-thumb{ flex:0 0 auto; width:38px; height:38px; border-radius:6px; object-fit:cover; }
.reorder-thumb-vide{ display:block; background:var(--panel-solid); }
.reorder-name{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.88rem; font-weight:600; color:var(--bone);
}
.reorder-actions{ flex:0 0 auto; display:flex; gap:4px; }

@media (max-width: 560px){
  .reorder-item{ gap:8px; padding:9px 8px; }
  .reorder-thumb{ width:32px; height:32px; }
  .reorder-name{ font-size:.82rem; }
  /* Au doigt, la poignée et les flèches doivent rester atteignables. */
  .reorder-grip{ width:40px; height:40px; }
}

@media (prefers-reduced-motion: reduce){
  .reorder-item{ transition:none; }
}

/* Un bouton inactif doit se voir inactif : « Enregistrer le classement »
   reste gris tant que rien n'a bougé, sinon on clique dans le vide. */
.btn-sm:disabled,
.btn-sm[disabled]{
  opacity:.4; cursor:not-allowed; filter:grayscale(.6);
  transform:none; box-shadow:none;
}
.btn-sm:disabled:hover,
.btn-sm[disabled]:hover{ transform:none; filter:grayscale(.6); }

/* Le bloc paiement, dans le détail d'une commande. */
.payment-block{
  margin:18px 0; padding:14px 16px; border-radius:10px;
  background:var(--charcoal); border:1px solid var(--line);
}
.payment-block.validated{ border-color:rgba(76,191,113,.35); }
.payment-block.refused{ border-color:rgba(224,38,58,.45); }
.payment-block .pb-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px;
  font-size:.92rem; color:var(--bone);
}
.payment-block .pb-line{
  color:var(--bone-dim); font-size:.84rem; line-height:1.65; margin-top:4px;
}

/* Une colonne de moins sur téléphone plutôt qu'un tableau à faire
   défiler : le numéro de transaction sert à l'audit, pas à la lecture
   courante, et il reste visible dès qu'il y a la place. */

/* La décomposition de la valeur d'une participation : un montant sur
   l'argent de quelqu'un ne vaut rien s'il n'est pas vérifiable. */
.valuation-breakdown{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px;
  font-size:.82rem; font-variant-numeric: tabular-nums;
}
.valuation-breakdown > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
}
.valuation-breakdown span{ color:var(--bone-dim); }
.valuation-breakdown b{ color:var(--bone); font-weight:600; white-space:nowrap; }
.valuation-breakdown b.good{ color:var(--good); }
.valuation-breakdown .vb-total{
  margin-top:3px; padding-top:9px; border-top:1px solid var(--line);
}
.valuation-breakdown .vb-total span{ color:var(--bone); font-weight:600; }

/* « Une nouvelle version est en ligne » — js/version-watch.js.
   En bas, au-dessus de la barre d'accueil de l'iPhone : visible sans
   masquer le titre de la page ni le menu. */
#version-banner{
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:9999;
  transform:translate(-50%, 14px); opacity:0;
  /* Le texte prend la place qui reste, les deux boutons gardent la leur :
     sur iPhone ça tient en deux lignes nettes (le texte, puis les deux
     boutons côte à côte) au lieu de trois empilées. */
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px 10px;
  width:max-content; max-width:calc(100vw - 32px); padding:10px 10px 10px 16px; border-radius:12px;
  background:var(--panel-solid, #15131a); border:1px solid var(--accent-bright, #e0263a);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  color:var(--bone, #f3efe6); font-size:.84rem;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
}
#version-banner.show{ transform:translate(-50%, 0); opacity:1; }
#version-banner button{
  font:inherit; font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 12px; border-radius:8px; cursor:pointer; border:1px solid transparent;
}
#version-reload{ background:var(--accent-bright, #e0263a); color:#fff; }
#version-later{ background:transparent; color:var(--bone-dim, #b9b4aa); border-color:var(--line-strong, #333); }
#version-banner span{ line-height:1.4; }
@media (max-width: 480px){
  #version-banner{ width:calc(100vw - 32px); grid-template-columns:1fr 1fr; padding:12px; }
  #version-banner span{ grid-column:1 / -1; }
  #version-banner button{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  #version-banner{ transition:opacity .2s ease; transform:translate(-50%, 0); }
}

/* =========================================================
   RÉPARTITION DU CAPITAL — FONDS ACTIONNAIRES
   ========================================================= */
.capital-bar{
  display:flex; height:10px; border-radius:6px; overflow:hidden; gap:2px;
  margin:0 0 16px; background:var(--charcoal);
}
.capital-bar span{ display:block; }
.capital-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width: 900px){ .capital-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.capital-card{
  padding:14px 16px; border-radius:12px; background:var(--panel-solid); border:1px solid var(--line);
}
.capital-card .cc-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.capital-card .cc-icon svg{ width:18px; height:18px; display:block; }
.capital-card .cc-label{ flex:1; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); }
.capital-card .cc-pct{ font-size:.72rem; font-weight:700; color:var(--bone-faint); font-variant-numeric:tabular-nums; }
.capital-card .cc-value{ font-family:var(--f-display); font-size:1.5rem; color:var(--bone); font-variant-numeric:tabular-nums; }
.capital-total{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
}
.capital-total span:first-child{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); }
.capital-total b{ font-family:var(--f-display); font-size:1.3rem; color:var(--bone); font-variant-numeric:tabular-nums; }
.capital-total .ct-note{ font-size:.76rem; color:var(--bone-faint); }

.fund-card .badge svg{ width:11px; height:11px; vertical-align:-1px; }
.fund-balance{ display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
.fund-balance span{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); }
.fund-balance b{ font-family:var(--f-display); font-size:2.2rem; color:var(--bone); font-variant-numeric:tabular-nums; }
.fund-cycle, .fund-figures{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 18px;
  font-size:.84rem; font-variant-numeric:tabular-nums;
}
.fund-figures{ grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
@media (max-width: 760px){ .fund-figures{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.fund-cycle > div, .fund-figures > div{ display:flex; flex-direction:column; gap:3px; }
.fund-cycle span, .fund-figures span{ color:var(--bone-faint); font-size:.74rem; }
.fund-cycle b, .fund-figures b{ color:var(--bone); font-weight:600; }
.fund-decision{
  margin-top:18px; padding:16px; border-radius:12px;
  border:1px solid var(--accent-bright); background:rgba(224,38,58,.06);
}
.fund-decision .fd-head{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--bone); font-size:.9rem; }
.fund-decision .fd-head span{ color:var(--accent-bright); font-weight:700; font-variant-numeric:tabular-nums; }
.fund-decision p{ margin:8px 0 12px; color:var(--bone-dim); font-size:.82rem; line-height:1.6; }
.fund-decision .fd-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.fund-decision .fd-partial{ margin-top:14px; }
.fund-decision .fd-partial label{ display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:6px; }
.fund-decision .fd-partial-row{ display:flex; gap:8px; flex-wrap:wrap; }
.fund-decision .fd-partial-row input{ flex:1 1 140px; min-width:0; background:var(--charcoal); border:1px solid var(--line-strong); border-radius:3px; color:var(--bone); padding:9px 12px; font-size:.86rem; outline:none; }
.fund-decision .fd-partial-row input:focus-visible{ border-color:var(--accent); }
.fund-disclaimer{ margin:12px 0 0; color:var(--bone-faint); font-size:.78rem; line-height:1.6; }
.reclass-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.reclass-row select{ flex:1 1 160px; min-width:0; }

/* =========================================================
   TABLEAUX EMPILÉS SUR TÉLÉPHONE (voir stackTables, js/portal.js)
   Chaque ligne devient une fiche : intitulé à gauche, valeur à droite.
   ========================================================= */
.warn-text{ color:var(--warn); }
.tr-amount{ font-family:var(--f-grotesk); font-weight:700; font-size:.9rem; color:var(--bone); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tr-amount.good{ color:var(--good); }
@media (max-width: 640px){
  table.data-table.stack-sm{ min-width:0; }
  table.data-table.stack-sm thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  table.data-table.stack-sm, table.data-table.stack-sm tbody, table.data-table.stack-sm tr, table.data-table.stack-sm td{ display:block; width:100%; }
  table.data-table.stack-sm tbody tr{
    border:1px solid var(--line); border-radius:10px; padding:6px 14px; margin:0 0 10px;
    background:rgba(244,241,235,.015);
  }
  table.data-table.stack-sm tbody tr:last-child{ margin-bottom:0; }
  table.data-table.stack-sm td{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:9px 0; border-bottom:1px solid var(--line); text-align:right; min-width:0;
    overflow-wrap:anywhere;
  }
  table.data-table.stack-sm tr td:last-child{ border-bottom:none; }
  table.data-table.stack-sm td::before{
    content:attr(data-label); flex-shrink:0; max-width:46%; text-align:left;
    font-family:var(--f-grotesk); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-faint);
  }
  table.data-table.stack-sm td[data-label=""]::before{ content:none; }
  table.data-table.stack-sm td[data-label=""]{ justify-content:flex-end; }
  /* La première colonne (n° de commande, nom d'article…) sert de titre de fiche. */
  table.data-table.stack-sm td:first-child{ font-size:.95rem; color:var(--bone); font-weight:600; }
  table.data-table.stack-sm .row-actions{ justify-content:flex-end; flex-wrap:wrap; }
  table.data-table.stack-sm tr.stack-full td{ display:block; text-align:center; }
  table.data-table.stack-sm tr.stack-full td::before{ content:none; }
  .table-wrap:has(> table.stack-sm){ overflow-x:visible; }
}
@media (max-width: 640px){
  table.data-table.stack-sm .stack-val{ display:block; min-width:0; text-align:right; }
  table.data-table.stack-sm td[data-label=""]:first-child{ justify-content:flex-start; }
}

/* =========================================================
   COMMANDES : date, miniatures · CATALOGUE : prix coûtant en ligne
   ========================================================= */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.data-table td.nowrap{ white-space:nowrap; }
.order-items{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.order-thumbs{ display:inline-flex; flex-shrink:0; }
.order-thumbs img{ width:28px; height:28px; object-fit:cover; border-radius:6px; border:2px solid var(--panel-solid); background:var(--charcoal); }
.order-thumbs img + img{ margin-left:-10px; }
.cost-inline{ display:inline-flex; align-items:center; gap:4px; padding:0 8px; height:32px; border:1px solid var(--line); border-radius:8px; background:rgba(244,241,235,.02); transition:border-color var(--m-fast) var(--m-ease); }
.cost-inline:focus-within{ border-color:var(--bone-dim); }
.cost-inline .ci-cur{ color:var(--bone-faint); font-size:.8rem; }
.cost-inline input{ width:68px; background:none; border:0; padding:0; color:var(--bone); font:inherit; font-variant-numeric:tabular-nums; outline:none; -moz-appearance:textfield; }
.cost-inline input::-webkit-outer-spin-button, .cost-inline input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cost-inline.is-missing{ border-color:var(--warn); background:var(--warn-bg); }
.cost-inline.is-missing input::placeholder{ color:var(--warn); opacity:1; }
.cost-inline input:disabled{ opacity:.5; }
@media (max-width: 640px){
  table.data-table.stack-sm .order-items{ justify-content:flex-end; }
}

/* REGISTRE : raccourcis de période + résumé de ce qui est filtré/exporté */
.lf-periods{ flex:1 1 100%; }
.period-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.period-chips .of-tab{ margin:0; }
.ledger-period-sum{ margin:0 0 14px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; color:var(--bone-dim); font-size:.82rem; line-height:1.6; font-variant-numeric:tabular-nums; }
.ledger-period-sum b{ color:var(--bone); font-weight:600; }
.ledger-period-sum b.good{ color:var(--good); }
.ledger-period-sum .lps-hint{ color:var(--bone-faint); }

/* Bandeau « versement en retard » sur le tableau de bord du détaillant */
.late-banner{ margin:0 0 26px; padding:14px 16px; border:1px solid var(--bad, #e05a4c); border-radius:10px; background:rgba(224,90,76,.08); color:var(--bone); font-size:.88rem; line-height:1.6; }
.late-banner b{ color:var(--bad, #e05a4c); }

/* =========================================================
   BARRE D'ACTIONS iPHONE (voir renderMobileDock, js/portal.js)
   ========================================================= */
.mobile-dock{ display:none; }
@media (max-width: 640px){
  .mobile-dock{
    display:flex; align-items:stretch; justify-content:space-around;
    position:fixed; left:0; right:0; bottom:0; z-index:85;
    padding:6px max(8px, var(--sar)) calc(6px + var(--sab)) max(8px, var(--sal));
    background:rgba(20,18,23,.92); border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  .mobile-dock button{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:48px; padding:4px 2px; background:none; border:0; border-radius:10px; color:var(--bone-faint);
    font-family:var(--f-grotesk); font-size:.64rem; font-weight:600; letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent; transition:color var(--m-fast) var(--m-ease), transform var(--m-instant) var(--m-ease);
  }
  .mobile-dock button svg{ width:20px; height:20px; }
  .mobile-dock button span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-dock button.active{ color:var(--bone); }
  .mobile-dock button:active{ transform:scale(.94); }
  .mobile-dock button:focus-visible{ outline:2px solid var(--bone-dim); outline-offset:-2px; }
  .mobile-dock .dock-add svg{ width:34px; height:34px; margin:-7px 0; padding:8px; border-radius:50%; background:var(--accent, #d4202c); color:#fff; box-sizing:border-box; box-shadow:0 4px 14px rgba(161,20,35,.45); }
  .mobile-dock .dock-add{ color:var(--bone-dim); }
  body.has-dock .app-content{ padding-bottom:calc(96px + var(--sab)); }
  .mobile-dock{ transition:transform var(--m-base) var(--m-ease-exit), opacity var(--m-base) var(--m-ease-exit); }
  body.dock-away .mobile-dock{ transform:translateY(100%); opacity:0; pointer-events:none; }
  /* Le menu latéral et les fenêtres passent au-dessus de la barre. */
  .dock-sheet{ display:flex; flex-direction:column; gap:10px; margin:6px 0 4px; }
  .dock-sheet .btn-sm{ justify-content:flex-start; min-height:48px; font-size:.82rem; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce){
  .mobile-dock button:active{ transform:none; }
}
@media (max-width: 640px){
  body.has-dock #portal-toast{ bottom:calc(84px + var(--sab)); }
}
@media (max-width: 640px){
  body.has-dock #version-banner{ bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Champs date affichés en français (voir frDateInputs, js/portal.js). */
.date-fr{ position:relative; display:block; }
.date-fr > input[type="date"]{ width:100%; color:transparent; }
.date-fr > input[type="date"]::-webkit-datetime-edit{ color:transparent; }
.date-fr > input[type="date"]:focus::-webkit-datetime-edit{ color:transparent; }
.date-fr-face{
  position:absolute; left:var(--df-pad, 12px); right:36px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--bone); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.date-fr.is-empty .date-fr-face{ color:var(--bone-faint); }
.modal-field .date-fr{ --df-pad:15px; }
.modal-field .date-fr-face{ font-size:.86rem; }
.date-fr > input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.85); cursor:pointer; }

/* =========================================================
   CENTRE DE COMMANDE DU PDG (sptcrp 5.5) — js/portal.js,
   commandCenterHTML(). Douze colonnes quand la place le permet,
   deux sur une fenêtre moyenne, une seule sur téléphone : la grille
   suit la largeur du contenu (requêtes de conteneur), pas celle de
   l'écran, pour rester juste menu ouvert comme menu replié.
   Sobre : aucune boucle, aucun rebond, des survols de 180 ms.
   ========================================================= */
.cc{ display:flex; flex-direction:column; gap:16px; margin-bottom:34px; container:cc / inline-size; }
.cc > .cc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; }
.cc-title{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.cc-hello{ font-family:var(--f-grotesk); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,239,230,.5); }
.cc-title h2{ margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1; letter-spacing:.01em; text-transform:uppercase; text-wrap:balance; }
.cc-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cc-live, .cc-calm{ display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 14px; border-radius:999px; font-family:var(--f-grotesk); font-size:.74rem; font-weight:700; white-space:nowrap; }
.cc-live{ border:1px solid rgba(224,49,63,.32); background:rgba(224,49,63,.12); color:#ff6b77; cursor:pointer; transition:background-color var(--m-fast) var(--m-ease), transform var(--m-instant) var(--m-ease); }
.cc-live:hover{ background:rgba(224,49,63,.2); }
.cc-live:active{ transform:scale(var(--m-press-scale)); }
.cc-calm{ border:1px solid var(--line); color:rgba(243,239,230,.55); font-weight:600; }
/* Un point « en direct » fixe : il signale, il ne clignote pas. */
.cc-pulse{ width:8px; height:8px; border-radius:50%; background:#e0313f; box-shadow:0 0 0 3px rgba(224,49,63,.22), 0 0 0 7px rgba(224,49,63,.08); flex:none; }

.cc-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
@container cc (min-width: 620px){
  .cc-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-flow:row dense; }
  .cc-s8, .cc-map{ grid-column:span 2; }
}
@container cc (min-width: 1040px){
  .cc-grid{ grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-flow:row; }
  .cc-s3{ grid-column:span 3; } .cc-s4{ grid-column:span 4; } .cc-s5{ grid-column:span 5; } .cc-s8{ grid-column:span 8; }
}

.cc-card{
  position:relative; min-width:0; display:flex; flex-direction:column; gap:12px;
  padding:18px 20px; border-radius:14px; border:1px solid var(--line);
  background:var(--grad-surface, var(--panel-solid)); box-shadow:var(--rim, none), var(--lift, none);
  font-family:var(--f-grotesk);
}
.cc-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:22px; }
.cc-lab{ font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,239,230,.5); }
.cc-muted{ color:rgba(243,239,230,.5); font-size:.74rem; }
.cc-good{ color:var(--good); } .cc-bad{ color:#ff6b77; } .cc-red{ color:#ff6b77; }
.cc-mono{ font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size:.7rem; letter-spacing:0; }
.cc-num{ font-family:var(--f-display); font-weight:400; font-size:1.02rem; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.cc-big{ font-family:var(--f-display); font-weight:400; font-size:clamp(2.1rem, 3.4vw, 2.75rem); line-height:.95; letter-spacing:.005em; font-variant-numeric:tabular-nums; color:var(--bone); }
.cc-big small{ font-size:.5em; color:rgba(243,239,230,.5); margin-left:1px; }
.cc-big.cc-big-sm{ font-size:1.55rem; }
.cc-line{ display:flex; align-items:baseline; justify-content:space-between; gap:4px 10px; flex-wrap:wrap; font-size:.76rem; }
.cc-foot{ color:rgba(243,239,230,.42); font-size:.68rem; }
.cc-col{ display:flex; flex-direction:column; gap:2px; font-size:.76rem; }
.cc-right{ margin-left:auto; text-align:right; }
.cc-row6{ display:flex; align-items:center; gap:6px; min-width:0; }
.cc-more{ font-size:.7rem; color:rgba(243,239,230,.5); padding-left:2px; }
.cc-link{ padding:0; border:0; background:none; color:rgba(243,239,230,.62); font-family:var(--f-grotesk); font-size:.72rem; font-weight:600; cursor:pointer; text-underline-offset:3px; transition:color var(--m-fast) var(--m-ease); }
.cc-link:hover{ color:var(--bone); text-decoration:underline; }
.cc-card :is(button, .cc-link):focus-visible{ outline:2px solid rgba(243,239,230,.7); outline-offset:2px; }

/* Graphiques : la courbe et les barres s'étirent, le texte reste en HTML. */
.cc-chart{ position:relative; }
.cc-svg{ display:block; width:100%; height:100%; }
.cc-chart-area{ height:56px; margin:0 -2px; }
.cc-chart-bars{ display:flex; flex-direction:column; gap:6px; padding-top:12px; margin-top:auto; }
.cc-plot{ position:relative; display:block; height:100px; }
.cc-record{ position:absolute; transform:translate(-50%, -100%); white-space:nowrap; font-size:.66rem; font-weight:600; color:rgba(243,239,230,.82); }
.cc-axis{ display:flex; justify-content:space-between; font-size:.66rem; color:rgba(243,239,230,.42); }
.cc-axis .cc-red{ font-weight:600; }
.cc-pouls-head{ display:flex; align-items:flex-end; gap:8px 20px; flex-wrap:wrap; }

/* Aujourd'hui */
.cc-today-head{ display:flex; align-items:baseline; gap:8px; }
.cc-today-sum{ margin-left:auto; font-family:var(--f-display); font-weight:400; font-size:1.25rem; }
.cc-seg{ display:flex; gap:2px; height:8px; border-radius:99px; overflow:hidden; }
.cc-seg span{ display:block; min-width:0; }
.cc-seg.cc-seg-lg{ height:12px; }
.cc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.cc-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.78rem; color:rgba(243,239,230,.75); }
.cc-list li > span{ display:flex; align-items:center; gap:8px; min-width:0; }
.cc-list li i{ width:8px; height:8px; border-radius:50%; flex:none; }
.cc-list li b{ color:var(--bone); font-variant-numeric:tabular-nums; }
.cc-goal{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.cc-goal .cc-link{ align-self:flex-start; }
.cc-bar{ height:6px; border-radius:99px; background:rgba(243,239,230,.08); overflow:hidden; }
.cc-bar span{ display:block; height:100%; border-radius:inherit; background:var(--grad-red, var(--accent-bright)); }

/* En direct : quatre colonnes de statut, puis le fil de la journée. */
.cc-s8{ container:ccdirect / inline-size; }
.cc-lanes, .cc-feed-row{ display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; }
@container ccdirect (min-width: 420px){ .cc-lanes, .cc-feed-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@container ccdirect (min-width: 700px){ .cc-lanes, .cc-feed-row{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.cc-lane{ display:flex; flex-direction:column; gap:8px; min-width:0; padding:10px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.cc-lane-head{ display:flex; align-items:center; gap:8px; font-size:.74rem; }
.cc-lane-head b{ font-family:var(--f-display); font-weight:400; font-size:1.05rem; }
.cc-lane-head .cc-muted{ margin-left:auto; font-size:.68rem; white-space:nowrap; }
.cc-status{ font-size:.66rem; font-weight:700; padding:3px 8px; border-radius:6px; white-space:nowrap; }
.cc-status.st-pending{ background:var(--warn-bg); color:var(--warn); }
.cc-status.st-confirmed{ background:rgba(127,168,255,.13); color:#9dbcff; }
.cc-status.st-route{ background:rgba(224,49,63,.14); color:#ff6b77; }
.cc-status.st-done{ background:var(--good-bg); color:var(--good); }
.cc-lane-empty{ display:block; font-size:.74rem; color:rgba(243,239,230,.42); }
.cc-lane .cc-lane-empty{ padding:18px 0; text-align:center; border:1px dashed var(--line); border-radius:10px; }
.cc-order{
  display:flex; flex-direction:column; gap:8px; width:100%; min-width:0; padding:10px; text-align:left;
  border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.035); color:inherit; font:inherit; cursor:pointer;
  transition:border-color var(--m-fast) var(--m-ease), background-color var(--m-fast) var(--m-ease), transform var(--m-instant) var(--m-ease);
}
.cc-order:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.055); }
.cc-order:active{ transform:scale(var(--m-press-scale)); }
.cc-order-top, .cc-order-bot{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.cc-order-mid{ display:flex; align-items:center; gap:9px; min-width:0; }
.cc-order-who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cc-order-who b, .cc-order-who span, .cc-order-bot .cc-row6 > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-order-who b{ font-size:.8rem; font-weight:600; }
.cc-order-who span{ font-size:.7rem; color:rgba(243,239,230,.5); }
.cc-order-bot .cc-row6{ font-size:.7rem; }
.cc-thumb{ width:34px; height:34px; border-radius:8px; object-fit:cover; flex:none; background:#221f24; }
.cc-thumb-empty{ display:grid; place-items:center; color:rgba(243,239,230,.36); }
.cc-thumb-empty svg{ width:16px; height:16px; }
.cc-av{ display:inline-grid; place-items:center; border-radius:50%; flex:none; color:#0b0a0c; font-family:var(--f-grotesk); font-weight:700; letter-spacing:-.01em; }
.cc-feed{ display:flex; flex-direction:column; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
.cc-event{ display:flex; flex-direction:column; gap:4px; min-width:0; padding:2px 0 2px 10px; border:0; border-left:1px solid var(--line); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.cc-event-txt{ font-size:.76rem; line-height:1.4; color:rgba(243,239,230,.7); transition:color var(--m-fast) var(--m-ease); }
.cc-event-txt b{ color:var(--bone); font-weight:600; }
.cc-event:hover .cc-event-txt{ color:var(--bone); }
.cc-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; flex:none; background:rgba(243,239,230,.4); }
.cc-dot.cc-good{ background:var(--good); }
.cc-dot.cc-red{ background:#e0313f; box-shadow:0 0 0 3px rgba(224,49,63,.2); }
.cc-dot.cc-bad{ background:#ff6b77; }
.cc-dot.cc-blue{ background:#7fa8ff; }
.cc-dot.cc-warn{ background:var(--warn); }

/* À régler : chaque alerte avec l'endroit où la régler. */
.cc-alerts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cc-alert{ display:grid; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.cc-alert-ico{ display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:rgba(127,168,255,.13); color:#9dbcff; }
.cc-alert-ico svg{ width:15px; height:15px; }
.cc-alert.cc-high .cc-alert-ico{ background:rgba(224,49,63,.14); color:#ff6b77; }
.cc-alert.cc-medium .cc-alert-ico{ background:var(--warn-bg); color:var(--warn); }
.cc-alert-txt{ font-size:.76rem; line-height:1.4; color:rgba(243,239,230,.78); overflow-wrap:anywhere; }
.cc-cta{ padding:6px 10px; border-radius:8px; border:1px solid var(--line); background:rgba(243,239,230,.07); color:var(--bone); font-family:var(--f-grotesk); font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; cursor:pointer; transition:background-color var(--m-fast) var(--m-ease), transform var(--m-instant) var(--m-ease); }
.cc-cta:hover{ background:rgba(243,239,230,.14); }
.cc-cta:active{ transform:scale(var(--m-press-scale)); }
.cc-ok{ padding:18px; border-radius:10px; text-align:center; font-size:.82rem; color:var(--good); background:var(--good-bg); }

/* Mini Spot Map : la carte en fond, le texte posé dessus. */
.cc-card.cc-map{ padding:0; min-height:300px; overflow:hidden; gap:0; transition:border-color var(--m-fast) var(--m-ease); }
.cc-card.cc-map:hover{ border-color:rgba(224,38,58,.28); }
.cc-map-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; background:#0d0c0f; }
.cc-card.cc-map::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(13,12,15,.9) 0%, rgba(13,12,15,0) 34%, rgba(13,12,15,0) 72%, rgba(13,12,15,.88) 100%); }
.cc-map-head, .cc-map-foot{ position:relative; z-index:1; pointer-events:none; }
.cc-map-head{ display:flex; flex-direction:column; gap:3px; padding:16px 18px 0; }
.cc-map-head b{ font-family:var(--f-display); font-weight:400; font-size:1.35rem; letter-spacing:.01em; }
.cc-map-foot{ display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin-top:auto; padding:0 18px 14px; font-size:.7rem; color:rgba(243,239,230,.75); }
.cc-map-foot > span{ display:inline-flex; align-items:center; gap:6px; }
.cc-map-foot .cc-muted{ font-size:.68rem; }
.cc-ring{ display:inline-block; width:10px; height:10px; border-radius:50%; border:2px solid #e0313f; box-sizing:border-box; }
.cc-map-hit{ position:absolute; inset:0; z-index:2; width:100%; border:0; padding:0; background:transparent; border-radius:inherit; cursor:pointer; }
.cc-card .cc-map-hit:focus-visible{ outline:2px solid rgba(243,239,230,.7); outline-offset:-3px; }

/* Détaillants */
.cc-board{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cc-board li{ display:grid; grid-template-columns:12px 30px minmax(0, 1fr) auto; align-items:center; gap:10px; }
.cc-board-mid{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cc-board-mid .cc-line b{ font-size:.8rem; font-weight:600; }
.cc-board-mid .cc-muted{ font-size:.68rem; }
.cc-board-bar{ height:4px; border-radius:99px; background:rgba(243,239,230,.07); overflow:hidden; }
.cc-board-bar span{ display:block; height:100%; border-radius:inherit; background:rgba(243,239,230,.5); }
.cc-board .badge{ white-space:nowrap; justify-self:end; }
@container cc (max-width: 400px){
  .cc-board li{ grid-template-columns:12px 30px minmax(0, 1fr); }
  .cc-board .badge{ grid-column:3; justify-self:start; }
}

/* Capital */
.cc-fund{ display:flex; flex-direction:column; gap:4px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }

@container cc (max-width: 619px){
  .cc-card{ padding:16px; }
  .cc-big{ font-size:2.3rem; }
}

/* Menu latéral : le pendentif SPOT en emblème, et les pastilles. */
.sidebar-brand img.brand-pendant{ height:40px; width:auto; mix-blend-mode:screen; }
.nav-badge{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; flex:none;
  display:inline-grid; place-items:center; font-style:normal; font-family:var(--f-grotesk);
  font-size:.64rem; font-weight:700; font-variant-numeric:tabular-nums;
  background:rgba(224,49,63,.16); color:#ff6b77;
}
.nav-badge.warn{ background:var(--warn-bg); color:var(--warn); }
@media (min-width: 981px){
  #app-shell.sidebar-collapsed .nav-badge{ position:absolute; top:3px; right:10px; min-width:16px; height:16px; padding:0 4px; font-size:.56rem; }
}
/* Téléphone : une colonne vide se résume à son en-tête (« En route 0 »). */
@container ccdirect (max-width: 419px){
  .cc-lane .cc-lane-empty{ display:none; }
}
.cc-feed .cc-card-head{ flex-wrap:wrap; }
/* La pastille de la cloche se cache vraiment quand il n'y a rien à lire
   (son display:flex l'emportait sur l'attribut hidden : « 0 » restait affiché). */
.notif-badge[hidden]{ display:none; }

/* ACCUEIL IPHONE DU PDG (ccPhoneHTML) */
.cc-phone{ gap:14px; }
.ccp-head{ display:flex; align-items:center; gap:12px; }
.ccp-head .brand-pendant{ height:40px; width:auto; mix-blend-mode:screen; flex:none; }
.ccp-head h2{ font-size:1.5rem; }
.cc-phone .cc-card{ border-radius:20px; }
.ccp-treso{ background:radial-gradient(110% 90% at 100% 0%, rgba(243,239,230,.07), transparent 55%), var(--grad-surface, var(--panel-solid)); }
.ccp-treso .cc-big{ font-size:2.9rem; }
.ccp-treso .cc-chart-area{ height:44px; }
.ccp-ventes{ display:grid; grid-template-columns:minmax(0, 118px) minmax(0, 1fr); align-items:stretch; gap:12px; }
.ccp-ventes-txt{ display:flex; flex-direction:column; gap:5px; font-size:.76rem; }
.ccp-ventes-txt .cc-big{ font-size:1.9rem; margin-top:4px; }
.ccp-ventes-txt .cc-muted{ margin-top:auto; font-size:.68rem; line-height:1.35; }
.ccp-ventes .cc-chart-bars{ padding-top:16px; }
.ccp-ventes .cc-plot{ height:90px; }
.ccp-block{ display:flex; flex-direction:column; gap:10px; font-family:var(--f-grotesk); }
.ccp-sum{ font-size:.8rem; }
.ccp-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.ccp-tile{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start; padding:11px 12px; border-radius:14px;
  border:1px solid var(--line); background:var(--panel-solid); color:var(--bone); font:inherit; text-align:left; cursor:pointer;
  transition:transform var(--m-instant) var(--m-ease);
}
.ccp-tile:active{ transform:scale(var(--m-press-scale)); }
.ccp-tile .cc-num{ font-size:1.65rem; line-height:1; }
.ccp-tile .cc-muted{ font-size:.7rem; }
.ccp-warn{ color:var(--warn); }
.ccp-goal{ margin-top:0; }
.ccp-row{
  display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:16px;
  border:1px solid var(--line); background:var(--panel-solid); color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:transform var(--m-instant) var(--m-ease);
}
.ccp-row:active{ transform:scale(var(--m-press-scale)); }
.ccp-row .cc-thumb{ width:44px; height:44px; border-radius:11px; }
.ccp-row-mid{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.ccp-row-mid .cc-line{ flex-wrap:nowrap; align-items:center; }
.ccp-row-mid .cc-line > *{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ccp-row-mid b{ font-size:.86rem; }
.ccp-empty{ padding:16px; text-align:center; border:1px dashed var(--line); border-radius:14px; }

/* FICHE COMMANDE (orderFicheHTML) */
.of-title{ display:flex; align-items:center; gap:8px; }
.of-title .cc-mono{ font-size:.9rem; font-weight:700; }
.of{ display:flex; flex-direction:column; gap:12px; margin:4px 0 14px; font-family:var(--f-grotesk); }
.of-hero{ position:relative; min-height:200px; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#141216; display:flex; flex-direction:column; justify-content:flex-end; }
.of-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.of-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,8,10,0) 35%, rgba(20,18,22,.96)); pointer-events:none; }
.of-hero.of-hero-plain{ min-height:0; padding-top:44px; background:radial-gradient(120% 140% at 0% 0%, rgba(224,38,58,.14), transparent 55%), var(--panel-solid); }
.of-hero.of-hero-plain::after{ display:none; }
.of-pill{ position:absolute; left:12px; top:12px; z-index:1; background:rgba(9,8,10,.72) !important; }
.of-hero-txt{ position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; padding:12px 16px 14px; }
.of-hero-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.of-hero-row b{ font-size:.98rem; line-height:1.25; min-width:0; overflow-wrap:anywhere; }
.of-hero-row .cc-big{ font-size:2rem; flex:none; }
.of-cancel{ display:flex; }
.of-steps{ list-style:none; margin:0; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:var(--panel-solid); display:flex; flex-direction:column; }
.of-steps li{ position:relative; display:flex; gap:12px; padding-bottom:14px; }
.of-steps li:last-child{ padding-bottom:0; }
.of-steps li:not(:last-child)::before{ content:''; position:absolute; left:5px; top:16px; bottom:2px; width:2px; border-radius:2px; background:rgba(243,239,230,.12); }
.of-steps li.of-done:not(:last-child)::before{ background:rgba(243,239,230,.5); }
.of-dot{ flex:none; width:12px; height:12px; margin-top:3px; border-radius:50%; box-sizing:border-box; border:1.5px solid rgba(243,239,230,.36); }
.of-done .of-dot{ background:var(--bone); border-color:var(--bone); }
.of-now .of-dot{ background:#e0313f; border-color:#e0313f; box-shadow:0 0 0 4px rgba(224,49,63,.2); }
.of-step{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.of-step b{ font-size:.86rem; }
.of-next .of-step b, .of-off .of-step b{ color:rgba(243,239,230,.45); }
.of-now .cc-mono{ color:#ff6b77; }
.of-cards{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.of-card{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--panel-solid); }
.of-card b{ font-size:.92rem; overflow-wrap:anywhere; }
.of-card .cc-lab{ font-size:.58rem; }
.of-actions{
  /* Dernier élément de la fiche, collé au bas de la fenêtre pendant qu'on
     la lit : l'action principale reste sous le pouce. */
  position:sticky; bottom:-28px; z-index:3; display:flex; gap:10px; margin:16px -28px -28px; padding:14px 28px 28px;
  background:linear-gradient(180deg, rgba(21,20,24,0), var(--panel-solid) 26%);
}
.of-actions .of-main{ flex:1; justify-content:center; min-height:46px; }
.of-actions .of-call{ justify-content:center; min-height:46px; }
.of-actions .of-call svg{ width:18px; height:18px; }
@media (max-width: 640px){
  .of-actions .of-call span{ display:none; }
  .of-actions .of-main{ background:var(--bone); color:#0b0a0c; font-size:.8rem; }
}
@media (max-width: 380px){ .of-cards{ grid-template-columns:minmax(0, 1fr); } }
.of-tel{ align-self:flex-start; }

/* Relancer un versement */
.cc-board-late{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; justify-self:end; }
.cc-board-late .cc-cta{ padding:4px 8px; font-size:.6rem; }
.relance-btn[disabled]{ opacity:.55; cursor:default; }
.late-relance{ display:block; margin-top:6px; opacity:.85; }
@container cc (max-width: 400px){ .cc-board-late{ grid-column:3; align-items:flex-start; justify-self:start; } }

/* RECHERCHE ⌘K (openCommandPalette) */
.cmdk-overlay{
  position:fixed; inset:0; z-index:400; display:none; align-items:flex-start; justify-content:center;
  padding:max(12vh, calc(var(--sat) + 16px)) 16px 16px; background:rgba(6,5,7,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cmdk-overlay.show{ display:flex; animation:m-fade var(--m-fast) var(--m-ease) both; }
.cmdk{
  width:100%; max-width:600px; max-height:min(70vh, 560px); display:flex; flex-direction:column; overflow:hidden;
  border-radius:16px; border:1px solid var(--line-strong); background:var(--panel-solid);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95), var(--rim, none); font-family:var(--f-grotesk);
}
.cmdk-overlay.show .cmdk{ animation:m-scale-in var(--m-base) var(--m-ease) both; }
.cmdk-field{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.cmdk-field svg{ width:18px; height:18px; color:var(--bone-faint); flex:none; }
.cmdk-field input{ flex:1; min-width:0; background:none; border:0; outline:none; color:var(--bone); font:inherit; font-size:1rem; padding:4px 0; }
.cmdk-field input::-webkit-search-cancel-button{ display:none; }
.cmdk kbd{ font-family:var(--f-grotesk); font-size:.62rem; font-weight:600; padding:2px 6px; border-radius:5px; border:1px solid var(--line-strong); color:var(--bone-dim); }
.cmdk-list{ list-style:none; margin:0; padding:6px; overflow-y:auto; overscroll-behavior:contain; }
.cmdk-group{ padding:10px 10px 4px; font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,239,230,.45); }
.cmdk-item{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; cursor:pointer; }
.cmdk-item.active{ background:rgba(243,239,230,.07); box-shadow:inset 2px 0 0 var(--accent-bright); }
.cmdk-ico{ display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:8px; background:rgba(243,239,230,.05); color:var(--bone-dim); }
.cmdk-ico svg{ width:15px; height:15px; }
.cmdk-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cmdk-txt b{ font-size:.86rem; font-weight:600; color:var(--bone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdk-txt span{ font-size:.72rem; color:rgba(243,239,230,.5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdk-empty{ padding:22px 12px; text-align:center; font-size:.82rem; color:rgba(243,239,230,.5); }
.cmdk-foot{ display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--line); font-size:.68rem; color:rgba(243,239,230,.45); }
.cmdk-foot kbd{ margin-right:3px; }
html.cmdk-open{ overflow:hidden; }
@media (hover: none){ .cmdk-foot, .cmdk-field kbd{ display:none; } }

/* CAPITAL · MOIS PAR MOIS (capitalMonthsHTML) */
.capital-months{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:14px; }
@media (max-width: 860px){ .capital-months{ grid-template-columns:minmax(0, 1fr); } }
.cm-chart{ display:flex; flex-direction:column; gap:14px; }
.cm-cols{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; align-items:end; }
.cm-col{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.cm-vals{ display:flex; flex-direction:column; align-items:center; gap:1px; font-family:var(--f-grotesk); font-variant-numeric:tabular-nums; }
.cm-vals b{ font-size:.82rem; color:var(--bone); }
.cm-vals span{ font-size:.68rem; color:rgba(243,239,230,.5); }
.cm-bars{ display:flex; align-items:flex-end; gap:4px; height:150px; }
.cm-bar{ display:block; width:18px; border-radius:5px 5px 2px 2px; }
.cm-bar.rev{ background:var(--bone); }
.cm-bar.exp{ background:#5a5d66; }
.cm-label{ font-family:var(--f-grotesk); font-size:.7rem; color:rgba(243,239,230,.55); text-align:center; white-space:nowrap; }
.cm-legend{ display:flex; gap:16px; font-family:var(--f-grotesk); font-size:.7rem; color:rgba(243,239,230,.6); }
.cm-legend span{ display:inline-flex; align-items:center; gap:6px; }
.cm-legend i{ width:9px; height:9px; border-radius:2px; }
.cm-legend i.rev{ background:var(--bone); } .cm-legend i.exp{ background:#5a5d66; }
.cm-cats ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-family:var(--f-grotesk); }
.cm-cats li{ display:grid; grid-template-columns:minmax(0, 7rem) minmax(0, 1fr) auto; align-items:center; gap:10px; font-size:.78rem; }
.cm-cats li > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(243,239,230,.8); }
.cm-cats li b{ font-variant-numeric:tabular-nums; }
.cm-cat-bar{ height:6px; border-radius:99px; background:rgba(243,239,230,.06); overflow:hidden; }
.cm-cat-bar span{ display:block; height:100%; border-radius:inherit; background:rgba(243,239,230,.4); }

/* COQUE sptcrp 5.5 : la marque, la carte de la personne connectée en bas
   du menu, la recherche visible dans la barre du haut. */
.sidebar-brand .brand-name{ display:flex; flex-direction:column; gap:2px; line-height:1; font-size:1.05rem; letter-spacing:.06em; }
.sidebar-brand .brand-ver{ font-family:ui-monospace, 'SF Mono', Menlo, monospace; font-size:.6rem; letter-spacing:.08em; text-transform:none; color:var(--bone-faint); }
.sidebar-foot .sidebar-user{
  margin:0 0 12px; padding:12px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg, rgba(244,241,235,.04), rgba(244,241,235,.015));
}
.sidebar-user .sr-head{ display:flex; align-items:center; gap:10px; min-width:0; }
.sidebar-user .sr-av{ width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--bone); color:#0b0a0c; font-family:var(--f-grotesk); font-weight:800; font-size:.78rem; }
.sidebar-user .sr-id{ min-width:0; }
.sidebar-user .sr-role{ text-transform:none; letter-spacing:.01em; font-size:.72rem; }
.sidebar-user .sr-since{ display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-family:var(--f-grotesk); font-size:.68rem; color:var(--bone-faint); }
.sidebar-user .sr-since b{ font-weight:500; color:var(--bone-dim); white-space:nowrap; }
/* La carte est un bouton (js/portal.js openAccountMenu) : même dessin,
   plus la roue des Paramètres qu'elle remplace dans le menu. */
.sidebar-foot .sidebar-user{
  display:block; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  transition: border-color var(--m-fast) var(--m-ease), background-color var(--m-fast) var(--m-ease), transform var(--m-instant) var(--m-ease);
}
.sidebar-user .sr-id, .sidebar-user .sr-name, .sidebar-user .sr-role{ display:block; }
.sidebar-user .sr-id{ flex:1; }
.sidebar-user .sr-since[hidden]{ display:none; }
/* La roue se pose dans le coin, à hauteur du prénom : la ligne du rôle
   (« PDG · 40,05 % du capital ») garde toute la largeur de la carte. */
.sidebar-foot .sidebar-user{ position:relative; }
.sidebar-user .sr-name{ padding-right:30px; }
.sidebar-user .sr-gear{ position:absolute; top:9px; right:9px; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:var(--bone-faint);
  border:1px solid transparent; transition: color var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease), transform var(--m-base) var(--m-ease); }
.sidebar-user .sr-gear svg{ width:16px; height:16px; }
.sidebar-foot .sidebar-user:hover, .sidebar-foot .sidebar-user.is-open{ border-color:var(--line-strong); background:linear-gradient(180deg, rgba(244,241,235,.06), rgba(244,241,235,.02)); }
.sidebar-user:hover .sr-gear, .sidebar-user.is-open .sr-gear{ color:var(--bone); border-color:var(--line); }
.sidebar-user.is-open .sr-gear{ transform:rotate(60deg); }
.sidebar-foot .sidebar-user:active{ transform:scale(var(--m-press-scale)); }
.sidebar-foot .sidebar-user:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }

/* Le menu du compte : posé au-dessus de la carte (ou à droite dans la
   barre réduite), en position fixe pour ne jamais être coupé par le
   défilement du menu. Entrée courte, sortie plus courte ; rien sous
   mouvement réduit (les jetons tombent à 0). */
.acct-pop{
  position:fixed; z-index:170; overflow-y:auto; overscroll-behavior:contain; padding:6px;
  background:var(--panel-solid); border:1px solid var(--line-strong); border-radius:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0; transform:translateY(var(--m-nudge)) scale(.985); transform-origin:bottom left;
  transition: opacity var(--m-fast) var(--m-ease-exit), transform var(--m-fast) var(--m-ease-exit);
  pointer-events:none;
}
.acct-pop.is-open{ opacity:1; transform:none; pointer-events:auto; transition-duration:var(--m-base); transition-timing-function:var(--m-ease); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .acct-pop{ background:rgba(21,20,24,.86); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%); }
}
.acct-pop.is-busy{ cursor:progress; }
.acct-pop.is-busy .acct-row{ pointer-events:none; }
.acct-label{ font-family:var(--f-grotesk); font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); padding:10px 10px 6px; }
.acct-group{ display:flex; flex-direction:column; gap:2px; }
.acct-row{
  display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:9px 10px; border:0; border-radius:11px;
  background:none; color:var(--bone-dim); font:inherit; text-align:left; cursor:pointer;
  transition: background-color var(--m-fast) var(--m-ease), color var(--m-fast) var(--m-ease);
}
.acct-row:hover, .acct-row:focus-visible, .acct-loc:focus-within{ background:rgba(244,241,235,.06); color:var(--bone); outline:none; }
.acct-row:focus-visible, .acct-loc:has(.acct-switch:focus-visible){ box-shadow:inset 0 0 0 1px var(--accent-line); }
.acct-row.is-current{ cursor:default; color:var(--bone); background:rgba(244,241,235,.035); }
.acct-row[aria-busy="true"] .acct-end{ animation:acctPulse 1s var(--m-ease-in-out) infinite alternate; }
@keyframes acctPulse{ to{ opacity:.25; } }
.acct-ico{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; background:rgba(244,241,235,.05); border:1px solid var(--line); color:inherit; }
.acct-ico svg{ width:17px; height:17px; }
.acct-row.is-current .acct-ico{ background:var(--bone); border-color:transparent; color:#0b0a0c; }
.acct-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.acct-txt b{ font-family:var(--f-grotesk); font-size:.84rem; font-weight:700; letter-spacing:.005em; color:inherit; }
.acct-txt small{ font-size:.7rem; color:var(--bone-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-end{ flex:none; width:18px; height:18px; color:var(--bone-faint); }
.acct-end svg{ width:18px; height:18px; display:block; }
.acct-row.is-current .acct-end{ color:var(--good); }
.acct-sep{ height:1px; background:var(--line); margin:6px 6px; }
.acct-pin{ display:flex; gap:8px; padding:2px 10px 10px 56px; }
.acct-pin[hidden]{ display:none; }
.acct-pin input{ flex:1; min-width:0; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  color:var(--bone); font:inherit; font-size:16px; letter-spacing:.3em; }
.acct-pin input::placeholder{ letter-spacing:normal; font-size:.78rem; color:var(--bone-faint); }
.acct-pin input:focus{ outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px rgba(224,38,58,.12); }
.acct-pin .btn-sm{ flex:none; }
/* L'interrupteur de la position. */
.acct-loc{ cursor:pointer; }
.acct-switch{
  -webkit-appearance:none; appearance:none; flex:none; position:relative; width:40px; height:24px; margin:0; border-radius:999px; cursor:pointer;
  background:rgba(244,241,235,.12); border:1px solid var(--line-strong);
  transition: background-color var(--m-fast) var(--m-ease), border-color var(--m-fast) var(--m-ease);
}
.acct-switch::before{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--bone-dim);
  box-shadow:0 1px 3px rgba(0,0,0,.4); transition: transform var(--m-fast) var(--m-ease), background-color var(--m-fast) var(--m-ease);
}
.acct-switch:checked{ background:var(--good); border-color:transparent; }
.acct-switch:checked::before{ transform:translateX(16px); background:#fff; }
.acct-switch:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }

@media (min-width: 981px){
  #app-shell.sidebar-collapsed .sidebar-foot .sidebar-user{ opacity:1; width:auto; padding:6px 0; margin:0 0 10px; border:0; background:none; pointer-events:auto; display:flex; justify-content:center; }
  #app-shell.sidebar-collapsed .sidebar-user .sr-id, #app-shell.sidebar-collapsed .sidebar-user .sr-since, #app-shell.sidebar-collapsed .sidebar-user .sr-gear{ display:none; }
  #app-shell.sidebar-collapsed .sidebar-brand .brand-name{ display:none; }
}
.topbar-search{ width:auto; gap:10px; }
.topbar-search .ts-text, .topbar-search .ts-kbd{ display:none; }
@media (min-width: 1100px){
  .topbar-search{ min-width:300px; justify-content:flex-start; padding:0 12px 0 14px; color:var(--bone-faint); }
  .topbar-search .ts-text{ display:inline; flex:1; text-align:left; font-family:var(--f-grotesk); font-size:.8rem; }
  .topbar-search .ts-kbd{ display:inline; font-family:ui-monospace, 'SF Mono', Menlo, monospace; font-size:.66rem; padding:3px 6px; border-radius:5px; background:rgba(243,239,230,.07); color:var(--bone-dim); }
}

/* Finitions sptcrp 5.5 du centre de commande */
.cc-wm{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.cc-watermark{ position:absolute; right:-22px; top:-14px; width:170px; height:auto; opacity:.05; mix-blend-mode:screen; filter:grayscale(1); pointer-events:none; }
.cc-treso > *:not(.cc-wm){ position:relative; }
.cc-card .badge svg{ width:12px; height:12px; }
.cc-range{ display:inline-flex; gap:4px; }
.cc-range button{ padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:none; color:rgba(243,239,230,.6); font-family:var(--f-grotesk); font-size:.68rem; font-weight:700; cursor:pointer; transition:background-color var(--m-fast) var(--m-ease), color var(--m-fast) var(--m-ease); }
.cc-range button[aria-pressed="true"]{ background:var(--bone); border-color:var(--bone); color:#0b0a0c; }
.cc-range button:focus-visible{ outline:2px solid rgba(243,239,230,.7); outline-offset:2px; }
.cc-mark{ position:absolute; top:-2px; transform:translateX(-50%); white-space:nowrap; font-size:.64rem; font-weight:700; color:var(--warn); background:rgba(14,13,16,.85); padding:1px 6px; border-radius:6px; }
.cc-live-pill{ display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; border-radius:999px; background:rgba(224,49,63,.14); color:#ff6b77; font-size:.64rem; font-weight:700; }
.cc-live-pill .cc-pulse{ width:6px; height:6px; box-shadow:0 0 0 3px rgba(224,49,63,.2); }
.cc-alert-txt{ display:flex; flex-direction:column; gap:2px; }
.cc-alert-txt b{ font-size:.82rem; font-weight:600; color:var(--bone); }
.cc-alert-txt span{ font-size:.72rem; color:rgba(243,239,230,.55); }
.cc-balanced{ margin-top:auto; font-family:var(--f-grotesk); font-size:.74rem; color:var(--good); }
.btn-sm.cc-new{ background:var(--bone); color:#0b0a0c; border-color:var(--bone); box-shadow:none; }
.btn-sm.cc-new:hover{ filter:brightness(.94); }
.of-pay{ grid-column:1 / -1; }
.of-pay .cc-line{ align-items:center; }
.of-actions .btn-sm svg{ width:16px; height:16px; }
.of-actions .of-main{ white-space:nowrap; letter-spacing:.03em; }
@media (max-width: 400px){ .of-actions .of-main{ font-size:.72rem; padding-inline:12px; } }

/* CAPITAL & FONDS (capital55HTML) */
.cap55{ display:flex; flex-direction:column; gap:16px; container:cap / inline-size; }
.cap55-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cap55-head h2{ margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1; text-transform:uppercase; }
.cap55-kpis{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
.cap55-kpis .cc-card{ gap:8px; }
@container cap (min-width: 640px){ .cap55-kpis{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.cap55-split{ gap:16px; }
.cap55-split .cc-col b{ font-size:.92rem; font-weight:600; color:var(--bone); }
.cap55-bar{ display:flex; gap:4px; height:64px; }
.cap55-bar span{ display:flex; align-items:flex-end; min-width:0; padding:10px 12px; border-radius:12px; }
.cap55-bar b{ font-family:var(--f-display); font-weight:400; font-size:1.3rem; white-space:nowrap; }
@container cap (max-width: 520px){ .cap55-bar{ height:44px; } .cap55-bar span{ padding:8px; } .cap55-bar b{ font-size:.9rem; } }
.cap55-funds{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
@container cap (min-width: 760px){ .cap55-funds{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.cap55-funds > div{ display:flex; flex-direction:column; gap:4px; min-width:0; font-size:.78rem; }
.cap55-funds i{ width:9px; height:9px; border-radius:2px; flex:none; }
.cap55-amt{ font-family:var(--f-display); font-size:1.5rem; line-height:1.1; font-variant-numeric:tabular-nums; }
.cap55-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; align-items:start; }
@container cap (min-width: 900px){ .cap55-grid{ grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); } }
.cap55-fund{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.cap55-side{ min-width:0; }
.cap55-side .section-block{ margin:0; }
.cap55-side .capital-months{ grid-template-columns:minmax(0, 1fr); }
.cap55-parts{ display:flex; flex-direction:column; gap:12px; }
.cap55-parts .panel-head{ margin-bottom:4px; }
.cap55-part{ display:grid; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:12px; font-family:var(--f-grotesk); }
.cap55-part-mid{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.cap55-part-mid b{ font-size:.86rem; }
.cap55-part-bar{ height:6px; border-radius:99px; background:rgba(243,239,230,.07); overflow:hidden; }
.cap55-part-bar span{ display:block; height:100%; border-radius:inherit; }
.cap55-recent .task-list{ margin:0; }
.cap55-recent .btn-sm svg{ width:14px; height:14px; }

/* iPad : la barre étroite de sptcrp 5.5, avec les libellés sous les icônes
   (au toucher, il n'y a pas de survol pour faire apparaître une bulle). */
.nav-short{ display:none; }
@media (min-width: 981px) and (pointer: coarse){
  #app-shell.sidebar-collapsed{ --sidebar-w-collapsed: 84px; }
  #app-shell.sidebar-collapsed .sidebar-nav-label{ display:none; }
  #app-shell.sidebar-collapsed .sidebar-nav.grouped{ gap:6px; }
  #app-shell.sidebar-collapsed .sidebar-nav button{ flex-direction:column; gap:4px; padding:9px 0; border-radius:14px; }
  #app-shell.sidebar-collapsed .sidebar-nav button .nav-short{ display:block; font-family:var(--f-grotesk); font-size:.56rem; font-weight:600; letter-spacing:.01em; line-height:1.1; text-align:center; max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #app-shell.sidebar-collapsed .sidebar-nav button svg{ width:20px; height:20px; }
  #app-shell.sidebar-collapsed .sidebar-nav button > span{ display:none; }
  #app-shell.sidebar-collapsed .sidebar-nav button{ padding:8px 0 7px; }
  #app-shell.sidebar-collapsed .sidebar-nav button::after,
  #app-shell.sidebar-collapsed .sidebar-logout::after{ display:none; }
  #app-shell.sidebar-collapsed .nav-badge{ top:2px; right:12px; }
}
.cap55-note{ margin:18px 0 0; max-width:72ch; font-size:.74rem; line-height:1.55; color:var(--bone-faint); }
.cap55-parts .fund-disclaimer{ margin:4px 0 0; }

/* =========================================================
   sptcrp 5.5 — LE LANGAGE COMMUN DE TOUTES LES PAGES
   Ce qui suit ne touche à aucune donnée et à aucun comportement : les
   pages gardent leurs blocs, ils prennent l'allure de la maquette —
   cartes à 14 px, chiffres en Anton os, étiquettes Archivo espacées,
   onglets en pastilles, action principale en os, plus de barre rouge
   devant les titres. Chargé en dernier, il l'emporte sans !important.
   ========================================================= */
.section-block{ margin-bottom:34px; }
.section-block-head{ margin-bottom:14px; }
.section-block-head h2{
  padding-left:0; font-family:var(--f-grotesk); font-weight:700; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(243,239,230,.55);
}
.section-block-head h2::before{ display:none; }
.section-block-head p{ font-size:.8rem; color:rgba(243,239,230,.55); margin-top:6px; }
/* Le premier titre d'une page est son titre : grand, comme « Capital & Fonds ». */
#page-container > .section-block-head:first-child h2,
#page-container > .section-block:first-child > .section-block-head h2{
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1;
  letter-spacing:.01em; color:var(--bone); text-wrap:balance;
}
#page-container > .section-block-head:first-child,
#page-container > .section-block:first-child > .section-block-head{ margin-bottom:20px; }

.stat-grid{ gap:14px; }
.stat-card{
  border-radius:14px; padding:18px 20px; border:1px solid var(--line);
  background:linear-gradient(180deg, #1a171c, #141216); box-shadow:var(--rim, none);
}
.stat-card::after{ display:none; }
.stat-card:hover{ transform:none; border-color:var(--line-strong); box-shadow:var(--rim, none); }
.stat-card .sc-label{ font-family:var(--f-grotesk); font-size:.62rem; font-weight:700; letter-spacing:.16em; color:rgba(243,239,230,.5); margin-bottom:10px; }
.stat-card .sc-value{
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.8rem, 2.6vw, 2.3rem); line-height:1;
  background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--bone);
}
.stat-card .sc-value.good{ background:none; color:var(--good); }
.stat-card .sc-value.accent{ background:none; color:#ff6b77; }
.stat-card .sc-sub{ font-size:.74rem; color:rgba(243,239,230,.5); margin-top:8px; }
.hero-stat-card{ border-radius:18px; background:radial-gradient(110% 90% at 100% 0%, rgba(243,239,230,.07), transparent 55%), linear-gradient(180deg, #1b191e, #121014); }
.hero-stat-card::after{ display:none; }
.hero-stat-card .hs-value{ background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--bone); text-shadow:none; }

.panel{ border-radius:14px; background:linear-gradient(180deg, #1a171c, #141216); }
.panel-head{ margin-bottom:16px; }
.panel-head h3{
  font-family:var(--f-grotesk); font-weight:700; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(243,239,230,.6);
}

table.data-table thead th{ font-family:var(--f-grotesk); font-size:.6rem; letter-spacing:.14em; color:rgba(243,239,230,.45); }
table.data-table td{ font-size:.8rem; }
table.data-table td .order-items > span:last-child{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:22ch; }

/* Onglets et filtres : des pastilles, l'actif en os. */
.period-tabs{ background:rgba(255,255,255,.03); border:1px solid var(--line); }
.period-tabs button.active, .of-tab.active{ background:var(--bone); color:#0b0a0c; border-color:var(--bone); box-shadow:none; }
.of-tab{ border-radius:999px; }

/* L'action principale en os (comme « Nouvelle commande » et « Marquer
   comme livrée ») ; le rouge reste à ce qui est vivant ou dangereux. */
.btn-sm:not(.ghost):not(.danger){ background:var(--bone); color:#0b0a0c; border:1px solid var(--bone); box-shadow:none; }
.btn-sm:not(.ghost):not(.danger):hover{ background:#fff; color:#0b0a0c; box-shadow:none; filter:none; }
.btn-sm:not(.ghost):not(.danger) svg{ color:currentColor; }
.btn-sm.danger{ background:rgba(224,49,63,.14); color:#ff6b77; border:1px solid rgba(224,49,63,.35); box-shadow:none; }
.btn-sm.danger:hover{ background:rgba(224,49,63,.22); color:#ff8a93; }

.modal-field input, .modal-field select, .modal-field textarea,
.ledger-filters input, .ledger-filters select{ border-radius:10px; }
.empty-state{ border-radius:12px; }
.modal-box{ border-radius:20px; }

/* Les accueils des autres rôles : le même en-tête que le centre de commande. */
.page-hello{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:22px; }
.page-hello .cc-hello{ font-family:var(--f-grotesk); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,239,230,.5); }
.page-hello h2{ margin:6px 0 0; font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1; text-transform:uppercase; }
.page-hello p{ margin:0; max-width:52ch; font-size:.8rem; color:rgba(243,239,230,.55); }

/* Connexion, à la manière de sptcrp 5.5 : le pendentif, la marque, l'action en os. */
.login-card{ border-radius:22px; background:radial-gradient(110% 80% at 50% 0%, rgba(243,239,230,.06), transparent 55%), linear-gradient(180deg, #1b191e, #121014); }
.btn-access{ background:var(--bone); color:#0b0a0c; box-shadow:none; }
.btn-access:hover{ background:#fff; color:#0b0a0c; }
.role-btn.active{ background:var(--bone); color:#0b0a0c; border-color:var(--bone); box-shadow:none; }

/* Un seul titre par page, dans la page : la barre du haut ne garde que
   la recherche, les cloches et le rôle (comme le Mac de sptcrp 5.5) ;
   sur téléphone elle rappelle discrètement où l'on est. */
@media (min-width: 981px){ .app-topbar h1#topbar-title{ display:none; } }
@media (max-width: 980px){
  .app-topbar h1#topbar-title{ font-family:var(--f-grotesk); font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,239,230,.55); }
}
.sm2 .sm-head-title h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1; text-transform:uppercase; }
.sm2 .sm-head-title h2 .spotmap-live-tag{ font-family:var(--f-grotesk); text-transform:uppercase; }

/* ---------- Accueils détaillant & actionnaire (sptcrp 5.5) ----------
   Le même centre de commande que le PDG, à leur mesure. */
.cc-me .me-due.is-due{ border-color:rgba(224,49,63,.38); background:radial-gradient(120% 90% at 100% 0%, rgba(224,49,63,.16), transparent 60%), var(--grad-surface, var(--panel-solid)); }
.cc-me .me-due.is-due .cc-big{ color:#ff8a93; }
.cc-me .me-part{ background:radial-gradient(110% 90% at 100% 0%, rgba(243,239,230,.08), transparent 55%), var(--grad-surface, var(--panel-solid)); }
.cc-me .me-rank{ font-size:clamp(2.6rem, 5vw, 3.4rem); }
.cc-me .me-fc{ color:var(--good); }
.cc-me .me-duo{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cc-me .me-rows{ display:flex; flex-direction:column; gap:8px; }
.cc-me .me-tasks li{ cursor:pointer; border-radius:8px; padding:4px 6px; margin:0 -6px; transition:background-color var(--m-fast) var(--m-ease); }
.cc-me .me-tasks li:hover{ background:rgba(243,239,230,.05); }
.cc-me .me-tasks li:focus-visible{ outline:2px solid rgba(243,239,230,.7); outline-offset:1px; }
.cc-me .me-tasks li > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-me .me-hist summary{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; }
.cc-me .me-hist summary::-webkit-details-marker{ display:none; }
.cc-me .me-hist[open] summary{ margin-bottom:10px; }
.cc-me .donut-wrap{ flex-direction:column; align-items:center; gap:14px; }
.cc-me .donut-wrap canvas{ width:150px !important; height:150px !important; }
.cc-me .donut-legend{ width:100%; }
.cc-me .ccp-tiles .ccp-tile{ padding:10px 6px; }
/* Sur téléphone, ce qu'il y a à livrer passe juste après l'argent à remettre. */
@container cc (max-width: 619px){ .cc-me .me-due{ order:-2; } .cc-me .me-live{ order:-1; } }

/* =========================================================
   iPHONE — la coque de sptcrp 5.5
   En haut : le pendentif, « Bonjour Prénom », la date (ou la page),
   une seule cloche et l'avatar. En bas : la barre flottante arrondie,
   le « + » rouge au centre. Le menu complet passe par « Menu » et
   par l'avatar ; la recherche reste dans la barre, en icône.
   ========================================================= */
.tb-pendant, .tb-av, .tb-hello{ display:none; }
.tb-titles{ display:flex; flex-direction:column; min-width:0; }
.np-push{ display:none; }
@media (max-width: 640px){
  .app-topbar{ padding:calc(10px + var(--sat)) 16px 10px; gap:10px; background:rgba(10,9,12,.78); border-bottom:0; box-shadow:none; }
  .app-topbar > div:first-child{ gap:10px !important; min-width:0; flex:1; }
  .app-topbar > div:last-child{ gap:8px !important; }
  .mobile-menu-btn, #topbar-role-badge{ display:none !important; }
  .tb-pendant{ display:block; width:40px; height:40px; object-fit:contain; flex:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
  .tb-hello{ display:block; font-family:var(--f-grotesk); font-size:.74rem; font-weight:500; color:rgba(243,239,230,.62); line-height:1.2; }
  .app-topbar h1#topbar-title{ font-size:0; letter-spacing:0; color:transparent; background:none; -webkit-background-clip:initial; background-clip:initial; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .app-topbar h1#topbar-title::after{ content:attr(data-phone); font-family:var(--f-display); font-weight:400; font-size:1.42rem; letter-spacing:.01em; text-transform:uppercase; color:var(--bone); }
  .app-topbar .icon-btn{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.04); }
  #search-btn{ width:40px; padding:0; justify-content:center; }
  #search-btn .ts-text, #search-btn .ts-kbd{ display:none; }
  body.has-notif #push-notif-btn{ display:none !important; }
  .np-push{ display:inline-flex; margin-left:auto; font-size:.66rem; min-height:30px; }
  .notif-panel-head{ display:flex; align-items:center; gap:10px; }
  #notif-badge{ min-width:9px; width:9px; height:9px; padding:0; font-size:0; top:7px; right:8px; border:2px solid #111014; }
  .tb-av{ display:flex; align-items:center; justify-content:center; flex:none; width:42px; height:42px; border-radius:50%; border:0; background:var(--bone); color:#0b0a0c; font-family:var(--f-grotesk); font-weight:800; font-size:.86rem; letter-spacing:.02em; cursor:pointer; }
  .tb-av:active{ transform:scale(var(--m-press-scale)); }
  .tb-av:focus-visible{ outline:2px solid var(--bone); outline-offset:2px; }
  /* Le titre de l'accueil est déjà dans la barre du haut. */
  body.on-dashboard .ccp-head, body.on-dashboard .cc-me > .cc-head > .cc-title, body.on-dashboard .page-hello > div{ display:none; }
  body.on-dashboard .cc-me > .cc-head{ justify-content:flex-start; }
  body.on-dashboard .app-content{ padding-top:10px; }

  /* La barre du bas : une pilule flottante. */
  .mobile-dock{
    left:12px; right:12px; bottom:calc(10px + var(--sab)); padding:6px 8px;
    border:1px solid rgba(243,239,230,.1); border-radius:28px;
    background:rgba(24,22,27,.9); box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .mobile-dock button{ min-height:52px; font-size:.68rem; }
  .mobile-dock .dock-add span{ display:none; }
  .mobile-dock .dock-add svg{ width:50px; height:50px; margin:-4px 0; padding:14px; border-radius:50%; background:linear-gradient(180deg, #e33a46, #c41a2a); box-shadow:0 8px 24px rgba(224,38,58,.5), inset 0 1px 0 rgba(255,255,255,.25); }
  body.has-dock .app-content{ padding-bottom:calc(110px + var(--sab)); }

  /* Trésorerie : le pendentif chrome noir en filigrane, le liseré clair, le point du jour. */
  .ccp-treso{ overflow:hidden; border-color:rgba(243,239,230,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.02); }
  .ccp-treso > *:not(.ccp-wm){ position:relative; z-index:1; }
  .ccp-wm{ position:absolute; right:-6px; top:8px; width:40%; max-width:170px; height:auto; z-index:0; pointer-events:none;
    filter:brightness(.6) contrast(1.15) saturate(.8); opacity:.42;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, #000 55%, transparent 100%);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite:intersect; }
  .ccp-treso .cc-chart-area{ position:relative; }
  .ccp-dot{ position:absolute; right:-2px; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18), 0 0 12px rgba(255,255,255,.7); }
  /* Ventes : le chiffre en grotesque, comme la maquette ; pas d'étiquette record sur ce petit graphique. */
  .ccp-ventes-txt .cc-big{ font-family:var(--f-grotesk); font-weight:700; font-size:1.75rem; letter-spacing:-.01em; }
  .ccp-ventes-txt .cc-big small{ font-size:1em; color:inherit; margin:0; }
  .ccp-ventes .cc-record{ display:none; }
}

/* =========================================================
   CONNEXION — « Enter the corporation » (sptcrp 5.5)
   La photo LE SYSTÈME en fond, le pendentif chrome qui flotte et
   qu'un reflet traverse, une carte de verre à deux étapes. Le
   mouvement est décoratif : il ne touche que transform/opacity, se
   met en pause onglet caché, et disparaît sous mouvement réduit.
   ========================================================= */
#login-screen{
  position:relative; isolation:isolate; overflow:hidden;
  flex-direction:column; justify-content:center; gap:22px;
  padding:calc(70px + var(--sat, 0px)) 20px calc(24px + var(--sab, 0px));
  background:#060507;
}
#login-screen .lg-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
#login-screen .lg-photo img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:22% 42%; filter:grayscale(.35) contrast(1.1) brightness(.5); opacity:.55; transform:scale(1.06); }
#login-screen .lg-glow{ position:absolute; inset:0; background:
  radial-gradient(60% 45% at 50% 22%, rgba(224,38,58,.32), transparent 70%),
  radial-gradient(90% 60% at 50% 110%, rgba(224,38,58,.18), transparent 70%),
  linear-gradient(180deg, rgba(6,5,7,.55) 0%, rgba(6,5,7,.35) 35%, rgba(6,5,7,.9) 78%, #060507 100%); }
#login-screen .lg-grid{ position:absolute; inset:0; opacity:.22;
  background-image:linear-gradient(rgba(243,239,230,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(243,239,230,.06) 1px, transparent 1px);
  background-size:44px 44px; -webkit-mask-image:radial-gradient(70% 55% at 50% 40%, #000, transparent 75%); mask-image:radial-gradient(70% 55% at 50% 40%, #000, transparent 75%); }
#login-screen .lg-grain{ position:absolute; inset:-50%; opacity:.09; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

#login-screen .lg-top{ position:absolute; top:calc(18px + var(--sat, 0px)); left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:var(--f-grotesk); }
#login-screen .lg-mark{ font-family:var(--f-display); font-size:1rem; letter-spacing:.14em; color:var(--bone); }
#login-screen .lg-mark sup{ font-size:.5em; margin-left:2px; color:rgba(243,239,230,.6); }
#login-screen .lg-status{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:99px; border:1px solid rgba(243,239,230,.12); background:rgba(10,9,12,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:.66rem; font-weight:600; letter-spacing:.04em; color:rgba(243,239,230,.72); white-space:nowrap; }
#login-screen .lg-status i{ width:7px; height:7px; border-radius:50%; background:#5fd08a; box-shadow:0 0 0 3px rgba(95,208,138,.18); }
#login-screen .lg-status b{ font-variant-numeric:tabular-nums; color:var(--bone); font-weight:700; }

#login-screen .lg-stage{ width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:22px; }
#login-screen .lg-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
#login-screen .lg-pendant{ position:relative; width:132px; aspect-ratio:384/520; margin-bottom:6px; animation:lg-float 6s var(--m-ease-in-out) infinite; }
#login-screen .lg-pendant img{ position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(224,38,58,.25)); }
#login-screen .lg-halo{ position:absolute; left:50%; top:52%; width:230%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(224,38,58,.32) 0%, rgba(224,38,58,.1) 35%, transparent 65%); }
#login-screen .lg-sheen{ position:absolute; inset:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image:url('../assets/pendant-chrome.png'); -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  mask-image:url('../assets/pendant-chrome.png'); mask-size:contain; mask-repeat:no-repeat; mask-position:center; }
#login-screen .lg-sheen span{ position:absolute; top:-20%; bottom:-20%; left:0; width:45%; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.0) 20%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 80%, transparent 100%); transform:translateX(-160%) skewX(-12deg); animation:lg-sheen 5.5s var(--m-ease-in-out) infinite 1.2s; mix-blend-mode:overlay; }
@keyframes lg-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes lg-sheen{ 0%{ transform:translateX(-160%) skewX(-12deg); opacity:0; } 8%{ opacity:1; } 38%{ transform:translateX(330%) skewX(-12deg); opacity:1; } 39%,100%{ transform:translateX(330%) skewX(-12deg); opacity:0; } }
body.lg-paused #login-screen *{ animation-play-state:paused !important; }

#login-screen .lg-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-grotesk); font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,239,230,.6); }
#login-screen .lg-eyebrow i{ width:6px; height:6px; border-radius:50%; background:#e0313f; box-shadow:0 0 10px #e0313f; }
#login-screen .login-title{ margin:0; font-family:var(--f-display); font-weight:400; text-transform:uppercase; line-height:.9; letter-spacing:.005em;
  font-size:clamp(2.6rem, 11vw, 3.4rem); color:var(--bone); background:none; -webkit-text-fill-color:currentColor; text-wrap:balance; }
#login-screen .login-title em{ font-style:normal; color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.2px var(--bone); }
#login-screen .login-sub{ margin:0; max-width:34ch; font-size:.84rem; line-height:1.55; color:rgba(243,239,230,.6); font-weight:400; }

#login-screen .login-card{
  width:100%; max-width:440px; padding:22px 22px 20px; border-radius:24px;
  border:1px solid rgba(243,239,230,.14);
  background:linear-gradient(180deg, rgba(28,26,31,.78), rgba(14,13,16,.86));
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
}
#login-screen .lg-steps{ display:flex; gap:8px; margin-bottom:18px; }
#login-screen .lg-steps span{ flex:1; display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:2px solid rgba(243,239,230,.1); font-family:var(--f-grotesk); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,239,230,.38); transition:color var(--m-base) var(--m-ease), border-color var(--m-base) var(--m-ease); }
#login-screen .lg-steps b{ font-family:ui-monospace, 'SF Mono', Menlo, monospace; font-weight:600; letter-spacing:0; }
#login-screen .lg-steps span.on{ color:var(--bone); border-color:#e0313f; }

#login-screen .login-field{ margin-bottom:16px; }
#login-screen .login-field label{ color:rgba(243,239,230,.5); }
#login-screen .lg-input{ position:relative; }
#login-screen .lg-input svg{ position:absolute; left:15px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:rgba(243,239,230,.45); pointer-events:none; }
#login-screen .login-field input[type="text"]:not(.pin-box){ height:54px; padding:0 16px 0 44px; border-radius:14px; font-size:1rem; background:rgba(8,7,10,.7); border:1px solid rgba(243,239,230,.12); transition:border-color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease); }
#login-screen .login-field input:focus{ border-color:rgba(224,49,63,.7) !important; box-shadow:0 0 0 4px rgba(224,49,63,.16); }
#login-screen .pin-boxes{ gap:10px; flex:1; }
#login-screen .pin-boxes input{ height:62px; aspect-ratio:auto; border-radius:14px; font-size:1.5rem; background:rgba(8,7,10,.7); border:1px solid rgba(243,239,230,.12); transition:border-color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease), transform var(--m-instant) var(--m-ease); }
#login-screen .pin-boxes input.filled{ border-color:rgba(243,239,230,.5); background:rgba(243,239,230,.06); }
#login-screen .pin-toggle{ color:rgba(243,239,230,.55); font-weight:700; padding:10px 4px; }

#login-screen .btn-access{ width:100%; height:56px; margin-top:6px; display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:16px;
  font-family:var(--f-grotesk); font-size:.86rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  background:linear-gradient(180deg, #e8404c, #c21828); color:#fff; box-shadow:0 14px 34px -12px rgba(224,38,58,.85), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform var(--m-instant) var(--m-ease), box-shadow var(--m-fast) var(--m-ease), opacity var(--m-fast) var(--m-ease); }
#login-screen .btn-access svg{ width:18px; height:18px; transition:transform var(--m-fast) var(--m-ease); }
#login-screen .btn-access:not(:disabled):hover svg{ transform:translateX(3px); }
#login-screen .btn-access:not(:disabled):active{ transform:scale(var(--m-press-scale)); }
#login-screen .btn-access:disabled{ background:rgba(243,239,230,.08); color:rgba(243,239,230,.38); box-shadow:none; cursor:not-allowed; }
#login-screen .lg-note{ display:flex; align-items:center; justify-content:center; gap:7px; margin:14px 0 0; font-size:.7rem; color:rgba(243,239,230,.42); }
#login-screen .lg-note svg{ width:13px; height:13px; }
/* La position, annoncée avant d'être demandée (js/portal.js askLocationAtLogin). */
#login-screen .lg-note.lg-loc{ align-items:flex-start; justify-content:flex-start; max-width:38ch; margin:10px auto 0; line-height:1.5; text-align:left; text-wrap:pretty; }
#login-screen .lg-note.lg-loc svg{ flex:none; margin-top:2px; }

#login-screen .role-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
#login-screen .role-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; min-height:96px; text-align:left; text-transform:none; letter-spacing:0;
  border-radius:16px; border:1px solid rgba(243,239,230,.12); background:rgba(8,7,10,.6); color:var(--bone); }
#login-screen .role-btn[hidden]{ display:none; }
#login-screen .role-btn svg{ width:22px; height:22px; color:#ff6b77; margin-bottom:4px; }
#login-screen .role-btn b{ font-family:var(--f-display); font-weight:400; font-size:1.15rem; letter-spacing:.02em; text-transform:uppercase; }
#login-screen .role-btn small{ font-size:.7rem; color:rgba(243,239,230,.5); font-weight:500; }
#login-screen .role-btn:hover, #login-screen .role-btn:focus-visible{ border-color:rgba(224,49,63,.55); background:rgba(224,49,63,.08); }
#login-screen .login-error{ border-radius:14px; }

#login-screen .lg-foot{ position:static; margin-top:4px; bottom:calc(16px + var(--sab, 0px)); left:0; right:0; text-align:center; font-family:var(--f-grotesk); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(243,239,230,.32); }

/* Grand écran : le pendentif et le titre à gauche, la carte à droite. */
@media (min-width: 980px){
  #login-screen{ padding-left:56px; padding-right:56px; }
  #login-screen .lg-top{ left:40px; right:40px; top:28px; }
  #login-screen .lg-stage{ max-width:1080px; flex-direction:row; align-items:center; justify-content:space-between; gap:64px; }
  #login-screen .lg-hero{ flex:1; align-items:flex-start; text-align:left; }
  #login-screen .lg-pendant{ width:190px; margin-bottom:14px; }
  #login-screen .login-title, #login-screen .login-sub{ text-align:left; }
  #login-screen .login-title{ font-size:clamp(4rem, 6.5vw, 5.6rem); }
  #login-screen .lg-foot{ position:absolute; }
  #login-screen .login-sub{ font-size:.95rem; }
  #login-screen .login-card{ flex:none; width:430px; padding:28px; }
  #login-screen .lg-photo img{ object-position:30% 45%; }
}
@media (max-height: 700px) and (max-width: 979px){
  #login-screen .lg-pendant{ width:96px; }
  #login-screen .login-sub{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  #login-screen .lg-pendant, #login-screen .lg-sheen span{ animation:none; }
  #login-screen .lg-sheen{ display:none; }
}

/* CONFIDENTIALITÉ DE L'ACCUEIL — le bouton œil de la barre du haut.
   Icône seule sur écran étroit, avec son libellé à partir de 1100 px. */
.tb-money{ width:auto; gap:8px; }
/* Le bouton ne sert qu'à l'accueil (syncMoneyToggle pose `hidden`
   ailleurs) ; .icon-btn, en display:inline-flex, l'affichait quand même. */
.tb-money[hidden]{ display:none; }
.tb-money .tb-money-txt{ display:none; }
.tb-money[aria-pressed="true"]{ color:var(--bone); border-color:var(--silver-dim); }
@media (min-width: 1100px){
  .tb-money{ padding:0 14px 0 12px; }
  .tb-money .tb-money-txt{ display:inline; font-family:var(--f-grotesk); font-size:.8rem; white-space:nowrap; }
}
.cc-big.cc-masked{ letter-spacing:.08em; color:var(--bone-dim); }

/* VERSEMENTS — cartes, zone FILTRER, liste compacte, semaines.
   La zone FILTRER porte le même habit que les cartes résumé ; la liste
   tient sur une ligne par détaillant et mode, le détail s'ouvre au toucher. */
.vs-scope{ margin:0 0 10px; font-size:.78rem; color:rgba(243,239,230,.55); }
.vs-scope b{ color:var(--bone); font-weight:600; }
.vs-kpis{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.vs-kpis .stat-card.is-due{ border-color:rgba(224,49,63,.45); }
.vs-kpis .vs-global{ margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); font-variant-numeric:tabular-nums; }
.vs-total{ margin:0 0 22px; font-size:.82rem; color:rgba(243,239,230,.6); font-variant-numeric:tabular-nums; }
.vs-total b{ color:var(--bone); font-weight:700; }
.vs-filters{
  border-radius:14px; padding:18px 20px; border:1px solid var(--line); margin-bottom:28px;
  background:linear-gradient(180deg, #1a171c, #141216); box-shadow:var(--rim, none);
  display:flex; flex-direction:column; gap:14px;
}
.vs-filters .sc-label{ font-family:var(--f-grotesk); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,239,230,.5); }
.vs-filters-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:30px; }
.vs-filters-grid{ display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap:12px; }
.vs-filters .lf-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.vs-filters .lf-field label{ font-size:.68rem; color:rgba(243,239,230,.55); letter-spacing:.04em; }
.vs-filters select, .vs-filters input[type="date"]{
  width:100%; min-height:40px; background:var(--charcoal); border:1px solid var(--line-strong); border-radius:10px;
  color:var(--bone); padding:8px 12px; font-size:.82rem;
}
.vs-filters select:focus-visible, .vs-filters input:focus-visible{ outline:2px solid rgba(224,49,63,.6); outline-offset:1px; }
.vs-filters .date-fr{ display:block; }
.vs-chips, .vs-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }

.vs-list{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:linear-gradient(180deg, #1a171c, #141216); }
.vs-row{ display:grid; grid-template-columns:minmax(0, 1fr) 128px; align-items:center; border-top:1px solid var(--line); }
.vs-row:first-child{ border-top:0; }
.vs-row.is-due .vs-amt{ color:#ff6b77; }
.vs-main{
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.1fr) 18px;
  align-items:center; gap:10px; width:100%; min-height:56px; padding:10px 14px; text-align:left;
  background:none; border:0; color:inherit; font:inherit; cursor:pointer;
  transition:background-color var(--m-fast, 180ms) var(--m-ease, ease);
}
.vs-main:hover{ background:rgba(243,239,230,.03); }
.vs-main:focus-visible{ outline:2px solid rgba(224,49,63,.6); outline-offset:-2px; }
.vs-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.vs-who b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.vs-amt{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--good); }
.vs-date{ font-size:.78rem; color:rgba(243,239,230,.6); }
.vs-main .badge{ white-space:nowrap; }
.vs-meta{ display:contents; }
.vs-chev{ display:inline-flex; width:16px; height:16px; color:rgba(243,239,230,.45); transition:transform var(--m-fast, 180ms) var(--m-ease, ease); }
.vs-chev svg{ width:16px; height:16px; }
.vs-row.is-open .vs-chev{ transform:rotate(180deg); }
.vs-act{ display:flex; justify-content:flex-end; padding-right:14px; }
.vs-row-head{ min-height:0; }
.vs-row-head .vs-main{ min-height:0; padding-top:10px; padding-bottom:8px; cursor:default; font-family:var(--f-grotesk); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,239,230,.45); }
.vs-row-head .vs-main:hover{ background:none; }
.vs-detail{ grid-column:1 / -1; padding:4px 14px 16px 52px; display:flex; flex-direction:column; gap:12px; }
.vs-detail[hidden]{ display:none; }
.vs-detail-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.vs-detail-actions .btn-sm{ width:auto; }
.vs-facts{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.vs-facts div{ display:flex; flex-direction:column; gap:2px; }
.vs-facts span{ font-size:.66rem; letter-spacing:.06em; color:rgba(243,239,230,.5); }
.vs-facts b{ font-variant-numeric:tabular-nums; }
.vs-sales{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.vs-sales li{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; gap:10px; align-items:center; font-size:.78rem; }
.vs-sales li > span:nth-child(2){ color:rgba(243,239,230,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-sales b{ font-variant-numeric:tabular-nums; }
.vs-last{ margin:0; font-size:.74rem; color:rgba(243,239,230,.55); }

.vs-weeks{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:linear-gradient(180deg, #1a171c, #141216); }
.vs-week{
  display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr);
  gap:10px; align-items:center; padding:12px 14px; border-top:1px solid var(--line);
  font-size:.8rem; font-variant-numeric:tabular-nums;
}
.vs-week:first-child{ border-top:0; }
.vs-week.is-current{ background:rgba(224,49,63,.05); }
.vs-week-head{ font-family:var(--f-grotesk); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,239,230,.45); padding-top:10px; padding-bottom:8px; }
.vs-wk b{ font-weight:600; }

@media (max-width: 899px){
  .vs-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .vs-filters{ padding:16px; }
  .vs-filters-grid{ grid-template-columns:1fr 1fr; }
  .vs-filters-grid .lf-field:first-child{ grid-column:1 / -1; }
  .vs-row-head{ display:none; }
  .vs-row{ grid-template-columns:minmax(0, 1fr); }
  .vs-main{ grid-template-columns:minmax(0, 1fr) auto 16px; grid-template-areas:"who amt chev" "meta meta meta"; row-gap:8px; padding:12px; }
  .vs-who{ grid-area:who; }
  .vs-amt{ grid-area:amt; justify-self:end; }
  .vs-chev{ grid-area:chev; }
  .vs-meta{ grid-area:meta; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
  .vs-meta .vs-date{ margin-right:auto; }
  .vs-act{ padding:0 12px 12px; justify-content:stretch; }
  .vs-act .btn-sm{ flex:1; min-height:40px; justify-content:center; text-align:center; }
  .vs-act:empty{ display:none; }
  .vs-row.is-open .vs-act{ order:1; }
  .vs-row.is-open .vs-detail{ order:0; }
  .vs-detail{ padding-left:12px; padding-right:12px; }
  .vs-sales li{ grid-template-columns:minmax(0, 1fr) auto auto; row-gap:2px; }
  .vs-sales li > span:nth-child(2){ grid-column:1 / -1; grid-row:2; }
  .vs-sales li > .badge{ grid-column:3; grid-row:1; }
  .vs-week-head{ display:none; }
  .vs-week{ grid-template-columns:1fr 1fr; gap:6px 14px; }
  .vs-week .vs-wk{ grid-column:1 / -1; }
  .vs-week [data-l]::before{ content:attr(data-l); display:block; font-size:.62rem; letter-spacing:.06em; color:rgba(243,239,230,.45); }
}
@media (prefers-reduced-motion: reduce){
  .vs-main, .vs-chev{ transition:none; }
}

/* MACHINE 50-20-20-10 — enveloppes, clôture mensuelle, plafonds, versements. */
.env-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.env-card{ display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); border-radius:12px; background:rgba(243,239,230,.02); min-width:0; }
.env-head{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.env-head b{ font-size:.82rem; font-weight:600; }
.env-amt{ font-family:var(--f-display); font-size:1.6rem; line-height:1; font-variant-numeric:tabular-nums; }
.env-facts{ list-style:none; margin:6px 0 4px; padding:0; display:flex; flex-direction:column; gap:4px; font-size:.74rem; }
.env-facts li{ display:flex; justify-content:space-between; gap:10px; }
.env-facts span{ color:rgba(243,239,230,.55); }
.env-facts b{ font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.env-card > .badge{ align-self:flex-start; }
.env-hist summary{ cursor:pointer; font-size:.72rem; color:rgba(243,239,230,.6); }
.env-hist ul{ list-style:none; margin:6px 0 0; padding:0; font-size:.74rem; display:flex; flex-direction:column; gap:3px; }
.env-hist li{ display:flex; justify-content:space-between; gap:10px; }
.env-fc{ margin:0; font-size:.76rem; }
.cap-close, .cap-caps{ gap:12px; }
.cap-close-sum{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-width:520px; font-variant-numeric:tabular-nums; }
.cap-close-sum li{ display:flex; justify-content:space-between; gap:12px; font-size:.84rem; }
.cap-close-sum li.is-total{ border-top:1px solid var(--line-strong); padding-top:8px; font-weight:700; }
.cap-issues{ display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid rgba(242,179,61,.35); border-radius:12px; background:rgba(242,179,61,.05); }
.cap-issues p{ margin:0; font-size:.76rem; }
.cap-issue{ display:grid; grid-template-columns:minmax(0, 1fr) 130px; gap:10px; align-items:center; font-size:.78rem; }
.cap-issue input, .cap-caps-form input, .fp-form input{ min-height:38px; background:var(--charcoal); border:1px solid var(--line-strong); border-radius:10px; color:var(--bone); padding:6px 10px; font-size:.82rem; min-width:0; }
.cap-exp summary{ cursor:pointer; font-size:.8rem; }
.cap-exp p{ font-size:.74rem; margin:6px 0; }
.cap-exp-row{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center; font-size:.78rem; padding:4px 0; }
.cap-blockers{ margin:0; padding-left:18px; color:var(--warn); font-size:.78rem; display:flex; flex-direction:column; gap:3px; }
.cap-caps-form{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; align-items:end; }
.cap-caps-form .lf-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.cap-caps-form .lf-field label{ font-size:.68rem; color:rgba(243,239,230,.55); }
.cap-caps-form .cap-caps-reason{ grid-column:span 3; }
.fund-payments{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.fp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.fp-list li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px 12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.fp-who{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; font-size:.8rem; }
.fp-amt{ font-variant-numeric:tabular-nums; }
.fp-form{ grid-column:1 / -1; display:grid; grid-template-columns:150px minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap:8px; }
.fp-list li > span:last-child:not(.fp-who){ grid-column:1 / -1; font-size:.76rem; }
.fp-done summary{ cursor:pointer; font-size:.78rem; color:rgba(243,239,230,.6); }
@media (max-width: 1100px){
  .env-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cap-caps-form{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cap-caps-form .cap-caps-reason{ grid-column:1 / -1; }
  .fp-form{ grid-template-columns:1fr 1fr; }
  .fp-form input[name="reference"]{ grid-column:1 / -1; }
}
@media (max-width: 560px){
  .env-grid{ grid-template-columns:1fr; }
  .cap-issue{ grid-template-columns:1fr; }
  .cap-caps-form{ grid-template-columns:1fr; }
}
.env-use{ font-size:.72rem; color:rgba(243,239,230,.6); line-height:1.4; }
.cap-issue-in{ display:flex; flex-direction:column; gap:6px; }
.cap-nogoods{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:rgba(243,239,230,.7); }
.exp-envelope{ font-size:.72rem; color:var(--bone-faint); margin-top:6px; line-height:1.5; }
.exp-envelope.is-over{ color:var(--warn); }