/* =====================================================================
   L'espace investisseur — jetons du « système visuel des tableaux de bord »
   (maquette tasks/_board/maquettes/tableau-investisseur-v2-en-2026-11-01.html,
   bloc :root, lignes 13–60). Préfixe ds- ; aucune règle ne dépend de la page.
   La feuille ne couvre que ce que la tranche 1 rend : en-tête + sélecteur + les
   cinq cartes — la tranche 2 ajoutera les siennes.
   Le bloc de jetons s'applique aussi au thème « nouveau » du panneau (D-WA116) :
   c'est LA définition des --ds-* ; nbt-theme-nouveau.css les remappe, jamais ne
   les recopie. --ds-page et --ds-shell (la coque) ne servent qu'au thème.
   ===================================================================== */
.nbt-inv,html[data-theme="nouveau"]{
 --ds-page:#E4E3E0; --ds-shell:#F3F2EF; --ds-card:#FFFFFF;
 --ds-ink:#17151C; --ds-ink2:#3A3740; --ds-mut:#85818C; --ds-mut2:#6E6A75; --ds-line:#ECEAE6; --ds-grid:#E2DFDA;
 --ds-brand:#9B1024; --ds-brand-2:#C24A5C; --ds-brand-soft:rgba(155,16,36,.14); --ds-brand-softer:rgba(155,16,36,.07);
 --ds-bar:#E9E7E3;
 --ds-up:#2F8A46; --ds-up-bg:#E3F4E5; --ds-down:#B4232F; --ds-down-bg:#FBE5E6;
 --ds-flat:#6E6A75; --ds-flat-bg:#F0EEEB;
 --ds-r-card:20px; --ds-r-pill:999px;
 --ds-sans:Inter,"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
 --ds-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
 font-family:var(--ds-sans);
}
/* Le fond de page de la maquette sur le body Filament — la valeur du jeton
   --ds-page, en clair : un deuxième bloc de jetons est interdit (le thème
   « nouveau » les remappe, il ne les recopie pas). */
