/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ui.css - COMPOSANTS COMMUNS DES PAGES (2026-10-19, demande de François)

   Une seule structure pour les pages de ticker, de liste, de portefeuille, de stratégie, de
   combinaison et de patrimoine : conteneur, cartes, en-têtes de carte, onglets, rails de tuiles,
   tuiles KPI, boutons, interrupteurs, cases à cocher, champs, sélecteurs segmentés, tableaux,
   badges, bandeaux, états vides, cadenas.

   RÈGLES
   1. Cette feuille est chargée par navbar.html, donc sur TOUTES les pages, et APRÈS les feuilles
      propres à chaque page (le <link> est dans le corps, les feuilles des pages dans l'en-tête) :
      à spécificité égale, c'est elle qui l'emporte.
   2. Les composants sont définis sur des classes `tf-*` (spécificité 0,1,0), utilisables partout.
   3. Les classes HISTORIQUES des six pages (.lv2-card, .sig-card, .pat-card, .tk-sec…) sont des
      ALIAS déclarés ici, en un seul endroit, à l'intérieur du périmètre `S` (le conteneur de
      chacune de ces pages) : `S .alias` fait 0,2,0 et l'emporte sur les règles de page du type
      `.liste-v2 .lv2-card`. Une règle de page à trois classes ou à identifiant reste plus forte :
      c'est, par convention, une variante VOULUE.
   4. Nouveau gabarit, nouveau rendu JS : utiliser les classes `tf-*`, pas de nouvelle classe
      locale pour un composant déjà décrit ici. Les alias sont là pour la transition.
   5. Les COULEURS passent par les jetons de base.css (thème sombre automatique) ; seuls les
      aplats à texte blanc des boutons (#0075d1) et les rouges / verts sémantiques sont figés.

   S = :is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
       `body` y figure depuis le 2026-10-19 (soir) pour les onglets, rails, tuiles, KPI, boutons, champs,
       interrupteurs, badges, cadenas et bandeaux : ces alias valent sur TOUT le site (modales, hubs,
       /opportunites…), la liste ne servant plus qu'à donner aux règles le poids de DEUX classes (:is()
       prend le poids de son argument le plus lourd). Les CARTES, EN-TÊTES DE CARTE et TABLEAUX (sections
       1, 2 et 10) restent limités aux six pages : ailleurs, une « carte » est souvent l'enveloppe nue d'un
       tableau (hubs, /opportunites) et le tableau a sa propre densité.

   Déjà partagés dans base.css (inchangés) : le conteneur de page `.tf-page`, la carte d'en-tête
   `.tf-entete-carte`, le fil d'Ariane `.tf-ariane`, les capsules ticker, le sélecteur de devise
   `.mp-devise`, la capsule glissante `.seg-pill`, l'infobulle maison (data-tip).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --tf-r-card: 14px;          /* rayon des cartes */
  --tf-r: 10px;               /* rayon des tuiles, KPI, bandeaux */
  --tf-r-btn: 8px;            /* rayon des boutons et champs */
  --tf-pad-card: 18px 20px;   /* marge intérieure des cartes */
  --tf-h-btn: 34px;           /* hauteur des boutons et champs */
  --tf-pos: #15803d;          /* gain (sémantique, jamais décoratif) */
  --tf-neg: #b91c1c;          /* perte / suppression */
  --tf-attention: #d97706;    /* notifications, alertes modérées */
  --tf-btn: #0075d1;          /* aplat des boutons pleins, FIGÉ dans les deux thèmes (texte blanc 4,7:1) */
  --tf-btn-h: #005ea8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tf-pos: #34d399; --tf-neg: #f87171; --tf-attention: #fbbf24; }
}
:root[data-theme="dark"] { --tf-pos: #34d399; --tf-neg: #f87171; --tf-attention: #fbbf24; }


/* ══ 1. CARTE ══════════════════════════════════════════════════════════════════════════════ */
.tf-card,
:is(.tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.tk-sec, .tki-carte, .lv2-card, .sig-card, .pat-card, .pat-kpi-carte, .ml-carte) {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--tf-r-card);
  box-shadow: var(--sh-sm, 0 2px 6px rgba(0,0,0,.07));
  padding: var(--tf-pad-card);
  min-width: 0;
  box-sizing: border-box;
}
/* Carte qui ne contient qu'un tableau : le tableau touche les bords. */
.tf-card--table,
:is(.tf-page, .pat-v2) .ml-carte { padding: 0; overflow: hidden; }
/* Carte RAIL (colonne de tuiles à gauche) : marge réduite, collée en haut de sa colonne. */
.tf-card--rail,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-rail, .pat-compo-rail, .pg-inv-rail, .strat-res-rail, .tk-indic-rail) {
  padding: 14px; align-self: start;
}
@media (max-width: 640px) {
  .tf-card,
  :is(.tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
    :is(.tk-sec, .tki-carte, .lv2-card, .sig-card, .pat-card, .pat-kpi-carte) { padding: 14px; }
}
/* Carte REPLIABLE : <details class="tf-card"> ou .tf-card.tf-pliable.plie (classe posée par le JS). */
details.tf-card > summary { list-style: none; cursor: pointer; }
details.tf-card > summary::-webkit-details-marker { display: none; }
details.tf-card > summary .tf-card-title,
.tf-pliable > .tf-card-head .tf-card-title { position: relative; padding-right: 28px; }
details.tf-card > summary .tf-card-title::after,
.tf-pliable > .tf-card-head .tf-card-title::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
details.tf-card:not([open]) > summary .tf-card-title::after,
.tf-pliable.plie > .tf-card-head .tf-card-title::after { transform: translateY(-30%) rotate(-45deg); }
details.tf-card:not([open]) > summary .tf-card-head,
.tf-pliable.plie > .tf-card-head { margin-bottom: 0; }
.tf-pliable.plie > :not(.tf-card-head) { display: none; }


/* ══ 2. EN-TÊTE DE CARTE : liseré vertical à l'accent, titre 1rem gras, sous-titre ════════ */
/* L'accent du liseré : couleur du portefeuille sur sa page (--pf-accent), sinon le bleu. */
.tf-card-head,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.tk-sec-head, .lv2-section-head, .pat-sec-head, .pat-sec-head-sm, .strat-sec-head) {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  position: relative; padding-left: 11px; margin: 0 0 14px;
  list-style: none; cursor: default;
}
.tf-card-head::before,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.tk-sec-head, .lv2-section-head, .pat-sec-head, .pat-sec-head-sm, .strat-sec-head)::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px;
  background: var(--pf-accent, var(--blue, #018ffa));
}
/* Le titre : seul (standalone, direct dans la carte) il porte lui-même le liseré ; dans un
   en-tête, c'est l'en-tête qui le porte. */
.tf-card-title,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.tk-h2, .lv2-section-title, .pat-sec-title, .pat-sec-title-sm, .sig-h2, .strat-sec-title, .tki-carte-titre) {
  display: block; flex: none; min-width: 0;
  font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: 0;
  color: var(--text, #013a6b);
  border: 0; position: relative; padding: 0 0 0 11px; margin: 0 0 14px;
}
.tf-card-title::before,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.tk-h2, .lv2-section-title, .pat-sec-title, .pat-sec-title-sm, .sig-h2, .strat-sec-title, .tki-carte-titre)::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px;
  background: var(--pf-accent, var(--blue, #018ffa));
}
.tf-card-head > .tf-card-title,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.tk-sec-head, .lv2-section-head, .pat-sec-head, .pat-sec-head-sm, .strat-sec-head, .pat-jr-head)
  :is(.tk-h2, .lv2-section-title, .pat-sec-title, .pat-sec-title-sm, .sig-h2, .strat-sec-title, .tf-card-title) {
  padding-left: 0; margin: 0;
}
.tf-card-head > .tf-card-title::before,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.tk-sec-head, .lv2-section-head, .pat-sec-head, .pat-sec-head-sm, .strat-sec-head, .pat-jr-head)
  :is(.tk-h2, .lv2-section-title, .pat-sec-title, .pat-sec-title-sm, .sig-h2, .strat-sec-title, .tf-card-title)::before { content: none; }
/* En-tête sur UNE ligne : titre (et sous-titre) à gauche, actions à droite. */
.tf-card-head--ligne,
:is(.tf-page, .pat-focus, .pat-v2, .prod-page) .pat-sec-head:has(> .pat-sec-outils) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.tf-card-head--ligne > .tf-card-title { flex: 1 1 auto; }
.tf-card-head--ligne > .tf-card-hint { flex: 1 1 100%; }
.tf-card-actions, :is(.tf-page, .pat-focus, .pat-v2, .prod-page) .pat-sec-head > .pat-sec-outils { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; }
/* Carte « Liste utilisée / Portefeuille lié » des stratégies : titre à gauche, lien « Ouvrir … → » à droite. */
:is(.strat-page, .prod-page) .strat-carte-tete > .sig-h2 { flex: 1 1 auto; margin: 0 0 4px; }
:is(.strat-page, .prod-page) .strat-carte-tete > :is(.strat-carte-ouvrir, a) { margin-left: auto; }
/* Sous-titre : .82rem gris. Dans un en-tête il prend la ligne sous le titre ; seul il suit le
   titre (marge négative pour coller à lui) ; dans le titre (<small>) il est en ligne. */
.tf-card-hint,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.tk-sec-hint, .lv2-section-hint, .pat-sec-hint, .pat-sec-hint-sm, .sig-sub, .strat-sec-hint, .strat-pf-hint, .tki-carte-hint) {
  display: block; flex: none; min-width: 0;
  font-size: .82rem; font-weight: 400; line-height: 1.45; color: var(--text-3, #64748b);
  margin: 0; letter-spacing: 0; text-transform: none;
}
.tf-card-hint b, .tf-card-hint strong,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-section-hint, .pat-sec-hint, .pat-sec-hint-sm, .sig-sub, .strat-sec-hint) :is(b, strong) { color: var(--text-2); }
/* Sous-titre SEUL après un titre seul (pas d'en-tête enveloppant). */
.tf-card > .tf-card-title + .tf-card-hint,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.tk-sec, .tki-carte, .lv2-card, .sig-card, .pat-card) > :is(.tk-h2, .sig-h2, .tki-carte-titre) + :is(.tk-sec-hint, .sig-sub, .strat-pf-hint, .tki-carte-hint) {
  margin: -9px 0 14px 11px;
}
/* Sous-titre EN LIGNE dans le titre (<small class="tf-card-hint">). */
.tf-card-title > .tf-card-hint,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page) .tk-h2 > .tk-h2-sub {
  display: inline; flex: none; margin: 0 0 0 8px; font-size: .8rem; font-weight: 500;
  color: var(--text-3, #64748b);
}
/* Note « verrouillé » posée en absolu à droite de l'en-tête (listes) : le sous-titre ne passe pas dessous. */
:is(.liste-v2) .lv2-section-head:has(> .lv2-verrou-note) { padding-right: 100px; }
/* Liens dans un sous-titre. */
.tf-card-hint a { color: var(--blue); text-decoration: none; }
.tf-card-hint a:hover { text-decoration: underline; }


/* ══ 3. ONGLETS DE PAGE : boîte en pilule, onglet actif en aplat bleu (capsule glissante) ══ */
.tf-tabs,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.liste-tabs-boite, .prod-tabs-boite, .pat-tabs-boite, .tk-tabs-boite) {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px; background: var(--bg, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px; --seg-pill: var(--blue-dk, #0075d1);
}
.tf-tabs > .seg-pill,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.liste-tabs-boite, .prod-tabs-boite, .pat-tabs-boite, .tk-tabs-boite) > .seg-pill {
  box-shadow: 0 2px 8px -2px rgba(1, 143, 250, .55);
}
.tf-tab,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.liste-tab, .prod-tab, .pat-page-tab, .tk-tab) {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: -.005em; line-height: normal;
  padding: 8px 18px; border: none; border-radius: 999px; background: transparent;
  color: var(--text-3, #64748b); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color var(--tr, .18s), background var(--tr, .18s);
}
.tf-tab:hover,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.liste-tab, .prod-tab, .pat-page-tab, .tk-tab):hover { color: var(--text, #013a6b); background: var(--blue-50, #e8f4ff); }
.tf-tab:is(.actif, .active),
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.liste-tab, .prod-tab, .pat-page-tab, .tk-tab):is(.actif, .active) {
  color: #fff; background: var(--blue-dk, #0075d1); cursor: default;
}
/* Lien de sortie à côté des onglets (« Liste … », « Investissement DCA → ») : gris au repos, cadre
   et texte bleus au survol, flèche qui glisse. Hauteur = celle de la boîte (41 px). */
.tf-tab-lien,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.liste-tab-lien, .prod-tab-lien, .strat-pf-lien) {
  display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box; height: 41px;
  padding: 0 16px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: .92rem; font-weight: 700; letter-spacing: -.005em; white-space: nowrap;
  color: var(--text-3, #64748b); background: transparent; text-decoration: none;
  transition: background var(--tr, .18s), color var(--tr, .18s), border-color var(--tr, .18s);
}
.tf-tab-lien:hover,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.liste-tab-lien, .prod-tab-lien, .strat-pf-lien):hover {
  color: var(--blue-dk, #0075d1); border-color: var(--blue, #018ffa); background: var(--blue-50, #e8f4ff); text-decoration: none;
}
.tf-tab-lien svg, :is(.liste-tab-lien, .prod-tab-lien, .strat-pf-lien) svg { transition: transform .15s ease; }
.tf-tab-lien:hover svg, :is(.liste-tab-lien, .prod-tab-lien, .strat-pf-lien):hover svg { transform: translateX(2px); }
/* Téléphone : grille de boutons (règle de base.css étendue à .tf-tabs). */
@media (max-width: 640px) {
  .tf-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); border-radius: 12px; width: 100%; }
  .tf-tab { min-height: 40px; font-size: .86rem; white-space: normal; }
  .tf-tab-lien { height: 40px; }
}