body.nbt-inv-page,body:has(.nbt-inv.ds-app){background:#E4E3E0;color:var(--ds-ink);color-scheme:light}

/* ---- la coque (tranche 3) : .ds-app > .ds-side + .ds-main ; .ds-top au téléphone ---- */
.nbt-inv svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nbt-inv.ds-app{margin:20px;background:var(--ds-shell);border-radius:32px;padding:14px;display:grid;grid-template-columns:248px minmax(0,1fr);gap:14px;min-height:calc(100vh - 40px)}
.nbt-inv .ds-side{background:var(--ds-card);border-radius:22px;padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:14px;height:calc(100vh - 84px);min-height:560px}
.nbt-inv .ds-logo{display:flex;align-items:center;gap:8px;padding:0 4px 26px 8px;font-weight:700;font-size:14.5px;letter-spacing:-.02em;color:var(--ds-ink)}
.nbt-inv .ds-mark{width:28px;height:28px;border-radius:8px;border:1.6px solid var(--ds-ink);display:grid;place-items:center;flex:none}
.nbt-inv .ds-mark i{width:12px;height:12px;border-radius:3px;background:var(--ds-brand);display:block}
.nbt-inv .ds-logo span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nbt-inv .ds-iconbtn{border:0;background:none;padding:4px;border-radius:8px;color:var(--ds-ink2);cursor:pointer;display:grid;place-items:center}
.nbt-inv .ds-iconbtn:hover{background:var(--ds-shell)}
.nbt-inv .ds-nav{display:flex;flex-direction:column;gap:4px}
.nbt-inv .ds-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ds-ink);text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap}
.nbt-inv .ds-nav a:hover{background:#F7F6F4}
.nbt-inv .ds-nav a[aria-current=page]{background:var(--ds-shell)}
.nbt-inv .ds-nav.bottom{margin-top:auto}
.nbt-inv.ds-app.collapsed{grid-template-columns:76px minmax(0,1fr)}
.nbt-inv.ds-app.collapsed .ds-nav a span,.nbt-inv.ds-app.collapsed .ds-logo span{display:none}
.nbt-inv.ds-app.collapsed .ds-logo{flex-direction:column;padding-bottom:22px}
.nbt-inv .ds-user{margin-top:10px;padding:12px 12px 0;border-top:1px solid var(--ds-line)}
.nbt-inv .ds-user b{display:block;font-size:14px;font-weight:600;color:var(--ds-ink)}
.nbt-inv .ds-user span{display:block;font-size:12px;color:var(--ds-mut2);margin-top:2px;line-height:1.4}
/* D-WA119 : le vrai logo du CRM dans la barre — le nom se lit en entier, jamais coupé ; plié, seule la marque reste. */
.nbt-inv .ds-logo .nbt-brand{flex:1;min-width:0;overflow:visible;white-space:normal;text-overflow:clip;gap:.5rem}
.nbt-inv .ds-logo .nbt-brand-mark{inline-size:2.4rem}
.nbt-inv .ds-logo .nbt-brand-name{font-size:.92rem;white-space:normal;overflow:visible}
.nbt-inv .ds-logo .nbt-brand-office{font-size:.58rem;letter-spacing:.08em;white-space:normal;overflow:visible}
.nbt-inv.ds-app.collapsed .ds-logo .nbt-brand{display:inline-flex}
.nbt-inv.ds-app.collapsed .ds-logo .nbt-brand-name{display:none}
/* D-WA119 : le menu de la personne (avatar + nom) en bas de la barre, comme sur tout autre compte. */
.nbt-inv .ds-user .fi-user-menu-trigger{display:flex;align-items:center;gap:8px;width:100%;padding:4px 0;background:none;border:0;cursor:pointer;color:var(--ds-ink);font:inherit}
.nbt-inv .ds-user .fi-user-menu-trigger-text{display:block;margin:0;font-size:13px;font-weight:600;color:var(--ds-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nbt-inv.ds-app.collapsed .ds-user .fi-user-menu-trigger-text{display:none}
.nbt-inv .ds-top,.nbt-inv .ds-scrim{display:none}
.nbt-inv .ds-main{padding:22px 16px 30px 22px;min-width:0}
/* Livewire exige UNE racine : ce div l'est, invisible pour la mise en page */
.nbt-inv .ds-page{display:contents}
.nbt-inv section[id]{scroll-margin-top:20px}
.nbt-inv .ds-head{display:flex;flex-wrap:wrap;gap:14px 20px;justify-content:space-between;align-items:center;margin:0 0 8px}
.nbt-inv .ds-head h1{margin:0;font-size:38px;font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--ds-ink)}
.nbt-inv .ds-sels{display:flex;flex-wrap:wrap;gap:10px}
/* le sélecteur de période : pilule à <select> natif, comme la maquette */
.nbt-inv .ds-sel{position:relative;display:inline-flex;align-items:center;background:var(--ds-card);border-radius:var(--ds-r-pill);box-shadow:0 1px 2px rgba(23,21,28,.04)}
.nbt-inv .ds-sel select{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:10px 34px 10px 16px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;border-radius:var(--ds-r-pill);color:var(--ds-ink)}
.nbt-inv .ds-sel::after{content:"";position:absolute;right:14px;width:7px;height:7px;border-right:1.7px solid var(--ds-mut);border-bottom:1.7px solid var(--ds-mut);transform:rotate(45deg) translateY(-1px);pointer-events:none}
.nbt-inv .ds-sel.cal select{padding-left:44px}
.nbt-inv .ds-sel svg.l{position:absolute;left:16px;width:18px;height:18px;fill:none;stroke:var(--ds-mut2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* la rangée de confiance : quatre promesses, la dernière en gris */
.nbt-inv .ds-trust{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--ds-mut2);font-size:12.5px;margin:0 0 22px}
.nbt-inv .ds-trust span{display:inline-flex;align-items:center;gap:6px}
.nbt-inv .ds-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ds-up)}
.nbt-inv .ds-trust span.n::before{background:var(--ds-mut)}
.nbt-inv .ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* la grille des cinq indicateurs */
.nbt-inv .ds-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.nbt-inv .ds-card{background:var(--ds-card);border-radius:var(--ds-r-card);padding:20px;min-width:0;position:relative}
.nbt-inv .ds-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:26px;flex-wrap:wrap;row-gap:6px}
.nbt-inv .ds-ct{margin:0;font-size:16.5px;font-weight:500;color:var(--ds-mut);letter-spacing:-.01em}
.nbt-inv .ds-d{display:inline-flex;align-items:center;border-radius:7px;padding:3px 7px;font-size:12px;font-weight:500;white-space:nowrap;flex:none}
.nbt-inv .ds-d.flat{background:var(--ds-flat-bg);color:var(--ds-flat)}
.nbt-inv .ds-big{font-family:var(--ds-mono);font-weight:500;font-size:31px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1;display:flex;align-items:center;gap:8px;margin-top:22px}
.nbt-inv .ds-cap{margin-top:12px;font-size:13.5px;color:var(--ds-ink2);display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
/* la bulle « d'où vient ce chiffre », ancrée à sa carte */
.nbt-inv .ds-info{border:0;background:none;padding:0;width:18px;height:18px;border-radius:50%;color:#B5B1BA;cursor:help;display:inline-grid;place-items:center;flex:none}
.nbt-inv .ds-info svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nbt-inv .ds-info:hover,.nbt-inv .ds-info:focus-visible{color:var(--ds-ink2);outline:none}
.nbt-inv .ds-tip{display:none;position:absolute;left:16px;right:16px;top:56px;z-index:6;background:var(--ds-ink);color:#fff;font-size:12.5px;line-height:1.45;font-weight:400;padding:10px 12px;border-radius:12px;box-shadow:0 10px 30px rgba(23,21,28,.18)}
.nbt-inv .ds-tip b{display:block;font-weight:600;margin-bottom:2px;color:#fff}
.nbt-inv .ds-info:hover+.ds-tip,.nbt-inv .ds-info:focus-visible+.ds-tip{display:block}
/* ---- la grille des cartes (tranche 2) : 12 colonnes, .s3/.s4/.s5/.s8 ---- */
.nbt-inv .ds-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-bottom:14px}
.nbt-inv .ds-grid .ds-card{padding:22px 24px}
.nbt-inv .ds-grid .s3{grid-column:span 3}
.nbt-inv .ds-grid .s4{grid-column:span 4}
.nbt-inv .ds-grid .s5{grid-column:span 5}
.nbt-inv .ds-grid .s6{grid-column:span 6}
.nbt-inv .ds-grid .s8{grid-column:span 8}
.nbt-inv .ds-grid .s12{grid-column:span 12}
@media (max-width:1240px){.nbt-inv .ds-grid .s3,.nbt-inv .ds-grid .s4,.nbt-inv .ds-grid .s5{grid-column:span 6}.nbt-inv .ds-grid .s8{grid-column:span 12}.nbt-inv .ds-grid .s4.solo{grid-column:span 12}}
/* l'en-tête de carte à deux étages (titre + sous-titre / chiffres de la figure) */
.nbt-inv .ds-lh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 24px}
.nbt-inv .ds-sub{margin:10px 0 0;font-size:14px;color:var(--ds-ink2)}
.nbt-inv .ds-fig{display:flex;gap:28px;flex-wrap:wrap}
.nbt-inv .ds-fig .k{font-size:13.5px;color:var(--ds-ink2);display:flex;align-items:center;gap:6px}
.nbt-inv .ds-fig .ds-big{margin-top:6px;font-size:36px}
.nbt-inv .ds-fig .ds-big .ds-cap{font-family:var(--ds-sans);font-size:12.5px;font-weight:400;letter-spacing:0}
/* la courbe : SVG rendu côté serveur, rien ne bouge */
.nbt-inv .ds-line{margin-top:16px;position:relative}
.nbt-inv .ds-line svg{display:block;width:100%;height:auto;overflow:visible}
.nbt-inv .ds-line .ds-grille line{stroke:var(--ds-grid);stroke-dasharray:4 5}
.nbt-inv .ds-line .ds-grille text,.nbt-inv .ds-line .ds-axes text{font-family:var(--ds-sans);font-size:12px;fill:var(--ds-mut)}
.nbt-inv .ds-line .ds-aire{fill:var(--ds-brand-soft)}
.nbt-inv .ds-line .ds-courbe{fill:none;stroke:var(--ds-brand);stroke-width:2.4}
.nbt-inv .ds-line .ds-especes{fill:none;stroke:#C9C5CD;stroke-width:2}
.nbt-inv .ds-line .ds-point{fill:var(--ds-brand);stroke:#fff;stroke-width:1.5}
/* l'étiquette du jour portée par le guide de survol (maquette #ht) : la même
   typo que les axes, la couleur d'encre de la maquette en inline */
.nbt-inv .ds-line .hx text{font-family:var(--ds-sans);font-size:12px}
.nbt-inv .ds-lgl{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ds-mut2);margin-top:8px}
.nbt-inv .ds-lgl span{display:inline-flex;align-items:center;gap:6px}
.nbt-inv .ds-lgl i{width:14px;height:2.5px;border-radius:2px;display:inline-block}
.nbt-inv .ds-empty{margin-top:16px;border-radius:14px;background:#FAF9F7;padding:22px 16px;text-align:center;color:var(--ds-mut2);font-size:13.5px}
/* les barres fines de l'entonnoir : une par étape, hauteur logarithmique */
.nbt-inv .ds-thin{display:flex;gap:12px;margin-top:46px;align-items:flex-end}
.nbt-inv .ds-thin .g{flex:1;min-width:0;display:flex;flex-direction:column}
.nbt-inv .ds-thin .bars{height:170px;display:flex;align-items:flex-end;gap:3px;position:relative}
.nbt-inv .ds-thin .bars i{flex:1;max-width:10px;border-radius:999px;background:var(--ds-bar);display:block;min-height:6px}
.nbt-inv .ds-thin .bars i.on{background:var(--ds-brand)}
.nbt-inv .ds-thin .pct{position:absolute;left:0;font-size:13px;font-weight:500;color:var(--ds-ink);white-space:nowrap;transform:translateY(-22px);font-variant-numeric:tabular-nums}
.nbt-inv .ds-thin .lab{margin-top:12px;font-size:13px;color:var(--ds-mut);line-height:1.25;min-height:2.5em}
.nbt-inv .ds-thin .cnt{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
/* la barre segmentée des issues et sa légende */
.nbt-inv .ds-big .ds-u{font-family:var(--ds-sans);font-size:14px;font-weight:500;color:var(--ds-mut);letter-spacing:0}
/* la jauge « Trésorerie » : demi-cercle, arc à la part de la caisse */
.nbt-inv .ds-gauge{position:relative;max-width:250px;margin:18px auto 0}
.nbt-inv .ds-gauge svg{display:block;width:100%;height:auto}
.nbt-inv .ds-gauge .c{position:absolute;left:0;right:0;bottom:4px;text-align:center}
.nbt-inv .ds-gauge .ds-big{justify-content:center;margin:0;font-size:25px}
.nbt-inv .ds-gauge .c div:last-child{font-size:13.5px;color:var(--ds-mut);margin-top:4px}
.nbt-inv .ds-rows{margin-top:18px;border-top:1px dashed var(--ds-grid)}
.nbt-inv .ds-rows div{display:flex;justify-content:space-between;gap:10px;padding-top:12px;font-size:14px;color:var(--ds-mut2)}
.nbt-inv .ds-rows .k{display:flex;gap:7px;align-items:center}
.nbt-inv .ds-rows .k i{width:7px;height:7px;border-radius:50%;display:inline-block}
.nbt-inv .ds-rows b{color:var(--ds-ink);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.nbt-inv .ds-cad-c{text-align:center;margin-top:8px}
/* la carte « D'où viennent les leads » : quatre chiffres, la barre par service, la note */
.nbt-inv .ds-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px;margin-top:22px}
.nbt-inv .ds-stats .k{font-size:13.5px;color:var(--ds-mut)}
.nbt-inv .ds-stats .v{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
.nbt-inv .ds-note{margin:6px 0 0;font-size:13px;color:var(--ds-mut2)}
/* la table « Équipe » : le rôle sous le prénom, comme la maquette */
.nbt-inv .ds-table td.m .role{display:block;font-size:12.5px;color:var(--ds-mut);font-weight:400}
.nbt-inv .ds-seg{display:flex;gap:5px;margin:22px 0 18px;padding-top:22px;border-top:1px dashed var(--ds-grid)}
.nbt-inv .ds-seg i{height:7px;border-radius:999px;display:block;min-width:7px}
.nbt-inv .ds-lg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 24px}
.nbt-inv .ds-lg div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:14px;color:var(--ds-mut2)}
.nbt-inv .ds-lg div::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.nbt-inv .ds-lg b{color:var(--ds-ink);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
/* la piste de l'argent : quatre marches, flèches entre elles */
.nbt-inv .ds-trail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.nbt-inv .ds-step{background:#FAF9F7;border-radius:14px;padding:14px 16px;position:relative;min-width:0}
.nbt-inv .ds-step .k{font-size:13px;color:var(--ds-mut)}
.nbt-inv .ds-step .ds-big{margin-top:8px;font-size:24px}
.nbt-inv .ds-step .ds-cap{margin-top:6px;font-size:13px;color:var(--ds-mut2)}
.nbt-inv .ds-step.hot{background:var(--ds-brand-softer);box-shadow:inset 0 0 0 1px var(--ds-brand-soft)}
.nbt-inv .ds-step.zero .ds-big{color:#A8A4AD}
/* la flèche de la maquette, portée par la marche SUIVANTE (bord gauche) :
   même interstice, même glyphe — mais un débord à gauche ne compte pas au
   scrollWidth, celui de droite faisait déborder la carte (mesuré 168>158). */
.nbt-inv .ds-step:not(:first-child)::before{content:"";position:absolute;left:-9px;top:50%;width:8px;height:8px;border-top:1.6px solid #C9C5CD;border-right:1.6px solid #C9C5CD;transform:translateY(-50%) rotate(45deg);z-index:1}
/* la liste des risques : titre, pilule, explication */
.nbt-inv .ds-list{list-style:none;margin:16px 0 0;padding:0}
.nbt-inv .ds-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:12px 0;border-top:1px dashed var(--ds-grid);align-items:center}
.nbt-inv .ds-list .t{font-weight:500}
.nbt-inv .ds-list .x{grid-column:1/-1;font-size:13px;color:var(--ds-mut2)}
.nbt-inv .ds-d.up{background:var(--ds-up-bg);color:var(--ds-up)}
.nbt-inv .ds-d.down{background:var(--ds-down-bg);color:var(--ds-down)}
.nbt-inv .ds-list b{color:var(--ds-ink);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
/* la colonne pilule+CAD des risques (maquette .ds-pc) : pilule, CAD dessous, alignés à droite */
.nbt-inv .ds-pc{display:flex;flex-direction:column;align-items:flex-end}
/* la table des paiements */
.nbt-inv .ds-tw{overflow-x:auto;margin:16px -6px 0;padding:0 6px}
.nbt-inv .ds-table{width:100%;border-collapse:collapse;font-size:14px}
.nbt-inv .ds-table th{text-align:left;font-weight:400;color:var(--ds-mut);font-size:13.5px;padding:0 0 12px;white-space:nowrap}
.nbt-inv .ds-table td{padding:12px 0;border-top:1px dashed var(--ds-grid);white-space:nowrap;font-variant-numeric:tabular-nums}
.nbt-inv .ds-table th+th,.nbt-inv .ds-table td+td{padding-left:10px}
.nbt-inv .ds-table .r{text-align:right}
.nbt-inv .ds-table td.m{font-weight:500}
.nbt-inv .ds-mask{font-family:var(--ds-mono);font-size:12.5px;color:var(--ds-mut)}
/* le reçu masqué vit sur sa seconde ligne, sous la date (maquette ligne 813) */
.nbt-inv .ds-mask.block{display:block}
.nbt-inv .ds-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--ds-ink);color:#fff;font-weight:500;font-size:14px;padding:11px 18px;border-radius:var(--ds-r-pill);cursor:pointer;margin-top:16px}
.nbt-inv .ds-btn:disabled{cursor:not-allowed;opacity:.55}
.nbt-inv .ds-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
/* la liste des encaissements défile dans sa carte, comme la maquette */
.nbt-inv .ds-scroll{max-height:330px;overflow-y:auto}
.nbt-inv .ds-scroll .ds-table td:nth-child(2){white-space:normal}
/* l'équivalent CAD : une ligne grise « ≈ » sous chaque montant, jamais comptable —
   les quatre règles de la maquette (lignes 260–264), mêmes valeurs */
.nbt-inv .ds-cad{display:block;color:var(--ds-mut);font-family:var(--ds-mono);font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:400;letter-spacing:-.01em;white-space:nowrap;margin-top:2px}
.nbt-inv .ds-cad-b{font-size:17px;margin-top:6px;letter-spacing:-.02em}
.nbt-inv .ds-fig .ds-cad-b{font-size:15px;margin-top:4px}
.nbt-inv .ds-step .ds-cad-b{font-size:13.5px;margin-top:4px}
.nbt-inv .ds-cad-c .ds-cad-b{text-align:center;font-size:15px;margin-top:8px}
.nbt-inv .ds-legend{margin:6px 2px 0;font-size:12.5px;color:var(--ds-mut2)}
/* ---- mouvement (D-WA115-6) : le bloc de la maquette, lignes 224–247, verbatim ---- */
/* ds-* seul dans cette coque : les sélecteurs nus de la maquette restent bornés à la page.
   Seulement sous .ds-motion ; sans lui, tout est à sa valeur finale — prefers-reduced-motion
   ne reçoit jamais la classe. Tant que le moteur n'a pas rempli les cartes, ds-boot garde
   la zone principale invisible : aucun saut au premier affichage. */
.ds-boot .ds-main{visibility:hidden}
.ds-card{box-shadow:0 1px 2px rgba(23,21,28,.03)}
.ds-n{display:inline-block}
.ds-motion .ds-card{transition:opacity .3s ease var(--cd,0ms),transform .32s cubic-bezier(.2,.7,.2,1) var(--cd,0ms),box-shadow .2s ease}
.ds-motion .ds-card:not(.ds-in){opacity:0;transform:translateY(8px)}
@media (hover:hover){.ds-motion .ds-card.ds-in:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(23,21,28,.07)}}
.ds-motion [data-a]{transition:transform .3s cubic-bezier(.2,.7,.2,1) calc(var(--cd,0ms) + var(--d,0ms)),opacity .35s ease calc(var(--cd,0ms) + var(--d,0ms)),stroke-dashoffset .5s cubic-bezier(.3,.6,.2,1) calc(var(--cd,0ms) + var(--d,0ms))}
.ds-motion [data-a=y]{transform-origin:bottom}
.ds-motion [data-a=x]{transform-origin:left}
.ds-motion [data-a=y]:not(.go){transform:scaleY(0)}
.ds-motion [data-a=x]:not(.go){transform:scaleX(0)}
.ds-motion [data-a=fade]:not(.go){opacity:0}
.ds-motion [data-a=pop]{transition-duration:.28s}
.ds-motion [data-a=pop]:not(.go){opacity:0;transform:scale(.9)}
.ds-motion [data-a=draw]{stroke-dasharray:1 1}
.ds-motion [data-a=draw]:not(.go){stroke-dashoffset:1}
.ds-motion [data-a=sweep]:not(.go){stroke-dashoffset:var(--len)}
.ds-motion .ds-bub[data-a]{transition:opacity .3s ease calc(var(--cd,0ms) + var(--d,0ms)),left .14s ease-out,top .14s ease-out}
.ds-motion .hx,.ds-motion .hd{transition:transform .14s ease-out}
.pls{opacity:0}
.ds-motion .pls{transform-box:fill-box;transform-origin:center;animation:ds-pulse .5s ease-out calc(var(--cd,0ms) + 450ms) 1 both}
@keyframes ds-pulse{0%{opacity:.35;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}
/* la bulle du survol de la courbe (maquette lignes 123–124), mêmes valeurs, préfixée comme le reste */
.nbt-inv .ds-bub{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--ds-line);border-radius:10px;padding:7px 11px;font-size:12.5px;color:var(--ds-mut2);box-shadow:0 6px 18px rgba(23,21,28,.08);white-space:nowrap;transform:translate(-50%,-100%)}
.nbt-inv .ds-bub b{display:block;color:var(--ds-ink);font-weight:600;font-variant-numeric:tabular-nums}
/* ---- l'espace à douze pages (D-WA115-7) : coque et pages, maquette lignes 255–312 ---- */
/* la coque pliée cache aussi le compte ; le menu à douze entrées resserre ses liens
   (les substitutions de la maquette, après les bases pour les gagner à spécificité égale) */
.nbt-inv.ds-app.collapsed .ds-user{display:none}
.nbt-inv .ds-side{overflow-y:auto}
.nbt-inv .ds-nav{gap:2px}
.nbt-inv .ds-nav a{padding:9px 12px}
.nbt-inv .ds-logo{padding-bottom:20px}
.nbt-inv .ds-page>.ds-head{margin-bottom:8px}
.nbt-inv .ds-page h1:focus,.nbt-inv .ds-page h1:focus-visible{outline:none}
.nbt-inv .ds-kpis.even .ds-card:last-child{grid-column:auto}
.nbt-inv .ds-mut{color:var(--ds-mut)}
.nbt-inv .ds-table td .ds-d{font-size:12px}
.nbt-inv .ds-table tfoot td{border-top:1px solid var(--ds-ink);font-weight:500}
/* la page Argent : colonnes par mois (ds-mb) — deux barres, entrées et sorties */
.nbt-inv .ds-mb{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin-top:20px}
.nbt-inv .ds-mb .col{height:170px;display:flex;align-items:flex-end;justify-content:center;gap:3px;border-bottom:1px solid var(--ds-grid)}
.nbt-inv .ds-mb i{width:min(18px,38%);border-radius:5px 5px 2px 2px;background:var(--ds-brand);min-height:2px;display:block}
.nbt-inv .ds-mb i.e{background:#3A3740}
.nbt-inv .ds-mb i.z{background:var(--ds-bar)}
.nbt-inv .ds-mb span{display:block;text-align:center;font-size:12.5px;color:var(--ds-mut);margin-top:8px}
/* le profil : langue et CAD, deux cases et un interrupteur, comme la maquette */
.nbt-inv .ds-form{display:grid;gap:4px;margin-top:14px}
.nbt-inv .ds-form fieldset{border:0;margin:0;padding:0}
.nbt-inv .ds-form legend{font-weight:500;margin-bottom:8px;padding:0}
.nbt-inv .ds-opt{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:#FAF9F7;cursor:pointer;margin-bottom:6px;font-weight:500}
.nbt-inv .ds-opt input{accent-color:var(--ds-brand);width:18px;height:18px;margin:0;flex:none}
.nbt-inv .ds-opt small{display:block;font-weight:400;color:var(--ds-mut2);font-size:12.5px}
@media (max-width:900px){
 /* la coque devient téléphone : barre .ds-top, menu en tiroir, une colonne */
 .nbt-inv.ds-app{margin:0;border-radius:0;grid-template-columns:minmax(0,1fr);padding:0 12px 12px;min-height:100vh}
 .nbt-inv.ds-app.collapsed{grid-template-columns:minmax(0,1fr)}
 .nbt-inv .ds-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 4px;position:sticky;top:0;z-index:20;background:var(--ds-shell)}
 .nbt-inv .ds-top .ds-logo{padding:0}
 .nbt-inv .ds-side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);height:100%;min-height:0;border-radius:0 22px 22px 0;z-index:40;transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 40px rgba(23,21,28,.15)}
 .nbt-inv.ds-app.open .ds-side{transform:none}
 .nbt-inv .ds-scrim{display:none;position:fixed;inset:0;background:rgba(23,21,28,.3);z-index:30}
 .nbt-inv.ds-app.open .ds-scrim{display:block}
 .nbt-inv .ds-side .ds-collapse{display:none}
 .nbt-inv .ds-main{padding:8px 4px 24px}
 .nbt-inv .ds-grid .s3,.nbt-inv .ds-grid .s4,.nbt-inv .ds-grid .s5,.nbt-inv .ds-grid .s6,.nbt-inv .ds-grid .s8,.nbt-inv .ds-grid .s12{grid-column:span 12}
 .nbt-inv .ds-head h1{font-size:30px}
 .nbt-inv .ds-fig .ds-big{font-size:26px}
 .nbt-inv .ds-trail{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nbt-inv .ds-step:nth-child(3)::before{display:none}
}
/* le mobile de la maquette tableau-investisseur-v2-en-mobile.png : une colonne,
   indicateurs deux par deux (le dernier pleine largeur). Dernier bloc du
   fichier, comme le 480 de la maquette : à spécificité égale, ses règles
   doivent gagner sur celles de 900 px et sur les bases (le bloc était avant
   les bases de la tranche 2 — le padding 18px des cartes ne s'appliquait
   jamais, mesuré 22px 24px à 390, et les marches perdaient 6 px). */
@media (max-width:480px){
 .nbt-inv .ds-grid .ds-card{padding:18px}
 .nbt-inv .ds-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 .nbt-inv .ds-kpis .ds-card{padding:16px 14px}
 .nbt-inv .ds-kpis .ds-card:last-child{grid-column:1/-1}
 .nbt-inv .ds-kpis .ds-ct{font-size:14.5px}
 .nbt-inv .ds-kpis .ds-big{font-size:21px;margin-top:16px}
 .nbt-inv .ds-kpis .ds-big .ds-u{font-size:12px}
 .nbt-inv .ds-kpis .ds-cad-b{font-size:13.5px;margin-top:4px}
 .nbt-inv .ds-kpis .ds-cap{font-size:12.5px}
 .nbt-inv .ds-kpis .ds-ch{flex-wrap:wrap;row-gap:6px}
 .nbt-inv .ds-head h1{font-size:28px}
 .nbt-inv .ds-fig .ds-big{font-size:28px}
 .nbt-inv .ds-step .ds-big{font-size:19px}
 .nbt-inv .ds-thin{gap:8px}
 .nbt-inv .ds-thin .bars{gap:2px}
 .nbt-inv .ds-sel select{padding-top:10px;padding-bottom:10px;font-size:13.5px}
 .nbt-inv .ds-lg{grid-template-columns:minmax(0,1fr)}
 .nbt-inv .ds-mb .col{height:130px}
 .nbt-inv .ds-mb span{font-size:11px}
}
/* D-WA115-7-2 — Journal, Banque, Contrats. Deux règles de la maquette que la coque n'avait pas encore. */
.nbt-inv .ds-fig .k i{width:7px;height:7px;border-radius:50%;display:inline-block}
.nbt-inv .ds-empty b{display:block;color:var(--ds-ink);font-weight:500;margin-bottom:3px}
/* Les pages de l'espace (pas le tableau de bord, qui règle les siens) : l'écart sous les indicateurs
   et la bulle collée au titre, comme la maquette (.ds-kpis margin-bottom, .ds-ch>.ds-info). */
.nbt-inv .ds-page:not(:has(#kpis)) > .ds-kpis{margin-bottom:14px}
.nbt-inv .ds-page:not(:has(#kpis)) .ds-ch>.ds-info{margin:4px auto 0 -4px}
/* Au téléphone, une table large ne défile pas de côté : chaque ligne s'empile,
   le montant à droite. Les en-têtes restent lus par les lecteurs d'écran (rôles ARIA explicites). */
@media (max-width:480px){
 .nbt-inv .ds-table.stack thead{position:absolute;left:-10000px;top:auto}
 .nbt-inv .ds-table.stack,.nbt-inv .ds-table.stack tbody,.nbt-inv .ds-table.stack tfoot{display:block}
 .nbt-inv .ds-table.stack tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 0;border-top:1px dashed var(--ds-grid)}
 .nbt-inv .ds-table.stack tfoot tr{border-top:1px solid var(--ds-ink)}
 .nbt-inv .ds-table.stack td,.nbt-inv .ds-table.stack tfoot td{display:block;padding:0;border:0;white-space:normal}
 .nbt-inv .ds-table.stack td+td{padding-left:0}
 .nbt-inv .ds-table.stack td.r{margin-left:auto;text-align:right}
 .nbt-inv .ds-table.stack td:empty{display:none}
 .nbt-inv .ds-table.stack td[style*="min-width"]{min-width:0!important}
}
/* D-WA115-7-3 — Pipeline : les barres horizontales de la maquette (`hbars()`, lignes 288–294 et 312). */
.nbt-inv .ds-hb{margin-top:14px}
.nbt-inv .ds-hb>div{display:grid;grid-template-columns:minmax(84px,32%) minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;font-size:14px;color:var(--ds-ink2)}
.nbt-inv .ds-hb>div+div{border-top:1px dashed var(--ds-grid)}
.nbt-inv .ds-hb i{height:8px;background:var(--ds-bar);border-radius:999px;display:block;overflow:hidden}
.nbt-inv .ds-hb b{display:block;height:100%;background:var(--ds-brand);border-radius:999px;min-width:3px}
.nbt-inv .ds-hb em{font-style:normal;font-weight:500;color:var(--ds-ink);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.nbt-inv .ds-hb small{display:block;font-size:12px;color:var(--ds-mut)}
@media (max-width:480px){.nbt-inv .ds-hb>div{grid-template-columns:minmax(76px,34%) minmax(0,1fr) auto;gap:8px}}
/* Team (D-WA115-7-3) : empilée au téléphone, chaque chiffre garde le nom de sa colonne. */
@media (max-width:480px){.nbt-inv .ds-table.stack td[data-l]::before{content:attr(data-l) ' ';color:var(--ds-mut);font-size:12.5px;font-weight:400}}
/* Reports (D-WA115-7-4) : le bouton PDF désactivé « en construction » de la maquette (lignes 309–311). */
.nbt-inv .ds-soon{display:inline-block;position:relative}
.nbt-inv .ds-soon .ds-btn[disabled]{background:#C9C5CD;opacity:1}
.nbt-inv .ds-soon:hover::after,.nbt-inv .ds-soon:focus-within::after{content:attr(data-soon);position:absolute;left:0;bottom:calc(100% - 8px);background:var(--ds-ink);color:#fff;font-size:12px;padding:5px 9px;border-radius:8px;white-space:nowrap}
/* D-WA115-7-5 — Contracts au téléphone : trois montants par ligne, chacun sur sa ligne avec le nom de sa colonne à gauche
   (empilés sans nom, « 0 MAD · 8,000 MAD » ne se lisaient plus). */
@media (max-width:480px){
 .nbt-inv .ds-table.stack.rows td.r[data-l]{flex:1 0 100%;margin-left:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;text-align:right}
 .nbt-inv .ds-table.stack.rows td.r[data-l]::before{text-align:left}
 .nbt-inv .ds-table.stack.rows td.r[data-l] .ds-cad{grid-column:2}
}
/* D-WA115-7-5 — clavier : l'anneau de focus de la maquette (ligne 43), borné à la coque. Au téléphone, le tiroir
   fermé est invisible (ses liens sortent de la tabulation) ; il le reste jusqu'à la fin de sa glissade. */
.nbt-inv :focus-visible{outline:2px solid var(--ds-brand);outline-offset:2px}
@media (max-width:900px){
 .nbt-inv .ds-side{visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
 .nbt-inv.ds-app.open .ds-side{visibility:visible;transition:transform .2s ease}
}
/* D-WA115-7-5 — la bulle « d'où vient ce chiffre » s'ouvre par-dessus le (i) des légendes d'indicateur : sans ceci,
   le pointeur passait sur la bulle, le (i) perdait :hover, la bulle se fermait — clignotement mesuré 2 fois sur 3. */
.nbt-inv .ds-tip{pointer-events:none}