/* ══ 4. RAIL DE TUILES (colonne de gauche) + grille rail / contenu ═════════════════════════ */
.tf-rail-grid,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-grid, .pat-compo-grid, .pg-inv-grid, .strat-res-grid, .tk-indic-grid) {
  display: grid; grid-template-columns: minmax(196px, 236px) minmax(0, 1fr); gap: 16px;
}
.tf-rail-head,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-rail-head, .pat-compo-rail-head, .strat-res-rail-head) {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px;
}
.tf-rail-titre,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-rail-titre, .pat-compo-rail-titre, .strat-res-rail-titre),
:is(.tf-page, .tk-page) .tk-indic-rail > .tk-h2 {
  display: block; font-size: .95rem; font-weight: 800; line-height: 1.3; color: var(--text, #013a6b);
  padding: 0; margin: 0 0 10px; border: 0;
}
:is(.tf-page, .tk-page) .tk-indic-rail > .tk-h2::before { content: none; }
.tf-rail-head > .tf-rail-titre,
:is(.lv2-inv-rail-head, .pat-compo-rail-head, .strat-res-rail-head) > :is(.lv2-inv-rail-titre, .pat-compo-rail-titre, .strat-res-rail-titre) { margin: 0; }
.tf-rail-hint,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-rail-hint, .pat-compo-rail-hint, .strat-res-rail-hint) {
  font-size: .74rem; color: var(--text-3, #64748b); line-height: 1.35;
}
.tf-tiles,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-items, .pat-compo-items, .pg-inv-items, .strat-res-items, .tk-indics) {
  display: flex; flex-direction: column; gap: 6px;
}
/* La TUILE : bouton (ou lien) à liseré gauche, libellé / valeur / sous-titre. */
.tf-tile,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item, .pat-compo-item, .pg-inv-item, .strat-res-item, .tk-indic) {
  display: block; width: 100%; box-sizing: border-box; text-align: left; text-decoration: none;
  font-family: inherit; font-size: inherit; cursor: pointer; position: relative;
  padding: 9px 12px; color: var(--text, #013a6b);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0); border-left: 3px solid transparent; border-radius: var(--tf-r);
  box-shadow: none; transform: none;
  transition: border-color var(--tr, .18s), background var(--tr, .18s), box-shadow var(--tr, .18s);
}
.tf-tile:hover,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item, .pat-compo-item, .pg-inv-item, .strat-res-item, .tk-indic):hover {
  background: var(--blue-50, #e8f4ff); border-color: var(--blue, #018ffa);
  box-shadow: 0 2px 10px -6px var(--blue, #018ffa); transform: none;
}
.tf-tile:is(.actif, .active),
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item, .pat-compo-item, .pg-inv-item, .strat-res-item, .tk-indic):is(.actif, .active) {
  background: var(--blue-50, #e8f4ff); border-color: var(--blue, #018ffa); border-left-width: 4px;
  box-shadow: 0 2px 12px -4px var(--blue, #018ffa);
}
.tf-tile:focus-visible,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item, .pat-compo-item, .pg-inv-item, .strat-res-item, .tk-indic):focus-visible {
  outline: 2px solid var(--blue, #018ffa); outline-offset: 2px;
}
.tf-tile-lbl,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-lbl, .pat-compo-lbl, .pg-inv-lbl, .strat-res-lbl, .tk-indic-lbl) {
  display: block; font-size: .78rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none;
  color: var(--text-2, #374151);
}
.tf-tile-val,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-val, .pat-compo-val, .pg-inv-val, .strat-res-val, .tk-indic-val) {
  display: block; margin-top: 3px; font-size: 1.16rem; font-weight: 800; line-height: 1.2; letter-spacing: 0;
  color: var(--text, #013a6b); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tf-tile-sub,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-sub, .pat-compo-sub, .pg-inv-sub, .strat-res-sub, .tk-indic-sub) {
  display: block; margin-top: 2px; font-size: .7rem; line-height: 1.3; color: var(--text-3, #64748b);
}
/* Une valeur qui est un MOT (motif de sortie…) peut passer à la ligne. */
.tf-tile-val--txt, :is(.strat-page) .strat-res-val-txt { font-size: .92rem; white-space: normal; line-height: 1.25; }
/* Survol et sélection : libellé et valeur prennent le bleu foncé. */
.tf-tile:hover .tf-tile-lbl, .tf-tile:is(.actif, .active) .tf-tile-lbl, .tf-tile:is(.actif, .active) .tf-tile-val,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item, .pat-compo-item, .pg-inv-item, .strat-res-item, .tk-indic):hover
  :is(.lv2-inv-lbl, .pat-compo-lbl, .pg-inv-lbl, .strat-res-lbl, .tk-indic-lbl),
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item, .pat-compo-item, .pg-inv-item, .strat-res-item, .tk-indic):is(.actif, .active)
  :is(.lv2-inv-lbl, .pat-compo-lbl, .pg-inv-lbl, .strat-res-lbl, .tk-indic-lbl,
      .lv2-inv-val, .pat-compo-val, .pg-inv-val, .strat-res-val, .tk-indic-val) {
  color: var(--blue-dk, #0075d1);
}
/* Rail de la page ticker : le corps de la tuile est un <span>, le chevron n'a plus lieu d'être. */
:is(.tf-page, .tk-page) .tk-indic-body { display: block; }
:is(.tf-page, .tk-page) .tk-indic-chev { display: none; }
/* TUILE D'ACTION (« Investir sur cette liste », « Mettre en production ») : aplat bleu, texte blanc,
   chevron ; pas de liseré gauche, ni au repos ni sélectionnée. */
.tf-tile--action,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item.lv2-inv-phare, .strat-res-item.strat-reg-phare) {
  background: var(--tf-btn); border-color: var(--tf-btn); border-left-width: 1px;
  padding-left: 14px; padding-right: 26px; color: #fff;
}
.tf-tile--action:hover, .tf-tile--action:is(.actif, .active),
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item.lv2-inv-phare, .strat-res-item.strat-reg-phare):is(:hover, .actif, .active) {
  background: var(--tf-btn-h); border-color: var(--tf-btn-h); border-left-width: 1px; box-shadow: none;
}
.tf-tile--action::after,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item.lv2-inv-phare, .strat-res-item.strat-reg-phare)::after {
  content: '›'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; font-weight: 700; line-height: 1; color: #fff;
}
.tf-tile--action :is(.tf-tile-lbl, .tf-tile-val, .tf-tile-sub),
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-inv-item.lv2-inv-phare, .strat-res-item.strat-reg-phare):is(:hover, .actif, .active, :not(:hover))
  :is(.lv2-inv-lbl, .lv2-inv-val, .lv2-inv-sub, .strat-res-lbl, .strat-res-val, .strat-res-sub) { color: #fff; }
.tf-tile--action .tf-tile-lbl,
:is(.liste-v2, .strat-page) :is(.lv2-inv-phare .lv2-inv-lbl, .strat-reg-phare .strat-res-lbl) { font-weight: 800; }
.tf-tile--action .tf-tile-sub,
:is(.liste-v2, .strat-page) :is(.lv2-inv-phare .lv2-inv-sub, .strat-reg-phare .strat-res-sub) { opacity: .82; }
/* TUILE NOTIFIÉE (ordres à traiter…) : ambre. */
.tf-tile--notif,
:is(.tf-page, .pat-focus, .pat-v2, .prod-page) .pat-compo-item.pat-compo-notif {
  border-color: var(--tf-attention); border-left-color: var(--tf-attention); background: rgba(217, 119, 6, .07);
}
.tf-tile--notif:is(:hover, .actif, .active),
:is(.tf-page, .pat-focus, .pat-v2, .prod-page) .pat-compo-item.pat-compo-notif:is(:hover, .actif, .active) {
  border-color: var(--tf-attention); background: rgba(217, 119, 6, .12); box-shadow: 0 2px 12px -4px var(--tf-attention);
}
.tf-tile--notif .tf-tile-val,
:is(.tf-page, .pat-focus, .pat-v2, .prod-page) .pat-compo-item.pat-compo-notif:is(:hover, .actif, .active, :not(:hover)) .pat-compo-val { color: #b45309; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.tf-tile--notif .tf-tile-val, .pat-compo-item.pat-compo-notif .pat-compo-val) { color: #fbbf24; }
}
:root[data-theme="dark"] :is(.tf-tile--notif .tf-tile-val, .pat-compo-item.pat-compo-notif .pat-compo-val) { color: #fbbf24; }
/* Pilule d'action dans une tuile notifiée (« Traiter → »). */
.tf-tile-action-pilule, .pat-compo-traiter {
  display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 999px;
  background: var(--tf-attention); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
}
@media (max-width: 1000px) {
  .tf-rail-grid,
  :is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
    :is(.lv2-inv-grid, .pat-compo-grid, .pg-inv-grid, .strat-res-grid, .tk-indic-grid) { grid-template-columns: minmax(0, 1fr); }
  .tf-card--rail,
  :is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
    :is(.lv2-inv-rail, .pat-compo-rail, .pg-inv-rail, .strat-res-rail, .tk-indic-rail) { position: static; max-height: none; }
  .tf-tiles,
  :is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
    :is(.lv2-inv-items, .pat-compo-items, .pg-inv-items, .strat-res-items, .tk-indics) {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  }
}


/* ══ 5. TUILES KPI (« Chiffres clés ») : fond de page, cadre fin, libellé en capitales ════ */
.tf-kpis,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.apport-kpis, .liste-kpi-bar, .report-kpi-bar, .pf-kpis, .pat-kpi-bar, .pat-kpi-grid, .strat-kpi-grille, .strat-kpi-liens,
      .tk-syn-grid, .pat-jr-kpis, .pat-rep-kpis, .pat-courbes-kpis, .tki-kpis, .dca-kpis) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
  background: none; border: 0; box-shadow: none; overflow: visible; margin: 0; padding: 0;
  container-type: inline-size;   /* la taille des valeurs suit la LARGEUR de la grille (voir @container) */
}
.tf-kpis:not(:last-child),
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.apport-kpis, .liste-kpi-bar, .report-kpi-bar, .pf-kpis, .pat-kpi-grid, .strat-kpi-grille,
      .tk-syn-grid, .pat-jr-kpis, .pat-rep-kpis, .pat-courbes-kpis, .tki-kpis, .dca-kpis):not(:last-child) { margin-bottom: 14px; }
.tf-kpis--3, :is(.strat-page) .strat-kpi-grille--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tf-kpis--4, :is(.tk-page) .tk-syn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tf-kpis--4, :is(.tk-page) .tk-syn-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
:is(.tf-page, .pat-v2) .pat-kpi-sep { display: none; }
.tf-kpi,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.apport-kpi, .liste-kpi-item, .pf-kpi, .pat-kpi-item, .pat-kpi-tile, .strat-kpi, .strat-kpi-lien, .tk-syn-tuile,
      .pat-jr-kpi, .pat-rep-kpi, .tki-kpi, .dca-kpi) {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; min-width: 0;
  padding: 10px 13px; text-align: left; font-family: inherit; font-size: inherit; text-decoration: none;
  color: var(--text, #013a6b); background: var(--bg, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--tf-r); box-shadow: none;
}
.tf-kpi--hero, :is(.strat-page, .prod-page, .pat-focus) .pf-kpi--hero { border-left: 4px solid var(--blue, #018ffa); }
.tf-kpi-lbl,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.apport-kpi-lbl, .liste-kpi-label, .pf-kpi-label, .pat-kpi-label, .strat-kpi-lbl, .tk-syn-lbl, .pat-jr-kpi-lbl,
      .pat-rep-kpi-lbl, .tki-kpi-lbl, .dca-kpi-lbl) {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.25; color: var(--text-3, #64748b); margin: 0; text-align: left; white-space: normal;
}
.tf-kpi-val,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.apport-kpi-val, .liste-kpi-main, .pf-kpi-value, .pat-kpi-main, .pat-kpi-val, .strat-kpi-val, .tk-syn-val, .pat-jr-kpi-val,
      .pat-rep-kpi-val, .tki-kpi-val, .dca-kpi-val) {
  display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0;
  color: var(--text, #013a6b); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left;
  overflow: hidden; text-overflow: ellipsis;
}
.tf-kpi-val.pos { color: var(--tf-pos); }
.tf-kpi-val.neg { color: var(--tf-neg); }
.tf-kpi-sub,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.apport-kpi-sub, .liste-kpi-sub, .pf-kpi-sub, .pat-kpi-sub, .pat-kpi-part, .pat-kpi-pct, .strat-kpi-sub, .tk-syn-sub,
      .pat-jr-kpi-sub, .pat-rep-kpi-sub, .tki-kpi-sub) {
  display: block; font-size: .72rem; font-weight: 400; line-height: 1.35; color: var(--text-3, #64748b);
  margin: 1px 0 0; white-space: normal; text-align: left;
}
/* Vue d'ensemble d'un investissement DCA : le libellé est écrit APRÈS la valeur dans le gabarit, il passe devant. */
:is(.prod-page) .dca-kpi-lbl { order: -1; }
:is(.prod-page) .dca-kpi-sub { font-size: .8rem; font-weight: 600; opacity: .8; margin-left: 5px; }
/* Chiffres clés de la Présentation d'une stratégie : les enfants portent les classes du RAIL (.strat-res-*),
   ils prennent ici le dessin des KPI. */
:is(.strat-page) .strat-kpi-lien .strat-res-lbl {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.25; color: var(--text-3, #64748b); margin: 0;
}
:is(.strat-page) .strat-kpi-lien .strat-res-val {
  display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0;
  color: var(--text, #013a6b); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(.strat-page) .strat-kpi-lien .strat-res-sub { display: block; font-size: .72rem; font-weight: 400; line-height: 1.35; color: var(--text-3, #64748b); margin: 1px 0 0; }
/* Grille ÉTROITE (colonne à côté d'un rail, carte à deux colonnes) : valeurs un peu plus petites,
   pour que « 619 659,37 € » tienne dans une tuile de 166 px. */
@container (max-width: 980px) {
  .tf-kpi-val,
  :is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.apport-kpi-val, .liste-kpi-main, .pf-kpi-value, .pat-kpi-main, .pat-kpi-val, .strat-kpi-val, .tk-syn-val, .pat-jr-kpi-val,
      .pat-rep-kpi-val, .tki-kpi-val, .dca-kpi-val) { font-size: 1.12rem; }
  :is(.strat-page) .strat-kpi-lien .strat-res-val { font-size: 1.12rem; }
}
@container (max-width: 560px) {
  .tf-kpi-val,
  :is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.apport-kpi-val, .liste-kpi-main, .pf-kpi-value, .pat-kpi-main, .pat-kpi-val, .strat-kpi-val, .tk-syn-val, .pat-jr-kpi-val,
      .pat-rep-kpi-val, .tki-kpi-val, .dca-kpi-val) { font-size: 1.02rem; }
  :is(.strat-page) .strat-kpi-lien .strat-res-val { font-size: 1.02rem; }
}
/* Unité discrète accolée à la valeur. */
.tf-kpi-u, :is(.liste-v2) .apport-kpi-u { font-size: .74rem; font-weight: 600; color: var(--text-3, #64748b); }
/* KPI CLIQUABLE (ouvre une section) : main, chevron à droite, survol bleuté. */
.tf-kpi--clic,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.strat-kpi-lien, .tk-syn-tuile, .pat-jour1j-clic) {
  position: relative; cursor: pointer; padding-right: 30px;
  transition: border-color var(--tr, .18s), background var(--tr, .18s), box-shadow var(--tr, .18s);
}
.tf-kpi--clic:hover,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.strat-kpi-lien, .tk-syn-tuile, .pat-jour1j-clic):hover {
  border-color: var(--blue, #018ffa); background: var(--blue-50, #e8f4ff); box-shadow: 0 2px 10px -6px var(--blue, #018ffa);
}
/* La tuile « Durée » (.strat-kpi-fixe) est un chiffre, pas un lien. */
:is(.strat-page) .strat-kpi-lien.strat-kpi-fixe { cursor: default; padding-right: 13px; }
:is(.strat-page) .strat-kpi-lien.strat-kpi-fixe:hover { border-color: var(--border, #e2e8f0); background: var(--bg, #f1f5f9); box-shadow: none; }
:is(.strat-page) .strat-kpi-lien.strat-kpi-fixe::after { content: none; }
.tf-kpi--clic::after,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.strat-kpi-lien, .pat-jour1j-clic)::after {
  content: '›'; position: absolute; top: 10px; right: 12px; font-size: 1rem; line-height: 1; color: var(--text-4, #94a3b8);
}
.tf-kpi-chev, :is(.tk-page) .tk-syn-chev { position: absolute; top: 10px; right: 12px; font-size: 1rem; line-height: 1; color: var(--text-4, #94a3b8); }
.tf-kpi--clic:hover::after, .tf-kpi--clic:hover .tf-kpi-chev, :is(.tk-page) .tk-syn-tuile:hover .tk-syn-chev { color: var(--blue, #018ffa); }
.tf-kpi--clic:focus-visible, :is(.tk-page) .tk-syn-tuile:focus-visible { outline: 2px solid var(--blue, #018ffa); outline-offset: 2px; }
/* Verdict en pilule dans une tuile KPI (page ticker). */
.tf-kpi-verdict, :is(.tk-page) .tk-syn-verdict {
  display: inline-block; align-self: flex-start; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; line-height: 1.35; color: var(--text-2, #374151);
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
}
/* Petit écran : deux colonnes, la tuile « total » sur toute la largeur. */
@media (max-width: 700px) {
  .tf-kpis,
  :is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
    :is(.apport-kpis, .liste-kpi-bar, .report-kpi-bar, .pf-kpis, .pat-kpi-bar, .pat-kpi-grid, .strat-kpi-grille, .strat-kpi-liens,
        .tk-syn-grid, .pat-jr-kpis, .pat-rep-kpis, .pat-courbes-kpis, .tki-kpis) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tf-kpi--total, :is(.tf-page, .pat-v2) .pat-kpi-item--total { grid-column: 1 / -1; }
  .tf-kpi--total .tf-kpi-val, :is(.tf-page, .pat-v2) .pat-kpi-item--total .pat-kpi-main { font-size: 1.5rem; }
}


/* ══ 6. BOUTONS ════════════════════════════════════════════════════════════════════════════ */
.tf-btn,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-btn, .lv2-prod-btn, .strat-btn-prod, .strat-btn-secondaire, .strat-btn-danger, .strat-btn-prod-off,
      .btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .pat-pf-add-btn, .ptf-btn, .pg-btn, .opp-btn-portfolio, .opp-btn-mini,
      .ac-btn, .sens-appl, .lv2-cand-ajout, .strat-cand-ajout, .pat-jr-btn, .tk-page-btn, .strat-carte-ouvrir-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box;
  font-family: inherit; font-size: .86rem; font-weight: 650; line-height: 1; white-space: nowrap;
  min-height: var(--tf-h-btn); padding: 0 14px; border-radius: var(--tf-r-btn);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; filter: none;
  transition: background var(--tr, .18s), color var(--tr, .18s), border-color var(--tr, .18s), box-shadow var(--tr, .18s);
}
.tf-btn:focus-visible { outline: 2px solid var(--blue, #018ffa); outline-offset: 2px; }
/* PRIMAIRE : aplat bleu figé, texte blanc. */
.tf-btn--primaire, .tf-btn.tf-btn--primaire:hover,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-btn-primaire, .lv2-prod-btn, .strat-btn-prod, .btn-primary, .pat-pf-add-btn, .ac-btn--primary, .sens-appl, .lv2-cand-ajout,
      .strat-cand-ajout, .opp-btn-portfolio, .tk-page-btn) {
  background: var(--tf-btn); color: #fff; border-color: var(--tf-btn);
}
.tf-btn--primaire:hover,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-btn-primaire, .lv2-prod-btn, .strat-btn-prod, .btn-primary, .pat-pf-add-btn, .ac-btn--primary, .sens-appl, .lv2-cand-ajout,
      .strat-cand-ajout, .opp-btn-portfolio, .tk-page-btn):hover {
  background: var(--tf-btn-h); border-color: var(--tf-btn-h); color: #fff; filter: none;
}
/* SECONDAIRE : fond de carte, cadre fin ; bleuté au survol. */
.tf-btn--secondaire,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-btn-sec, .strat-btn-secondaire, .btn-secondary, .ptf-btn, .pg-btn, .opp-btn-mini, .ac-btn--ghost, .ac-btn--outline, .pat-jr-btn, .lv2-btn) {
  background: var(--surface, #fff); color: var(--text-2, #374151); border-color: var(--border, #e2e8f0);
}
.tf-btn--secondaire:hover,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-btn-sec, .strat-btn-secondaire, .btn-secondary, .ptf-btn, .pg-btn, .opp-btn-mini, .ac-btn--ghost, .ac-btn--outline, .pat-jr-btn, .lv2-btn):hover:not(:disabled) {
  background: var(--blue-50, #e8f4ff); color: var(--blue-dk, #0075d1); border-color: var(--blue, #018ffa);
}
/* `.opp-btn-portfolio` est aussi la base des boutons des modales des stratégies : la variante
   secondaire ou danger qui l'accompagne doit l'emporter sur le primaire. */
:is(.strat-page, .prod-page) .opp-btn-portfolio.strat-btn-secondaire { background: var(--surface, #fff); color: var(--text-2, #374151); border-color: var(--border, #e2e8f0); }
:is(.strat-page, .prod-page) .opp-btn-portfolio.strat-btn-secondaire:hover:not(:disabled) { background: var(--blue-50, #e8f4ff); color: var(--blue-dk, #0075d1); border-color: var(--blue, #018ffa); }
:is(.strat-page, .prod-page) .opp-btn-portfolio:is(.strat-btn-danger, .strat-btn-prod-off) { background: #b91c1c; color: #fff; border-color: #b91c1c; }
/* DANGER : rouge des suppressions. */
.tf-btn--danger,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-btn-danger, .strat-btn-danger, .btn-danger, .strat-btn-prod-off) {
  background: #b91c1c; color: #fff; border-color: #b91c1c;
}
.tf-btn--danger:hover,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-btn-danger, .strat-btn-danger, .btn-danger, .strat-btn-prod-off):hover:not(:disabled) { background: #991b1b; border-color: #991b1b; }
/* Cas composés, déclarés à part pour ne pas gonfler le poids des listes. Les variantes primaire et
   danger d'un `.lv2-btn` l'emportent sur sa base secondaire (même poids, déclarées après elle). */
:is(.liste-v2, .lv2-onglets-bar, .strat-page, .prod-page, .tf-page) .lv2-btn:is(.lv2-btn-primaire, .dca-ok) { background: var(--tf-btn); color: #fff; border-color: var(--tf-btn); }
:is(.liste-v2, .lv2-onglets-bar, .strat-page, .prod-page, .tf-page) .lv2-btn:is(.lv2-btn-primaire, .dca-ok):hover:not(:disabled) { background: var(--tf-btn-h); border-color: var(--tf-btn-h); color: #fff; }
:is(.liste-v2, .lv2-onglets-bar, .strat-page, .prod-page, .tf-page) .lv2-btn.lv2-btn-danger { background: #b91c1c; color: #fff; border-color: #b91c1c; }
:is(.liste-v2, .lv2-onglets-bar, .strat-page, .prod-page, .tf-page) .lv2-btn.lv2-btn-danger:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; }
/* FANTÔME : texte seul, fond au survol. */
.tf-btn--ghost,
:is(.tf-page, .pat-focus, .pat-v2, .prod-page) .btn-ghost { background: transparent; color: var(--text-3, #64748b); border-color: transparent; }
.tf-btn--ghost:hover,
:is(.tf-page, .pat-focus, .pat-v2, .prod-page) .btn-ghost:hover { background: var(--bg, #f1f5f9); color: var(--text, #013a6b); }
/* Tailles. */
.tf-btn--sm,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.ptf-btn, .pg-btn, .opp-btn-mini, .sens-appl, .lv2-cand-ajout, .strat-cand-ajout, .pat-jr-btn, .btn-ghost) {
  min-height: 28px; padding: 0 10px; font-size: .78rem; gap: 5px;
}
.tf-btn--lg, :is(.liste-v2) .lv2-prod-btn { min-height: 40px; padding: 0 20px; font-size: .9rem; }
.tf-btn--icone { width: var(--tf-h-btn); padding: 0; }
.tf-btn--sm.tf-btn--icone { width: 28px; }
/* Désactivé ou bloqué (aria-disabled) : atténué, curseur interdit, aucun survol. */
.tf-btn:is(:disabled, [aria-disabled="true"], [data-bloque]),
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-btn, .lv2-prod-btn, .strat-btn-prod, .strat-btn-secondaire, .strat-btn-danger, .btn-primary, .btn-secondary, .btn-danger,
      .pat-pf-add-btn, .ptf-btn, .pg-btn, .opp-btn-portfolio, .sens-appl, .lv2-cand-ajout, .strat-cand-ajout, .pat-jr-btn):is(:disabled, [aria-disabled="true"], [data-bloque]) {
  opacity: .45; cursor: not-allowed; box-shadow: none;
}
/* Bouton de fermeture / icône de ligne (✎ ✕) : carré discret. */
.tf-btn-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-3, #64748b); cursor: pointer;
  font: inherit; line-height: 1; transition: background var(--tr, .18s), color var(--tr, .18s);
}
.tf-btn-ico:hover { background: var(--bg, #f1f5f9); color: var(--text, #013a6b); }
.tf-btn-ico--danger:hover { background: #fdeaea; color: #b91c1c; }
.tf-btn-ico svg { width: 15px; height: 15px; }


/* ══ 7. INTERRUPTEURS ═══════════════════════════════════════════════════════════════════════
   <label class="tf-switch"><input type="checkbox"><span class="tf-switch-piste"></span></label>
   34 × 18 px, gris au repos, bleu coché ; `.tf-switch--sm` (30 × 16) dans les tableaux. */
.tf-switch,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page) :is(.switch, .la-sw, .strat-switch) {
  position: relative; display: inline-block; width: 34px; height: 18px; flex: none; margin: 0; cursor: pointer; vertical-align: middle;
}
.tf-switch > input,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page) :is(.switch, .la-sw, .strat-switch) > input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0; display: block;
}
.tf-switch-piste,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.switch > .slider, .la-sw > .la-sw-piste, .strat-switch > .strat-slider) {
  position: absolute; inset: 0; border-radius: 999px; background: var(--text-4, #94a3b8); cursor: pointer;
  transition: background var(--tr, .18s);
}
.tf-switch-piste::before,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.switch > .slider, .la-sw > .la-sw-piste, .strat-switch > .strat-slider)::before {
  content: ''; position: absolute; left: 2px; top: 2px; bottom: auto; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--tr, .18s);
}
.tf-switch > input:checked + .tf-switch-piste,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.switch, .la-sw, .strat-switch) > input:checked + :is(.slider, .la-sw-piste, .strat-slider) { background: var(--blue, #018ffa); }
.tf-switch > input:checked + .tf-switch-piste::before,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.switch, .la-sw, .strat-switch) > input:checked + :is(.slider, .la-sw-piste, .strat-slider)::before { transform: translateX(16px); }
.tf-switch > input:disabled + .tf-switch-piste,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.switch, .la-sw, .strat-switch) > input:disabled + :is(.slider, .la-sw-piste, .strat-slider) { opacity: .5; cursor: not-allowed; }
.tf-switch > input:disabled:checked + .tf-switch-piste,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.switch, .la-sw, .strat-switch) > input:disabled:checked + :is(.slider, .la-sw-piste, .strat-slider) {
  background: color-mix(in srgb, var(--blue, #018ffa) 55%, var(--border, #e2e8f0)); opacity: 1;
}
.tf-switch > input:focus-visible + .tf-switch-piste,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.switch, .la-sw, .strat-switch) > input:focus-visible + :is(.slider, .la-sw-piste, .strat-slider) { outline: 2px solid var(--blue, #018ffa); outline-offset: 2px; }
/* Petit interrupteur (tableaux, lignes de paramètres). */
.tf-switch--sm,
:is(.tf-page, .liste-v2, .strat-page, .prod-page, .pat-focus, .pat-v2) :is(.la-sw, .strat-switch) { width: 30px; height: 16px; }
.tf-switch--sm > .tf-switch-piste::before,
:is(.tf-page, .liste-v2, .strat-page, .prod-page, .pat-focus, .pat-v2) :is(.la-sw > .la-sw-piste, .strat-switch > .strat-slider)::before { width: 12px; height: 12px; }
.tf-switch--sm > input:checked + .tf-switch-piste::before,
:is(.tf-page, .liste-v2, .strat-page, .prod-page, .pat-focus, .pat-v2) :is(.la-sw, .strat-switch) > input:checked + :is(.la-sw-piste, .strat-slider)::before { transform: translateX(14px); }
/* Variante TEAL (transmission Saxo) : coché = teal foncé. */
.tf-switch--teal > input:checked + .tf-switch-piste,
:is(.strat-page, .prod-page) .strat-switch.strat-switch-teal > input:checked + .strat-slider { background: var(--teal-dk, #0f766e); }
/* Interrupteur + libellé, dans une pilule (Accumulation / Distribution). */
.tf-switch-pilule {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 4px 12px 4px 10px; box-sizing: border-box;
  border: 1px solid var(--border, #e2e8f0); border-radius: 999px; background: var(--surface, #fff);
  font-size: .8rem; font-weight: 600; color: var(--text-2, #374151); white-space: nowrap;
}


/* ══ 8. CASES À COCHER, RADIOS, CHAMPS, SÉLECTEURS ════════════════════════════════════════ */
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(input[type="checkbox"], input[type="radio"]):not(:is(.switch, .la-sw, .strat-switch, .tf-switch) > input) {
  accent-color: var(--blue, #018ffa); width: 16px; height: 16px; margin: 0; cursor: pointer; vertical-align: middle; flex: none;
}
.tf-check,
:is(.tf-page, .pat-focus, .pat-v2, .prod-page) .pat-check {
  display: inline-flex; align-items: flex-start; gap: 8px; font-size: .84rem; line-height: 1.4; color: var(--text-2, #374151); cursor: pointer;
}
.tf-check > input, :is(.tf-page, .pat-focus, .pat-v2, .prod-page) .pat-check > input { margin-top: 2px; }
/* Champ de saisie et sélecteur. */
.tf-input, .tf-select,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.pat-input, .la-ajout-input, .strat-num, .js-periode, .dca-champ, .strat-param > input[type="date"], .strat-params select) {
  box-sizing: border-box; min-height: var(--tf-h-btn); padding: 6px 10px;
  font-family: inherit; font-size: .88rem; line-height: 1.3; color: var(--text, #013a6b);
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: var(--tf-r-btn);
  transition: border-color var(--tr, .18s), box-shadow var(--tr, .18s);
}
.tf-input:focus, .tf-select:focus,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.pat-input, .la-ajout-input, .strat-num, .js-periode, .dca-champ, .strat-param > input[type="date"], .strat-params select):focus {
  outline: none; border-color: var(--blue, #018ffa); box-shadow: 0 0 0 3px var(--blue-50, #e8f4ff);
}
.tf-input:disabled, .tf-select:disabled,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.pat-input, .la-ajout-input, .strat-num, .js-periode, .dca-champ, .strat-param > input[type="date"], .strat-params select):disabled {
  background: var(--bg, #f1f5f9); color: var(--text-3, #64748b); cursor: not-allowed; opacity: 1;
}
.tf-input::placeholder, :is(.liste-v2, .pat-v2, .pat-focus) :is(.pat-input, .la-ajout-input)::placeholder { color: var(--text-4, #94a3b8); }
.tf-input--num, :is(.tf-page, .pat-focus, .pat-v2, .prod-page) .pat-input-num { text-align: right; font-variant-numeric: tabular-nums; }
.tf-input--erreur, :is(.tf-page, .pat-focus, .pat-v2, .prod-page) .pat-input.pat-input-erreur { border-color: #b91c1c; background: #fdeaea; }
.tf-input--sm { min-height: 26px; padding: 3px 7px; font-size: .82rem; border-radius: 6px; }
/* Champ avec libellé au-dessus. */
.tf-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tf-champ > .tf-label, .tf-label { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3, #64748b); }
/* Montant en PILULE (libellé + valeur + unité) - barre de réglages des listes, réglages DCA. */
.tf-pilule-champ {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; box-sizing: border-box; min-height: 30px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 999px; background: var(--surface, #fff);
  font-size: .84rem; color: var(--text, #013a6b);
}
.tf-pilule-champ:focus-within { border-color: var(--blue, #018ffa); box-shadow: 0 0 0 2px var(--blue-50, #e8f4ff); }
.tf-pilule-champ > input { width: 58px; padding: 2px 0; border: 0; background: transparent; text-align: right; font: inherit; color: inherit; outline: none; }
.tf-pilule-champ > .tf-label { font-size: .72rem; }
.tf-pilule-champ > .tf-unite { color: var(--text-3, #64748b); font-size: .74rem; font-weight: 600; }
.tf-pilule-champ:has(input:disabled) { background: var(--bg, #f1f5f9); border-style: dashed; opacity: .75; cursor: not-allowed; }


/* ══ 9. SÉLECTEUR SEGMENTÉ (durées 1A/3A/5A, Annuel/Trimestriel, En l'état/DCA) ═══════════ */
.tf-seg,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.graph-controls, .tki-fin-toolbar, .proj-seg) {
  position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 3px;
  background: var(--bg, #f1f5f9); border: 1px solid var(--border, #e2e8f0); border-radius: 999px;
  --seg-pill: var(--blue-dk, #0075d1);
}
.tf-seg-btn,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.duration-button, .tki-fin-btn, .proj-seg-btn) {
  position: relative; z-index: 1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: .78rem; font-weight: 600; line-height: 1.15; height: 25px; padding: 0 12px; margin: 0;
  border: none; border-radius: 999px; background: transparent; color: var(--text-3, #64748b); cursor: pointer; opacity: 1;
  transition: color var(--tr, .18s), background var(--tr, .18s);
}
.tf-seg-btn:hover,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.duration-button, .tki-fin-btn, .proj-seg-btn):hover { color: var(--text, #013a6b); background: var(--surface, #fff); border: none; opacity: 1; }
.tf-seg-btn:is(.actif, .active),
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.duration-button, .tki-fin-btn, .proj-seg-btn):is(.actif, .active) {
  color: #fff; background: var(--blue-dk, #0075d1); font-weight: 700; border: none; opacity: 1;
}
/* Période PARTIELLE (liste : des composants manquent au début) : capsule bleu foncé. */
.tf-seg.tf-seg--partiel, :is(.liste-v2) .graph-controls.periode-partielle { --seg-pill: #0b57a6; }
.tf-seg-btn.partiel, :is(.liste-v2) .duration-button.partiel { font-style: italic; }
/* Filet vertical entre deux groupes de réglages. */
.tf-sep-v, :is(.tk-page) .toolbar-divider { width: 1px; height: 22px; background: var(--border, #e2e8f0); flex: none; }


/* ══ 10. TABLEAUX : typographie, filets, survol, pied de total ═════════════════════════════
   La DENSITÉ (marges intérieures des cellules) reste propre à chaque tableau : elle dépend du
   nombre de colonnes (13 sur la composition d'un portefeuille, 6 sur la santé financière).
   `.tf-table` seule porte une densité par défaut ; `.tf-table--dense` la resserre. */
.tf-table,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) {
  width: 100%; border-collapse: collapse; font-size: .84rem; color: var(--text-2, #374151);
}
.tf-table th, .tf-table td { padding: 8px 10px; }
.tf-table--dense th, .tf-table--dense td { padding: 5px 6px; }
.tf-table thead th,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) thead th {
  text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25;
  color: var(--text-3, #64748b); background: var(--surface, #fff); border-bottom: 2px solid var(--border, #e2e8f0); vertical-align: bottom;
}
.tf-table tbody td,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) tbody td {
  border-bottom: 1px solid var(--border-lt, #e1e7ee); vertical-align: middle;
}
.tf-table tbody tr:last-child td,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) tbody tr:last-child td { border-bottom: none; }
.tf-table tbody tr:hover > td,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) tbody tr:hover > td {
  background: color-mix(in srgb, var(--blue-50, #e8f4ff) 55%, transparent);
}
.tf-table :is(th, td):is(.num, .n), .tf-table :is(th, td)[data-num],
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) :is(th, td):is(.num, .n) {
  text-align: right; font-variant-numeric: tabular-nums;
}
/* Pied de TOTAL ou de MOYENNE : bleu pâle, filet bleu, gras. */
.tf-table tfoot :is(td, th),
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) tfoot :is(td, th) {
  background: var(--blue-50, #e8f4ff); border-top: 2px solid var(--blue, #018ffa); font-weight: 700; color: var(--text, #013a6b);
}
/* Colonnes triables : main, bleu quand la colonne porte le tri, flèche. */
.tf-table th.sortable, .tf-table th.la-th-tri,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) th:is(.sortable, .la-th-tri) {
  cursor: pointer; user-select: none; white-space: nowrap;
}
.tf-table th:is(.sortable, .la-th-tri):hover,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) th:is(.sortable, .la-th-tri):hover { color: var(--text, #013a6b); }
.tf-table th:is(.sort-asc, .sort-desc, .tri-actif),
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) th:is(.sort-asc, .sort-desc, .tri-actif) { color: var(--blue, #018ffa); }
.tf-table th.sortable.sort-asc::after,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) th.sortable.sort-asc::after { content: ' ▲'; font-size: .6rem; }
.tf-table th.sortable.sort-desc::after,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table, .pat-table, .opp-table, .pond-table, .ml-table, .strat-table-detail, .ptf-table, .pat-jr-table, .pat-agr-table, .dca-table, .tki-table) th.sortable.sort-desc::after { content: ' ▼'; font-size: .6rem; }
/* Gains / pertes dans les cellules. */
.tf-table td:is(.gain, .pos, .pf-pos) { color: var(--tf-pos); font-weight: 600; }
.tf-table td:is(.loss, .neg, .pf-neg) { color: var(--tf-neg); font-weight: 600; }
/* Enveloppe à défilement horizontal : le tableau défile dans sa carte, jamais la page. */
.tf-table-wrap,
:is(.tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.la-table-wrap, .pat-table-wrap, .opp-table-wrap, .pat-proj-table-wrap, .scroll-x) {
  overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}


/* ══ 11. BADGES D'ÉTAT ═════════════════════════════════════════════════════════════════════ */
.tf-badge,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page)
  :is(.lv2-badge-prod, .strat-badge-prod, .strat-badge-page, .lv2-badge-sim) {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; border: 1px solid transparent;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; line-height: 1.3; white-space: nowrap; text-decoration: none;
}
/* Production / état actif : TEAL FONCÉ, texte blanc (le teal ne porte jamais un chiffre financier). */
.tf-badge--prod,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page) :is(.lv2-badge-prod, .strat-badge-prod) {
  background: var(--teal-dk, #0f766e); color: #fff; border-color: var(--teal-dk, #0f766e);
}
/* Information (compte, « 2 stratégies », simulation) : bleu pâle. */
.tf-badge--info,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page) :is(.strat-badge-page, .lv2-badge-sim) {
  background: var(--blue-50, #e8f4ff); color: var(--blue-dk, #0075d1); border-color: var(--blue, #018ffa);
}
.tf-badge--attention { background: var(--tf-attention); color: #fff; border-color: var(--tf-attention); }
.tf-badge--danger { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.tf-badge--neutre { background: var(--bg, #f1f5f9); color: var(--text-2, #374151); border-color: var(--border, #e2e8f0); }
.tf-badge--succes { background: #e7f8ec; color: #166534; border-color: #12a35a; }
.tf-badge--lg { padding: 4px 11px; font-size: .78rem; }


/* ══ 12. CADENAS (verrou de composition) et ICÔNE COURTIER ═════════════════════════════════ */
.tf-cadenas,
:is(body, .tf-page, .tk-page, .liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .strat-page) :is(.lv2-cadenas, .pat-cadenas) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; box-sizing: border-box;
  font-family: inherit; font-size: .9rem; line-height: 1; height: 34px; padding: 0 11px; border-radius: 9px; cursor: pointer;
  background: var(--surface, #fff); border: 2px solid var(--border, #e2e8f0);
  transition: border-color var(--tr, .18s), background var(--tr, .18s);
}
.tf-cadenas--seul, :is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas--seul, .pat-cadenas--seul) { width: 34px; padding: 0; }
.tf-cadenas-ico, :is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas-ico, .pat-cadenas-ico) { font-size: 1.2rem; line-height: 1; transform: translateY(-1.4px); }
.tf-cadenas.verrou, :is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas, .pat-cadenas).verrou { border-color: #b91c1c; background: rgba(185, 28, 28, .05); }
.tf-cadenas.ouvert, :is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas, .pat-cadenas).ouvert { border-color: #12a35a; background: rgba(18, 163, 90, .06); }
.tf-cadenas:hover, :is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas, .pat-cadenas):hover { filter: brightness(.98); }
.tf-cadenas:focus-visible, :is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas, .pat-cadenas):focus-visible { outline: 2px solid var(--blue, #018ffa); outline-offset: 2px; }
.tf-cadenas:disabled, :is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas, .pat-cadenas):disabled { cursor: not-allowed; opacity: .75; }
.tf-cadenas-min, :is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas-min, .pat-cadenas-min) {
  font-size: .78rem; font-weight: 800; color: #12a35a; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tf-courtier, :is(.pat-focus, .pat-v2, .prod-page, .tf-page) .pat-courtier {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; box-sizing: border-box;
  border-radius: 9px; background: var(--surface, #fff); border: 2px solid var(--text-4, #94a3b8); color: var(--text-4, #94a3b8); text-decoration: none;
}
.tf-courtier svg, :is(.pat-focus, .pat-v2, .prod-page, .tf-page) .pat-courtier svg { width: 18px; height: 18px; }
.tf-courtier.on, :is(.pat-focus, .pat-v2, .prod-page, .tf-page) .pat-courtier.on { border-color: #12a35a; color: #12a35a; background: rgba(18, 163, 90, .06); cursor: default; }


/* ══ 13. ÉLÉMENTS AJOUTÉS (proposés avec l'uniformisation) ═════════════════════════════════ */
/* BANDEAU D'INFORMATION : <div class="tf-note tf-note--attention"><b class="tf-note-titre">…</b> texte
   <button class="tf-note-x">×</button></div>. Quatre tons : info (défaut), attention, alerte, succès. */
.tf-note,
:is(.strat-page) .strat-verrou-optim {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--blue-100, #bfdfff); border-left: 4px solid var(--blue, #018ffa); border-radius: var(--tf-r);
  background: var(--blue-50, #e8f4ff); color: var(--text-2, #374151); font-size: .86rem; line-height: 1.5;
}
.tf-note-titre { font-weight: 700; color: var(--text, #013a6b); }
.tf-note--attention, :is(.strat-page) .strat-verrou-optim { background: #fff7e6; border-color: #fcd9a0; border-left-color: var(--tf-attention); }
.tf-note--alerte { background: #fdeaea; border-color: #f3b4b4; border-left-color: #b91c1c; }
.tf-note--succes { background: #e7f8ec; border-color: #a9e2bd; border-left-color: #12a35a; }
.tf-note-x {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-3, #64748b); cursor: pointer; font-size: 1rem; line-height: 1;
}
.tf-note-x:hover { background: rgba(0, 0, 0, .06); color: var(--text, #013a6b); }
.tf-note:has(> .tf-note-x) { padding-right: 40px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tf-note--attention, :root:not([data-theme="light"]) .strat-page .strat-verrou-optim { background: #2b1d07; border-color: #5a3d0c; }
  :root:not([data-theme="light"]) .tf-note--alerte { background: #3a1212; border-color: #6b2222; }
  :root:not([data-theme="light"]) .tf-note--succes { background: #0f2b1a; border-color: #1f5a35; }
}
:root[data-theme="dark"] .tf-note--attention, :root[data-theme="dark"] .strat-page .strat-verrou-optim { background: #2b1d07; border-color: #5a3d0c; }
:root[data-theme="dark"] .tf-note--alerte { background: #3a1212; border-color: #6b2222; }
:root[data-theme="dark"] .tf-note--succes { background: #0f2b1a; border-color: #1f5a35; }

/* NOTE DE LECTURE sous un graphique ou un tableau : filet pointillé, texte secondaire. */
.tf-lecture,
:is(body, .tf-page, .tk-page, .liste-v2, .pat-focus, .pat-v2, .prod-page, .strat-page) :is(.la-note, .pat-note-lect, .tki-carte-note, .tki-note) {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--border, #e2e8f0);
  font-size: .8rem; line-height: 1.55; color: var(--text-2, #374151); max-width: none;
}
.tf-lecture:empty, :is(.liste-v2, .pat-focus, .pat-v2, .tk-page) :is(.la-note, .pat-note-lect):empty { display: none; }

/* ÉTAT VIDE : cadre pointillé, texte centré. */
.tf-vide,
:is(.tf-page, .pat-focus, .pat-v2, .prod-page) :is(.pat-jr-vide, .pat-rep-vide),
:is(.tk-page) .tki-vide {
  padding: 18px 16px; border: 1px dashed var(--border, #e2e8f0); border-radius: var(--tf-r); background: var(--bg, #f1f5f9);
  color: var(--text-3, #64748b); font-size: .86rem; line-height: 1.5; text-align: center; margin: 0;
}
.tf-vide b { color: var(--text-2, #374151); }

/* CHARGEMENT : bloc gris animé en attendant les données (<div class="tf-skeleton" style="height:120px">). */
.tf-skeleton {
  position: relative; overflow: hidden; border-radius: var(--tf-r); min-height: 14px;
  background: color-mix(in srgb, var(--border, #e2e8f0) 60%, var(--bg, #f1f5f9));
}
.tf-skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: tf-skel 1.4s infinite;
}
@keyframes tf-skel { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tf-skeleton::after { animation: none; } }
.tf-skeleton--ligne { height: 14px; }
.tf-skeleton--titre { height: 20px; width: 40%; }
.tf-skeleton--graphique { height: 220px; }

/* LIEN FLÉCHÉ (« Ouvrir la liste → ») : la flèche glisse au survol. */
.tf-lien-fleche {
  display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700;
  color: var(--blue-dk, #0075d1); text-decoration: none; white-space: nowrap;
}
.tf-lien-fleche:hover { text-decoration: none; filter: brightness(1.12); }
.tf-lien-fleche::after { content: '→'; transition: transform .15s ease; }
.tf-lien-fleche:hover::after { transform: translateX(3px); }

/* PAGINATION d'un tableau (archives, titres candidats). */
.tf-pagination,
:is(.liste-v2, .prod-page, .strat-page) :is(.dca-archives-pagination, .lv2-cand-pagination) {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px;
  font-size: .8rem; color: var(--text-2, #374151);
}
.tf-pagination label, :is(.liste-v2, .prod-page, .strat-page) :is(.dca-archives-pagination, .lv2-cand-pagination) label { display: inline-flex; align-items: center; gap: 6px; }
.tf-pagination select, :is(.liste-v2, .prod-page, .strat-page) :is(.dca-archives-pagination, .lv2-cand-pagination) select { width: auto; min-height: 28px; padding: 2px 6px; }
.tf-pagination-pages, :is(.prod-page, .strat-page) .dca-archives-pages { display: inline-flex; align-items: center; gap: 8px; }

/* BARRE D'ACTIONS d'une carte (boutons alignés) et FILET horizontal. */
.tf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tf-toolbar--droite { justify-content: flex-end; }
.tf-sep { height: 1px; background: var(--border-lt, #e1e7ee); border: 0; margin: 14px 0; }

/* PUCE DE FILTRE (sélection multiple : classes d'actifs, étiquettes). */
.tf-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--text-2, #374151);
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); transition: background var(--tr, .18s), color var(--tr, .18s), border-color var(--tr, .18s);
}
.tf-chip:hover { border-color: var(--blue, #018ffa); color: var(--blue-dk, #0075d1); }
.tf-chip:is(.actif, .active, [aria-pressed="true"]) { background: var(--blue-50, #e8f4ff); color: var(--blue-dk, #0075d1); border-color: var(--blue, #018ffa); }

/* GRILLE DE CARTES côte à côte (deux ou trois colonnes, une seule sur petit écran). */
.tf-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tf-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .tf-duo, .tf-trio { grid-template-columns: minmax(0, 1fr); } }
/* Pile de cartes (16 px entre deux cartes : le même écart que sous l'en-tête de page). */
.tf-pile { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Variation du jour / gain sémantiques en texte courant. */
.tf-pos { color: var(--tf-pos); }
.tf-neg { color: var(--tf-neg); }

/* ── Liens sans classe (texte courant) : couleur du site, lisible en clair ET en sombre ──
   2026-10-19 : ils gardaient le bleu par défaut du navigateur (#0000ee), illisible sur le fond
   sombre. :where() = spécificité nulle, toute règle de page l'emporte. */
:where(a:not([class])) { text-underline-offset: 2px; }
/* Tout lien sans couleur propre (avec ou sans classe) : plus jamais le bleu / violet du navigateur.
   Spécificité nulle : n'importe quelle règle de page l'emporte. */
:where(a:link), :where(a:visited) { color: var(--blue-dk, #0075d1); }
:where(a:not([class])):hover { color: var(--blue, #018ffa); }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"]) a:link),
  :where(:root:not([data-theme="light"]) a:visited) { color: var(--blue, #4aa6f2); }
  :root:not([data-theme="light"]) :where(a:not([class])):hover { color: #8cc8f8; }
}
:where(:root[data-theme="dark"] a:link),
:where(:root[data-theme="dark"] a:visited) { color: var(--blue, #4aa6f2); }
:root[data-theme="dark"] :where(a:not([class])):hover { color: #8cc8f8; }

/* ── Légendes ApexCharts lisibles en thème sombre (2026-10-19) ──
   Un graphique qui ne règle pas `legend.labels.colors` (ex. matrice de corrélation de la vue
   Diversification) garde le texte gris foncé d'ApexCharts, posé en style en ligne : illisible sur
   fond sombre. Toutes les légendes passent au texte secondaire du thème. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .apexcharts-legend-text { color: var(--text-2, #c3cfdb) !important; }
}
:root[data-theme="dark"] .apexcharts-legend-text { color: var(--text-2, #c3cfdb) !important; }

/* Cadenas des en-têtes (listes, portefeuilles, /patrimoine) réduit deux fois (2026-10-19) :
   34 → 26 → 20 px, icône 1,2 → .68 rem ; en bande compactée 16 px. */
:is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas, .pat-cadenas) { height: 20px; padding: 0 6px; gap: 4px; border-radius: 6px; border-width: 1.5px; }
:is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas--seul, .pat-cadenas--seul) { width: 20px; padding: 0; }
:is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas-ico, .pat-cadenas-ico) { font-size: .68rem; transform: translateY(-.8px); }
:is(.liste-v2, .lv2-onglets-bar, .pat-focus, .pat-v2, .prod-page, .tf-page) :is(.lv2-cadenas-min, .pat-cadenas-min) { font-size: .62rem; }
.liste-v2.lv2-titre-rang.compact .lv2-cadenas, .prod-titre-rang.compact .pat-cadenas { height: 16px; }
.liste-v2.lv2-titre-rang.compact .lv2-cadenas--seul, .prod-titre-rang.compact .pat-cadenas--seul { width: 16px; }
.liste-v2.lv2-titre-rang.compact .lv2-cadenas-ico, .prod-titre-rang.compact .pat-cadenas-ico { font-size: .56rem; transform: translateY(-.6px); }

/* Ligne « titre + cadenas » des pages de liste et de portefeuille (2026-10-19) : éléments EN BAS.
   Le titre perd l'interligne sous sa ligne de base (text-box-trim) : son texte touche le bas de la
   ligne, et le cadenas, aligné en bas, pose sa base sur celle du titre. */
:is(.lv2-titre-ligne, .pat-titre-ligne, .prod-titre-ligne) { align-items: flex-end; margin-bottom: 6px; }
:is(.lv2-titre-ligne, .pat-titre-ligne, .prod-titre-ligne) > h1 { text-box-trim: trim-end; text-box-edge: cap alphabetic; }
@supports not (text-box-trim: trim-end) {
  :is(.lv2-titre-ligne, .pat-titre-ligne, .prod-titre-ligne) > h1 { line-height: 1.1; }
}