/* ── Pages Stratégies d'investissement (IA) ── */

.strat-flash {
  background: #fdf4e3;
  border: 1px solid #fde9c3;
  color: #a16207;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: .87rem;
  margin-bottom: 14px;
}
/* Avertissement bloquant / erreur : en rouge */
.strat-flash-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
/* Succès (ex. ordre transmis à Saxo) : en vert */
.strat-flash-success {
  background: #e9f9ef;
  border-color: #b7e4c7;
  color: #0f5132;
}
.strat-flash code { background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }

.strat-invite { text-align: left; }
.strat-invite p { color: var(--text-2); margin: 0 0 14px; }

.strat-form { display: flex; flex-direction: column; gap: 6px; }
.strat-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-2);
  margin-top: 10px;
}
.strat-form input[type="text"], .strat-form textarea, .strat-form select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
  resize: vertical;
}
.strat-note { font-size: .78rem; color: var(--text-3); }
.strat-modes { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.strat-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
#blocIA, #blocPreset { display: flex; flex-direction: column; gap: 6px; }
.strat-submit { margin-top: 14px; align-self: flex-start; border: none; cursor: pointer; }
.strat-submit:disabled { opacity: .5; cursor: not-allowed; }
.strat-attente { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }

.strat-btn-suppr {
  border: none;
  background: var(--bg);
  color: var(--text-3);
  border-radius: 50%;
  width: 26px; height: 26px;
  cursor: pointer;
}
.strat-btn-suppr:hover { background: #fdeeee; color: #b91c1c; }

/* Production : badge, note, boutons, statuts d'ordres */
.strat-badge-prod {
  display: inline-block;
  background: var(--teal-dk, #0f766e);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: 2px;
}
/* Cadenas en tête du badge : la mise en production VERROUILLE les paramètres et
   la liste de supports. L'icône est un masque SVG coloré par `currentColor` -
   elle suit donc automatiquement la couleur du texte du badge, contrairement à
   un emoji 🔒 dont le rendu (couleur, chasse) varie d'une plateforme à l'autre. */
.strat-badge-prod::before {
  content: ""; display: inline-block; width: 8px; height: 10px;
  margin-right: 5px; vertical-align: -1px; background: currentColor;
  -webkit-mask: var(--ico-cadenas) center / contain no-repeat;
  mask: var(--ico-cadenas) center / contain no-repeat;
}
:root {
  --ico-cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M3.2 6.5V4.2a2.8 2.8 0 0 1 5.6 0v2.3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Crect x='1' y='6.2' width='10' height='8' rx='1.6' fill='%23000'/%3E%3C/svg%3E");
}
.strat-badge-prod-lg { font-size: 12px; padding: 3px 9px; vertical-align: 4px; }
.strat-badge-prod-lg::before { width: 10px; height: 12px; margin-right: 6px; }
/* Badge « combinée » : stratégie membre d'une combinaison enregistrée.
   VIOLET = convention « combinaison » du site (cf. .combi-page, badge du hub). */
.strat-badge-combi {
  display: inline-block;
  background: color-mix(in srgb, #6d28d9 12%, var(--surface, #fff));
  color: #6d28d9;
  border: 1px solid color-mix(in srgb, #6d28d9 26%, var(--surface, #fff));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 2px;
}
.strat-prod-points {
  margin: 8px 0 4px;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text, #1f2937);
  line-height: 1.55;
}
.strat-prod-points li { margin: 3px 0; }
.strat-prod-points em { font-style: normal; color: var(--text-2, #4b5563); }
/* Liste de la modale « mettre la combinaison en production » : puces mieux aérées */
.prod-combi-points { margin: 8px 0 12px; font-size: 13.5px; }
.prod-combi-points li { margin: 8px 0; }
/* Signal d'origine (informatif, non modifiable) - sous le titre de la page détail */
.strat-signal-source {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 0 8px;
  padding: 3px 10px 3px 8px;
  background: var(--teal-50, #e6f6f4);
  color: var(--teal-dk, #0f766e);
  border: 1px solid var(--teal-100, #9fd9d1);
  border-radius: 999px;
  font-size: .8rem;
}
.strat-signal-source svg { flex-shrink: 0; }
.strat-signal-source strong { font-weight: 700; }
.strat-btn-prod { background: var(--teal-dk, #0f766e); }
.strat-btn-prod:hover { background: #0c5f58; }
.strat-btn-prod-off {
  background: #dc2626;
  color: #fff;
  border: 1px solid #dc2626 !important;
  font-weight: 600;
}
.strat-btn-prod-off:hover { background: #b91c1c; border-color: #b91c1c !important; }
.strat-actions-cell { white-space: nowrap; }
.strat-btn-copie:hover { background: var(--blue-50, #eaf3ff); color: var(--blue); }
.strat-statut {
  display: inline-block;
  border-radius: 999px;
  font-size: 11px;
  padding: 2px 9px;
  background: var(--bg);
  color: var(--text-2);
}
/* Teintes dérivées de la SURFACE : sinon ces pastilles restent claires en sombre. */
.strat-statut-en-attente,
.strat-statut-en-place { background: color-mix(in srgb, var(--blue) 15%, var(--surface)); color: #0b5394; }
.strat-statut-execute { background: color-mix(in srgb, #15803d 15%, var(--surface)); color: #0f5132; }
.strat-statut-remplace { background: var(--bg); color: var(--text-3); }
.strat-statut-annule { background: var(--bg); color: var(--text-3); }
.strat-statut-non-execute { background: color-mix(in srgb, var(--gold) 17%, var(--surface)); color: #7a4d00; }
/* Trade THÉORIQUE non exécuté (Historique) : neutre, ni gain ni perte réels. */
.strat-statut-theo { background: color-mix(in srgb, #64748b 16%, var(--surface)); color: #475569; }
.strat-statut-erreur { background: color-mix(in srgb, #dc2626 13%, var(--surface)); color: #b91c1c; }
:root[data-theme="dark"] .strat-statut-en-attente,
:root[data-theme="dark"] .strat-statut-en-place   { color: #5db0ef; }
:root[data-theme="dark"] .strat-statut-execute    { color: #35c46a; }
:root[data-theme="dark"] .strat-statut-non-execute{ color: #e0a94a; }
:root[data-theme="dark"] .strat-statut-theo       { color: #94a3b8; }
:root[data-theme="dark"] .strat-statut-erreur     { color: #f4726f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .strat-statut-en-attente,
  :root:not([data-theme="light"]) .strat-statut-en-place   { color: #5db0ef; }
  :root:not([data-theme="light"]) .strat-statut-execute    { color: #35c46a; }
  :root:not([data-theme="light"]) .strat-statut-non-execute{ color: #e0a94a; }
  :root:not([data-theme="light"]) .strat-statut-theo       { color: #94a3b8; }
  :root:not([data-theme="light"]) .strat-statut-erreur     { color: #f4726f; }
}
.strat-ordre-detail { font-size: 12px; color: var(--text-2); }

/* Interrupteur à glissière (transmission automatique Saxo, onglet Production) -
   même gabarit que le switch Accumulation/Distribution de la page Liste ;
   gris = désactivée, bleu = activée */
.strat-switch { position: relative; display: inline-block; width: 30px; height: 15px; flex-shrink: 0; }
.strat-switch input { opacity: 0; width: 0; height: 0; }
.strat-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--border); transition: 0.4s; border-radius: 34px;
}
.strat-slider:before {
  position: absolute; content: ""; height: 11px; width: 11px; left: 2px; bottom: 2px;
  background-color: var(--surface); transition: 0.4s; border-radius: 50%;
}
.strat-switch input:checked + .strat-slider { background-color: var(--blue); }
.strat-switch input:checked + .strat-slider:before { transform: translateX(15px); }
/* Variante teal (transmission automatique Saxo) */
.strat-switch-teal input:checked + .strat-slider { background-color: var(--teal-dk, #0f766e); }
/* Slider VERROUILLÉ (checkbox disabled - stratégie en production) : grisé et non
   cliquable. La position du bouton conserve l'info activé/désactivé ; la teinte
   passe au gris (plus de bleu/teal « actif ») pour signaler le verrouillage. */
/* Slider VERROUILLÉ (production) : non cliquable et atténué, mais un slider COCHÉ
   reste BLEU (désaturé) - surtout pas gris, sinon on le croit décoché. La position
   du bouton + la teinte bleue signalent « activé, verrouillé ». */
.strat-switch input:disabled + .strat-slider { cursor: not-allowed; opacity: .7; }
.strat-switch input:disabled:checked + .strat-slider {
  background-color: color-mix(in srgb, var(--blue) 55%, var(--border)); }
.strat-switch-teal input:disabled:checked + .strat-slider {
  background-color: color-mix(in srgb, var(--teal-dk, #0f766e) 55%, var(--border)); }

/* ── Section « signaux de vente » : 4 stops communs présentés en cartes, chacune
   activable par un slider ; désactivée, la carte reste VISIBLE mais grisée. ── */
.stop-carte {
  border: 1px solid var(--border-lt); border-radius: var(--r-sm, 6px);
  padding: 4px 12px 8px; margin: 8px 0; background: var(--surface);
}
.stop-carte-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 0;
}
.stop-carte-titre { font-size: .9rem; font-weight: 600; color: var(--text); }
.stop-sous { margin: 2px 0; padding-left: 12px; border-left: 2px solid var(--border-lt); }
/* Réglage inactif : grisé mais toujours lisible (ne disparaît pas). */
.est-grise { opacity: .45; }
.est-grise .strat-num { pointer-events: none; }

/* Bouton « Graphique » de l'analyse par support + tooltip du graphique */
.strat-btn-graph {
  border: 1px solid var(--border, var(--border));
  background: var(--bg);
  color: var(--text-2);
  border-radius: 999px;
  font-size: 11px;
  padding: 2px 9px;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: 1px;
}
.strat-btn-graph:hover { border-color: var(--blue); color: var(--blue); }
.strat-btn-graph:disabled { opacity: .5; cursor: wait; }
.strat-graph-tip {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
}

/* Page détail */
.strat-desc-txt { color: var(--text-2); font-style: italic; margin: 0 0 10px; }
.strat-ia-note {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: .84rem;
  color: var(--text-2);
  margin-top: 8px;
}
.strat-count {
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-4);
  margin-left: 8px;
  text-transform: none;
}

.strat-params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px 26px;
}
.strat-groupe { min-width: 0; }
/* Paramètres de la combinaison : groupes empilés (période puis réglages par
   stratégie), pas côte à côte */
#combiParamsForm { grid-template-columns: 1fr; }
/* Libellés de période à largeur fixe pour aligner verticalement les champs
   date « début » et « fin » */
#combiParamsForm .strat-param-label { min-width: 130px; }
/* Ligne de total (combinaison) en pied du tableau des réglages */
.combi-total-row td { border-top: 2px solid var(--border); background: var(--bg); }

/* ── Repère visuel de la page COMBINAISON (accent violet #6d28d9) pour la
   distinguer nettement de la page d'une stratégie (même gabarit à onglets) ── */
.combi-page { border-top: 4px solid #6d28d9; }
/* Titre de la page en violet */
.combi-page .opp-title { color: #6d28d9; }
/* Badge de type : violet PLEIN pour la présence */
.strat-badge-page {
  display: inline-block;
  background: #6d28d9;
  color: #fff;
  border: 1px solid #6d28d9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 999px;
  padding: 3px 11px;
  margin-left: 10px;
  vertical-align: 4px;
  white-space: nowrap;
}
/* Fil d'Ariane : élément courant en violet */
.combi-page .strat-ariane .courant { color: #6d28d9; font-weight: 600; }
/* Barre d'onglets teintée violet + onglet actif violet */
.combi-page .strat-nav {
  border-bottom-color: #ddd0f7;
  background: color-mix(in srgb, #6d28d9 7%, var(--bg));
}
.combi-page .strat-nav a.actif,
.combi-page .strat-nav button.actif {
  color: #6d28d9;
  background: #f3effc;
  border-color: #ddd0f7;
}
/* Liseré des titres de section (Synthèse / Gains et pertes / Liquidités) en
   violet → l'accent se diffuse dans tout le contenu de la page */
/* Boutons pleins bleus → violet (sauf bouton doré, bouton rouge de retrait et
   bouton secondaire « Annuler ») */
.combi-page .opp-btn-portfolio:not(.strat-btn-prod):not(.strat-btn-prod-off):not(.strat-btn-secondaire):not(.strat-btn-optim-fin) {
  background: #6d28d9;
}
.combi-page .opp-btn-portfolio:not(.strat-btn-prod):not(.strat-btn-prod-off):not(.strat-btn-secondaire):not(.strat-btn-optim-fin):hover {
  background: #5b21b6;
}
/* Bouton secondaire (Annuler) : contour violet net, bien visible */
.combi-page .opp-btn-portfolio.strat-btn-secondaire {
  background: var(--surface);
  color: #6d28d9;
  border: 1px solid #6d28d9 !important;
  font-weight: 600;
}
.combi-page .opp-btn-portfolio.strat-btn-secondaire:hover {
  background: #f3effc;
}
.strat-param {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-lt);
  cursor: help;
}
.strat-param-label { font-size: .84rem; color: var(--text-2); }
/* Dates Début / Fin : largeur de libellé fixe pour aligner verticalement les
   deux champs input malgré des libellés de longueurs différentes. */
.strat-param-date .strat-param-label { min-width: 46px; }
.strat-num, .strat-param input[type="date"] {
  width: 110px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  font-family: inherit;
  flex-shrink: 0;
}
.strat-num { width: 80px; }
/* Champ VERROUILLÉ (production). Sans style dédié, un `disabled` garde
   l'apparence d'un champ saisissable : on croit pouvoir le modifier et on ne
   comprend pas pourquoi rien ne se passe. Vaut pour la vue combinée comme pour
   la page d'une stratégie en production. */
.strat-num:disabled,
.strat-param input[type="date"]:disabled,
.strat-params select:disabled {
  opacity: .7; cursor: not-allowed;
  background: var(--bg); color: var(--text-3);
}

.strat-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.strat-actions button { border: none; cursor: pointer; }
.strat-actions button:disabled { opacity: .5; cursor: not-allowed; }
.strat-btn-opt { background: #0f172a; }
.strat-btn-opt:hover { background: #1e293b; }

.strat-liste-choix {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--border-lt);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  margin-bottom: 16px;
}
.strat-liste-choix select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .87rem;
  font-family: inherit;
}

/* Tableau des stratégies : tout doit tenir dans la page sans défilement */
.sig-card .opp-table th { padding: 8px 8px; font-size: .72rem; line-height: 1.3; }
.sig-card .opp-table td { padding: 8px 8px; font-size: .84rem; }
/* Toutes les tables des pages stratégie/combinaison à la MÊME densité (8px),
   y compris celles hors .sig-card (« Réglages par stratégie » de l'onglet
   Paramètres) - sinon leurs lignes sont plus hautes que celles des autres onglets. */
.strat-page .opp-table th, .strat-page .opp-table td { padding: 8px 8px; }

.strat-combi-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.strat-combi-bar button { border: none; cursor: pointer; }

.strat-trades-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
.strat-trades-toolbar select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  font-family: inherit;
}

/* --- Page stratégies combinées : sections d'analyse --- */
.combi-sect-bar {
  height: 10px;
  min-width: 2px;
  border-radius: 5px;
  background: var(--blue);
  opacity: .75;
}

/* Bouton d'export pendant la construction du fichier Excel */
.combi-csv.is-loading { opacity: .6; pointer-events: none; }

/* Matrice de corrélation : noms de stratégies en en-tête sur plusieurs lignes
   (sinon la largeur déborde). Sélecteurs à spécificité suffisante pour battre
   `.opp-table .num` (0-2-0) qui impose white-space: nowrap sur les th.num. */
.combi-correl thead th,
.combi-correl thead th.num {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 120px;
  vertical-align: bottom;
}
.combi-correl thead th.num { text-align: right; }
.combi-correl tbody td:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 130px;
}
.combi-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.combi-save-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.combi-save-form input[type="text"] {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
  min-width: 280px;
}
.combi-save-form button { border: none; cursor: pointer; }

/* Combinaisons enregistrées (hub) */
.combi-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.combi-list-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.combi-list-item .strat-note { margin: 0; }

/* Membres d'une combinaison (tableau du hub) : une stratégie par ligne */
.combi-membres { list-style: none; margin: 0; padding: 0; }
.combi-membres li { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.combi-membres li + li { margin-top: 2px; }
.combi-membre-suppr {
  border: none; background: transparent; color: var(--text-2, #6b7280);
  cursor: pointer; font-size: .8rem; line-height: 1; padding: 2px 4px;
  border-radius: 5px; opacity: .55; flex: 0 0 auto;
}
.combi-membres li:hover .combi-membre-suppr { opacity: 1; }
.combi-membre-suppr:hover { background: #fdecec; color: #b91c1c; opacity: 1; }

/* Hub /strategies UNIQUEMENT (container.strat-hub) : en-têtes de colonnes qui
   restent collés lors du défilement de la PAGE (aucune barre de défilement
   dans le tableau) + lecture des lignes zébrée. On retire le cadre de
   défilement (overflow visible) pour que le thead s'épingle sous la barre
   supérieure fixe (TCB, 54px).
   ⚠️ Scopé sur .strat-hub (et non `.container:not(.strat-page)`) : sinon la règle
   fuit sur TOUTES les pages à `.container` simple qui chargent strategies.css
   (saxo_gestion, mes_productions, patrimoine_operations) et y supprime le
   défilement horizontal des tableaux, qui débordent alors de leur conteneur. */
.container.strat-hub .opp-table-wrap {
  overflow: visible;
}
.container.strat-hub .opp-table thead th {
  position: sticky;
  top: var(--topbar-h, 54px);
  z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--border);
}
/* Zébrage + survol : conservés sur toutes les pages hors pages stratégie/combinaison
   (hub, gestion Saxo, Mes productions, opérations d'un portefeuille). */
/* Tables SANS sous-lignes : zébrage CSS classique (nth-child fiable). */
.container:not(.strat-page) .opp-table:not(.js-tri) tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.container:not(.strat-page) .opp-table:not(.js-tri) tbody tr:hover {
  background: var(--blue-50, #eaf3ff);
}
/* Tables js-tri (à sous-lignes possibles) : le zébrage est posé par tri.js sur
   les lignes principales VISIBLES (.zebra-alt) - nth-child y serait faussé par
   les sous-lignes cachées. Le survol, déclaré APRÈS et à spécificité égale,
   l'emporte sur le zébrage. */
.container:not(.strat-page) .opp-table.js-tri tbody tr.zebra-alt {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.container:not(.strat-page) .opp-table.js-tri tbody tr:hover {
  background: var(--blue-50, #eaf3ff);
}

/* Onglets « Tickers » et « Historique » (pages stratégie ET combinaison) : la
   ligne de titres des grandes tables reste collée pendant le défilement de la
   PAGE, jusqu'au bas de la table. Elle s'épingle sous la barre supérieure fixe
   (TCB, 54px) + la barre d'onglets collante (.strat-nav ≈ 49px) → 103px.
   overflow:visible requis pour un sticky au niveau de la page (sinon le cadre
   de défilement du tableau piège le sticky). */
#onglet-tickers .opp-table-wrap,
#onglet-operations .opp-table-wrap {
  overflow: visible;
}
#onglet-tickers .opp-table thead th,
#onglet-operations .opp-table thead th {
  position: sticky;
  top: var(--barre-collante-bas, 135px);   /* même mesure que la colonne Analyse */
  z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--border);
}

/* Boutons d'enregistrement de la page détail (secondaires au « Calculer ») */
.strat-btn-secondaire {
  background: var(--surface);
  color: var(--blue);
  border: 1px solid var(--blue) !important;
}
.strat-btn-secondaire:hover:not(:disabled) {
  background: var(--blue);
  color: #fff;
}
.strat-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Zoom des graphiques (clic sur une carte -> modale agrandie) ── */
.pf-chart-zoomable { cursor: zoom-in; }
.pf-chart-zoomable:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
#chartModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(15, 23, 42, .55);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#chartModal.ouverte { display: flex; }
.chart-modal-boite {
  background: var(--surface, #fff);
  border-radius: 12px;
  width: min(1100px, 96vw);
  max-height: 92vh;
  overflow: auto;
  padding: 16px 20px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.chart-modal-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
/* Zoom actif : ApexCharts impose un curseur « crosshair » (croix fine) au
   survol, quasi invisible sur certains écrans - on garde la flèche normale,
   la sélection à la souris fonctionne à l'identique */
#chartModal .apexcharts-svg.apexcharts-zoomable.hovering-zoom { cursor: default; }

.chart-modal-aide {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-4);
  white-space: nowrap;
}
.chart-modal-fermer {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-2);
}
.chart-modal-fermer:hover { color: var(--text); }

/* ── Liaison portefeuille du patrimoine ↔ stratégie en production ── */
.strat-lier-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.strat-lier-label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--text-2); }
.strat-lier-label select, .strat-lier-label input { padding: 6px 8px; }
.strat-lier-mode { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin: 0; }
.strat-lier-mode label { display: flex; align-items: flex-start; gap: 6px; font-size: .88rem; color: var(--text); }
.opp-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.op-actions { white-space: nowrap; }
.opp-btn-mini {
  font-size: .78rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); cursor: pointer; margin-left: 4px;
}
.opp-btn-mini:hover { border-color: var(--blue); color: var(--blue); }
.op-qte { width: 92px; }
.op-mnt-reel { width: 110px; }
.op-info { cursor: help; color: var(--text-2); font-size: .82rem; }

/* Page opérations : champs verrouillés (opération validée) fondus dans la
   ligne - contour et fond transparents, valeur qui reste lisible */
#opsTable .strat-num:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  opacity: 1;
}
/* Bouton « Valider » = action principale de la page : teal plein à texte
   BLANC (même teinte que « Tout valider »), bien lisible et cohérent avec les
   autres boutons primaires du site (hover teal foncé, plus l'ambre résiduel). */
.op-valider {
  background: var(--teal-dk, #0f766e);
  border-color: var(--teal-dk, #0f766e);
  color: #fff;
  font-weight: 700;
}
.op-valider:hover {
  background: #0c5f58;
  border-color: #0c5f58;
  color: #fff;
}

/* ── Contrôle de liquidité (association liste ↔ stratégie) ── */
/* Hauteur RÉSERVÉE : le contrôle de liquidité se remplit après un aller-retour
   réseau, et sa ligne poussait tout le formulaire vers le bas ~300 ms après
   l'affichage. Une place gardée d'avance évite ce sursaut - utile en soi, et
   nécessaire pour que le repositionnement après ajout d'un signal tombe juste. */
.strat-liquidite {
  margin-top: 8px; font-size: .84rem; line-height: 1.4; border-radius: 8px;
  min-height: 38px;
}
.strat-liquidite:empty { min-height: 0; }
.strat-liquidite--load { color: var(--text-2); padding: 6px 0; }
.strat-liquidite--ok { color: #166534; background: rgba(22,101,52,.08);
                       border: 1px solid rgba(22,101,52,.25); padding: 8px 12px; }
.strat-liquidite--warn { color: #92400e; background: rgba(180,83,9,.08);
                         border: 1px solid rgba(180,83,9,.30); padding: 8px 12px; }
.strat-liquidite-liste { margin: 6px 0 0; padding-left: 18px; }
.strat-liquidite-liste li { margin: 2px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   REFONTE PAGE STRATÉGIE (2026-07-10) - hiérarchie, navigation, respiration
   ══════════════════════════════════════════════════════════════════════════ */
.strat-page { max-width: 1500px; }

/* En-tête : plus aéré, séparé du reste */
.strat-page .opp-header {
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.strat-page .opp-title { letter-spacing: -.01em; }
.strat-page .opp-subtitle { color: var(--text-3); max-width: 90ch; }

/* Navigation de section (collante sous la barre du haut) */
.strat-nav {
  position: sticky; top: var(--topbar-h, 54px); z-index: 50;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 -20px 22px; padding: 10px 20px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.strat-nav a,
.strat-nav button {
  font-size: .82rem; font-weight: 600; color: var(--text-3);
  text-decoration: none; padding: 5px 13px; border-radius: 999px;
  border: 1px solid transparent; transition: all var(--tr);
  background: none; cursor: pointer; font-family: inherit;
}
.strat-nav a:hover,
.strat-nav button:hover:not(:disabled) { color: var(--text); background: var(--surface); border-color: var(--border); }
.strat-nav a.actif,
.strat-nav button.actif { color: var(--blue); background: var(--blue-50); border-color: var(--blue-100); }
.strat-nav button:disabled { opacity: .4; cursor: not-allowed; }
/* Onglet « Optimisation » en VERT (#0acc3a) pour faire le lien avec le badge
   d'optimisation du hub « Mes stratégies ». Prime sur l'état actif bleu ET sur
   l'accent violet de la vue combinée (règles placées après, spécificité égale). */
.strat-nav button.strat-nav-optim { color: #0acc3a; }
.strat-nav button.strat-nav-optim:hover:not(:disabled) {
  color: #09b634; background: #eafbef; border-color: #b6f0c6;
}
.strat-nav button.strat-nav-optim.actif,
.combi-page .strat-nav button.strat-nav-optim.actif {
  color: #fff; background: #0acc3a; border-color: #0acc3a;
}

/* Bouton de bascule du menu déroulant d'onglets (mobile) : masqué en desktop.
   Sur desktop, la liste des onglets s'affiche en ligne comme avant. */
.strat-nav-toggle { display: none; }
.strat-nav-liste { display: flex; flex-wrap: wrap; gap: 6px; }

/* Sur petits écrans, les onglets se replient dans un MENU DÉROULANT (bouton
   « onglet courant ▾ » qui déploie la liste en panneau). Évite le débordement
   des pastilles sur plusieurs lignes. */
@media (max-width: 640px) {
  .strat-nav { flex-wrap: nowrap; }
  .strat-nav-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 9px 14px; border-radius: 10px;
    font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  }
  .strat-nav-toggle-caret { color: var(--text-3); transition: transform .18s; }
  .strat-nav.ouvert .strat-nav-toggle { color: var(--blue); border-color: var(--blue-100); }
  .strat-nav.ouvert .strat-nav-toggle-caret { transform: rotate(180deg); }

  .strat-nav-liste {
    display: none; position: absolute; left: 20px; right: 20px; top: calc(100% - 4px);
    flex-direction: column; flex-wrap: nowrap; gap: 2px;
    padding: 6px; border-radius: 10px; background: var(--surface);
    border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    max-height: 70vh; overflow-y: auto; z-index: 60;
  }
  .strat-nav.ouvert .strat-nav-liste { display: flex; }
  .strat-nav-liste a,
  .strat-nav-liste button { width: 100%; text-align: left; padding: 10px 12px; border-radius: 7px; }
}

/* Panneaux d'onglets */
.strat-onglet[hidden] { display: none; }

/* ── En-tête + barre d'onglets d'une PRODUCTION (2026-08-19) - macros
   _prod_entete.html (ouvre) + _prod_tabs.html (ferme) : UNE bande COLLANTE,
   titre qui rétrécit au défilement (static/js/prod_header_sticky.js), onglets
   en pastilles dans un cadre commun. Repris de /liste (liste_v2.css,
   .lv2-onglets-bar / .lv2-titre-rang / .liste-tab), accent --dom-prod (rose,
   « domaine production ») au lieu du --dom-liste (teal) de /liste. Partagé par
   la page générale, transmissions, portefeuille ET transactions. ── */
.prod-onglets-bar {
  position: sticky; top: var(--topbar-h, 54px); z-index: 120;
  background: var(--bg); border-bottom: 2px solid var(--border);
  margin-bottom: 18px;
}
.prod-onglets-bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
  background: linear-gradient(to bottom, rgba(15, 23, 42, .07), transparent);
  pointer-events: none;
}
.prod-titre-rang { padding: 10px 0 8px; transition: padding .18s ease; }
.prod-titre-rang .prod-title {
  margin: 0; display: flex; align-items: center;
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: font-size .18s ease;
}
.prod-titre-rang .prod-subtitle {
  margin: 3px 0 0; font-size: .85rem; color: var(--text-2); overflow: hidden;
  max-height: 3.4em; opacity: 1;
  transition: max-height .18s ease, opacity .14s ease, margin .18s ease;
}
.prod-titre-rang.compact { padding: 6px 0 4px; }
.prod-titre-rang.compact .prod-title { font-size: 1.05rem; }
.prod-titre-rang.compact .prod-subtitle { max-height: 0; opacity: 0; margin-top: 0; }

.prod-onglets-rang { display: flex; flex-direction: row; align-items: center; padding: 0 0 5px; }
.prod-nav.strat-nav { border-bottom: none; margin: 0; padding: 0; flex-wrap: wrap; }
.prod-tabs-boite {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  flex-wrap: wrap;
}
/* Spécificité VOLONTAIREMENT renforcée (.strat-nav a.prod-tab, pas juste
   .prod-tab) : le <nav> garde la classe .strat-nav pour la compatibilité JS
   (nav_onglets.js, sélecteurs existants) - sans quoi `.strat-nav a.actif`
   (strategies.css, ligne ~737, bleu) l'emportait sur le rose --dom-prod voulu
   ici (même nombre de classes mais UN élément de plus dans son sélecteur). */
.strat-nav a.prod-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: -.005em;
  padding: 8px 18px; border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--text-3); border-radius: 999px; margin: 0; text-decoration: none;
  transition: color var(--tr), background var(--tr), box-shadow var(--tr);
}
.strat-nav a.prod-tab:hover { color: var(--text); background: var(--dom-prod-lo, #fdeaf2); }
.strat-nav a.prod-tab.actif {
  color: #fff; background: var(--dom-prod, #be185d); border-color: transparent;
  box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 6px 16px -8px var(--dom-prod, #be185d);
}
.strat-nav a.prod-tab.actif:hover { color: #fff; background: var(--dom-prod, #be185d); filter: brightness(1.07); }

/* Fil d'Ariane des pages de production : mêmes proportions que /liste
   (.lv2-ariane), scopé pour ne pas toucher .strat-ariane des autres pages. */
.prod-page .strat-ariane { padding: 10px 0 2px; margin: 0; opacity: 1; color: var(--text-3); }
.prod-page .strat-ariane a { color: var(--text-3); }
.prod-page .strat-ariane a:hover { color: var(--dom-prod, #be185d); }
.prod-page .strat-ariane .courant { color: var(--text-2); font-weight: 600; }

/* Pastilles de comptage des onglets. Le chiffre est centré PAR CONSTRUCTION :
   `text-box-trim` rogne la boîte de ligne à la hauteur de capitale (plus de
   place réservée à la descendante, qui faisait remonter le chiffre), puis un
   padding symétrique de 4 px donne les 16 px de haut. ⚠️ text-box-trim ne
   s'applique qu'aux CONTENEURS DE BLOC : en inline-flex (ancienne version) il
   était sans effet et l'encre montait de 1,3 px en moyenne (mesuré au pixel,
   2026-09-02 : inline-block + padding symétrique = +0,12 px). Repli pour les
   navigateurs sans text-box-trim : boîte de ligne fixée à 16 px. */
.prod-nav-badge, .ptf-encours-chip { display: inline-block; box-sizing: border-box;
  min-width: 17px; padding: 4px 5px; border-radius: 8px; text-align: center; vertical-align: middle;
  font-size: .68rem; font-weight: 800; color: #fff; line-height: 1;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; }
@supports not (text-box-trim: trim-both) {
  .prod-nav-badge, .ptf-encours-chip { height: 16px; padding: 0 5px; line-height: 16px; }
}
.prod-nav-badge-saxo { background: var(--teal-dk); }
.prod-nav-badge-valider { background: #db2777; }
.prod-nav-badge-merge { background: var(--dom-prod, #be185d); }
/* Onglet Portefeuille : nombre de positions en écart avec le théorique (ambre =
   avertissement, 2026-09-02). */
.prod-nav-badge-ptf { background: #d97706; }
/* ⚠ Sur l'onglet ACTIF, le fond est déjà l'aplat du domaine (rose) : une
   pastille rose - ou le rose voisin de « à valider » - s'y fondait et devenait
   invisible. Elle s'inverse donc : pastille blanche, chiffre à la couleur qui
   porte son sens (teal = Saxo, rose = à valider). */
.strat-nav a.prod-tab.actif .prod-nav-badge { background: #fff; }
.strat-nav a.prod-tab.actif .prod-nav-badge-saxo { color: var(--teal-dk); }
.strat-nav a.prod-tab.actif .prod-nav-badge-valider { color: #db2777; }
.strat-nav a.prod-tab.actif .prod-nav-badge-merge { color: var(--dom-prod, #be185d); }
.strat-nav a.prod-tab.actif .prod-nav-badge-ptf { color: #d97706; }

/* Badge « Gestion des ordres » cliquable → plateforme du courtier : le badge
   garde ses couleurs propres, on retire seulement le soulignement du lien. */
.pg-badge-lien, .pg-badge-lien:hover { text-decoration: none; }
.pg-badge-lien { display: inline-flex; vertical-align: middle; }
.pg-badge-lien:hover { opacity: .85; }
/* Lien de nom de stratégie SANS style de lien (tableau « Réglages par
   stratégie » de la vue combinée) : identique au texte, aucun soulignement. */
.combi-lien-plain, .combi-lien-plain:hover { color: inherit; text-decoration: none; font: inherit; }
.pg-type { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  vertical-align: middle; }
.pg-type-combo { background: color-mix(in srgb, #6d28d9 16%, var(--surface)); color: #6d28d9; }
.pg-type-strat { background: color-mix(in srgb, var(--blue) 16%, var(--surface)); color: var(--blue); }
/* Badge cliquable (renvoie vers l'analyse) : garde l'aspect pastille, indice au survol. */
.pg-type-lien { text-decoration: none; cursor: pointer; transition: filter var(--tr); }
.pg-type-lien:hover, .pg-type-lien:focus-visible { filter: brightness(.94); text-decoration: underline; }
:root[data-theme="dark"] .pg-type-combo { color: #c4b5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pg-type-combo { color: #c4b5fd; } }
.pg-membres { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pg-membres a { font-size: .82rem; color: var(--blue, #1d6fe0); text-decoration: none;
  border: 1px solid var(--blue-100); border-radius: 8px; padding: 3px 9px; background: var(--blue-50); }
.pg-membres a:hover { background: color-mix(in srgb, var(--blue) 18%, var(--surface)); }

/* ── Onglet/page « Transactions » (2026-08-19) - fusion PAR TICKER des ordres
   à transmettre et des opérations à valider (templates/_transactions_corps.html,
   partagé entre production_transactions.html et l'onglet client-side de
   production_generale.html). Non scopée (classes assez spécifiques pour ne
   rien accrocher d'autre) : les DEUX templates en ont besoin. ── */
.txn-sync-card {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh-sm); padding: 16px 20px; margin-bottom: 16px;
}
.txn-ring {
  position: relative; width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--ring-col) calc(var(--pct) * 1%), var(--border-lt) 0);
}
.txn-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); z-index: 0 }
.txn-ring span {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 800; color: var(--ring-col);
}
.txn-ring-lbl { font-size: .78rem; color: var(--text-3); line-height: 1.5 }
.txn-ring-lbl b { color: var(--text) }
.txn-sync-stats { display: flex; gap: 20px; flex-wrap: wrap; flex: 1 }
.txn-sync-stat { font-size: .78rem; color: var(--text-3) }
.txn-sync-stat b { display: block; font-size: 1.05rem; color: var(--text); font-weight: 800 }
.txn-sync-stat.crit b { color: #b91c1c }
.txn-sync-stat.warn b { color: #b45309 }
:root[data-theme="dark"] .txn-sync-stat.crit b { color: #f4726f }
:root[data-theme="dark"] .txn-sync-stat.warn b { color: #e0a94a }
.txn-sync-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap }
.txn-sync-last { font-size: .7rem; color: var(--text-4); text-align: right; line-height: 1.3; cursor: help }

.txn-filters { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap }
.txn-filters-courtier { margin-left: auto; font-size: .76rem; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px }
.txn-seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.txn-seg button {
  border: none; background: transparent; font-family: inherit; cursor: pointer;
  font-size: .78rem; font-weight: 700; color: var(--text-3); padding: 6px 14px; border-radius: 999px;
}
.txn-seg button.actif { background: var(--surface); color: var(--dom-prod, #be185d); box-shadow: var(--sh-sm) }

.txn-list { display: flex; flex-direction: column; gap: 10px }
.txn-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border-lt); border-radius: var(--r); overflow: hidden;
}
.txn-card[data-etat="ecart"] { border-left-color: #d97706 }
.txn-card[data-etat="manquante"] { border-left-color: #b91c1c }
.txn-card[data-etat="surplus"] { border-left-color: #7c3aed }
.txn-card[data-etat="recent"] { border-left-color: var(--text-4) }
.txn-card[data-etat="ok"] { border-left-color: #0a7f33 }
.txn-card > summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
}
.txn-card > summary::-webkit-details-marker { display: none }
.txn-id { display: flex; align-items: center; gap: 8px; min-width: 150px }
.txn-id .nm { font-size: .8rem; color: var(--text-2) }
.txn-etat-lbl { font-size: .72rem; font-weight: 700; color: var(--text-3); flex: 1; min-width: 140px }
.txn-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.txn-chips .chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.chip-valider { background: color-mix(in srgb, #db2777 14%, var(--surface)); color: #db2777; border: 1px solid color-mix(in srgb, #db2777 35%, var(--surface)) }
:root[data-theme="dark"] .chip-valider { color: #f472b6 }
.txn-card .chevron { width: 15px; height: 15px; color: var(--text-4); transition: transform .15s; flex: none }
.txn-card[open] > summary .chevron { transform: rotate(90deg) }

.txn-body { padding: 0 16px 16px; border-top: 1px solid var(--border-lt) }
.txn-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; padding-top: 14px }
@media (max-width: 820px) { .txn-grid { grid-template-columns: 1fr } }
.txn-block h4 {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800;
  color: var(--text-3); margin: 0 0 8px;
}
.txn-block .pos-kv { border: 1px solid var(--border-lt); border-radius: var(--r-sm); overflow: hidden }
.txn-block .pos-kv .row { display: flex; justify-content: space-between; padding: 6px 10px; font-size: .78rem; border-top: 1px solid var(--border-lt) }
.txn-block .pos-kv .row:first-child { border-top: none }
.txn-block .pos-kv .row span:first-child { color: var(--text-3) }
.txn-block .pos-kv .row span:last-child { font-weight: 700; color: var(--text) }
.txn-block .sub-empty { font-size: .78rem; color: var(--text-4); font-style: italic; padding: 4px 2px }
.txn-mini-tbl { margin-bottom: 14px }
.txn-mini-tbl:last-child { margin-bottom: 0 }
.txn-card .opp-table { font-size: .78rem }
/* Table UNIQUE des ordres (à transmettre + en cours fusionnés, cf. route) :
   pastille « à transmettre » (distincte des vrais statuts Saxo) et notation
   seuil actuel → nouveau seuil pour une modification en attente. */
.statut-pill {
  display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.st-atransmettre { background: color-mix(in srgb, #FEB019 20%, var(--surface)); color: #92640a }
:root[data-theme="dark"] .st-atransmettre { color: var(--gold) }
.st-aajuster { background: var(--gold-50, #fdf6e7); color: #92640a }
:root[data-theme="dark"] .st-aajuster { color: var(--gold) }
/* Statut réel Saxo « en attente » (ordre transmis, pas encore exécuté), affiché
   « Transmis et actif » - teal plutôt que le bleu par défaut, sur les tableaux
   de l'onglet Transactions uniquement (pas la page Transmissions d'origine). */
.txn-card .strat-statut-en-attente,
.txn-card .strat-statut-en-place { background: var(--teal-50); color: var(--teal-dk) }
:root[data-theme="dark"] .txn-card .strat-statut-en-attente,
:root[data-theme="dark"] .txn-card .strat-statut-en-place { color: var(--teal) }
/* Pastille « Conforme » de l'onglet Transactions : teal plutôt que le vert
   (.cmp-p-ok par défaut, utilisé ailleurs pour la comparaison Portefeuille lié). */
.txn-card .cmp-p-ok { background: var(--teal-dk) }
.txn-seuil-avant { color: var(--text-4); text-decoration: line-through }
.txn-seuil-fleche { color: var(--text-4); margin: 0 2px }
.txn-seuil-ecart { display: inline-block; margin-left: 5px; color: #b45309; cursor: help; font-size: .82rem; }
:root[data-theme="dark"] .txn-seuil-ecart { color: var(--gold) }

/* Comparaison réel/théo - pastilles d'état (reprises de production_generale.html,
   onglet Portefeuille lié : mêmes classes .cmp-* réutilisées par Transactions). */
.cmp-etat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600 }
.cmp-pastille { width: 9px; height: 9px; border-radius: 50%; flex: none }
.cmp-p-ok { background: #0a7f33 } .cmp-p-ecart { background: #d97706 }
.cmp-p-manquante { background: #b91c1c } .cmp-p-surplus { background: #b91c1c }
.cmp-p-recent { background: var(--text-4, #94a3b8) }

/* ── Onglet PORTEFEUILLE d'une production, synchronisé avec le courtier
   (2026-09-02, fragment _prod_bloc_portefeuille.html) ── */
.ptf-identite { margin-bottom: 12px; }
.ptf-identite .pf-kpi-value { font-size: 1.02rem; }
.ptf-identite .pf-kpi-value .saxo-badge { vertical-align: middle; margin-left: 6px; }
.ptf-identite a.pf-kpi-sub { color: var(--blue); }
/* Liens discrets dans les tuiles : couleur du texte, soulignement au survol
   (même patron que .mp-lien de /mes_productions) */
.ptf-identite .pf-kpi-value a.mp-lien { color: inherit; text-decoration: none; }
.ptf-identite .pf-kpi-value a.mp-lien:hover { color: var(--blue); text-decoration: underline; }
.ptf-sync { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 14px; }
.ptf-deco { margin: 0; display: inline-flex; }
/* Boutons-icônes (synchroniser / déconnecter) : symbole seul, texte en infobulle ;
   survol teal pour la synchronisation, rouge pour la déconnexion. */
.ptf-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
           padding: 0; border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
           color: var(--text-3); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.ptf-ico svg { width: 15px; height: 15px; }
.ptf-ico:disabled { opacity: .6; cursor: default; }
@keyframes ptf-tourne { to { transform: rotate(360deg); } }
.ptf-ico-actif svg { animation: ptf-tourne 1s linear infinite; }
.ptf-ico-sync:hover:not(:disabled) { color: #fff; background: var(--teal-dk); border-color: var(--teal-dk); }
.ptf-ico-deco:hover:not(:disabled) { color: #fff; background: #b91c1c; border-color: #b91c1c; }
/* Achats déjà en file chez le courtier (2026-09-02) : sur la ligne, chevron
   dans la marge gauche de la cellule Titre + compteur d'ordres posé sur le coin
   de la capsule (tous deux en ABSOLU : la colonne garde la largeur des lignes
   sans ordre) ; SOUS-LIGNE dépliable (repliée par défaut) listant les ordres
   (un ✕ par ordre). Style NEUTRE (teal = information, pas d'alerte ambrée). */
.ptf-encours-pastille { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-dk); margin-right: 5px; vertical-align: middle; }
/* (spécificité > .sig-card .ptf-table td, qui fixe le padding des cellules) */
.ptf-table tbody td.ptf-titre { position: relative; white-space: nowrap; padding-left: 15px; }
.ptf-cap { position: relative; display: inline-block; vertical-align: middle; }
/* Compteur d'ordres en attente : MÊME dessin que les pastilles d'onglet (règle
   commune ci-dessus, `.prod-nav-badge, .ptf-encours-chip`) ; ici seulement la
   position sur le coin de la capsule, la couleur et le halo. */
.ptf-encours-chip { position: absolute; top: -7px; right: -8px; z-index: 1; border: 0; margin: 0;
  background: var(--pink); font-family: inherit; box-shadow: 0 0 0 1.5px var(--surface); cursor: pointer; }
.ptf-encours-chip:hover { filter: brightness(.88); }
/* Ligne avec ordres en attente : le clic n'importe où sur la ligne (hors liens,
   boutons et formulaires) déplie/replie la sous-ligne. */
tr.ptf-depliable { cursor: pointer; }
/* Tuile « Taux de réplication » : anneau repris de l'onglet Transactions */
.ptf-taux { display: flex; align-items: center; gap: 12px; }
.ptf-taux-txt { font-size: .78rem; color: var(--text-3); line-height: 1.5; }
.ptf-taux-txt b { color: var(--text); }
/* Petit avertissement à côté du bouton « Acheter » (ambre = avertissement) */
.ptf-encours-warn { border: 0; background: none; cursor: pointer; padding: 0 2px; margin: 0 0 0 4px;
  color: var(--gold); font-size: .85rem; line-height: 1; vertical-align: middle; font-family: inherit; }
.ptf-encours-warn:hover { color: var(--text); }
.ptf-oo-btn { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); border: 0; background: none;
  cursor: pointer; padding: 0 2px; margin: 0; color: var(--teal-dk); font-size: .8rem; line-height: 1; font-family: inherit; }
.ptf-oo-btn:hover { color: var(--text); }
.ptf-table tr.ptf-sousligne > td { padding: 0 0 10px 0 !important; border-top: 0; background: none; }
.ptf-oo { margin: 0 10px 0 22px; padding: 8px 14px 10px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--teal-dk); border-radius: 0 8px 8px 0;
  font-size: .8rem; color: var(--text-2); }
.ptf-oo-titre { font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ptf-oo-recap { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.ptf-oo-table { width: auto; border-collapse: collapse; font-size: .78rem; }
.ptf-oo-table th { font-size: .64rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-3); text-align: left; padding: 2px 14px 4px 0; border-bottom: 1px solid var(--border);
  background: none; position: static; white-space: nowrap; }
.ptf-oo-table td { padding: 4px 14px 4px 0; border-top: 1px solid var(--border); background: none;
  white-space: nowrap; vertical-align: middle; }
.ptf-oo-table tbody tr:first-child td { border-top: 0; }
.ptf-oo-table th.num, .ptf-oo-table td.num { text-align: right; }
.ptf-oo-statut { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .7rem;
  font-weight: 600; background: var(--teal-50); color: var(--teal-dk); }
.ptf-oo-id { color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.ptf-oo-act { padding-right: 0 !important; }
/* Décompte discret avant la prochaine synchronisation */
.ptf-rebours { font-size: .76rem; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ptf-rebours b { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
.ptf-rebours-point { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.ptf-rebours-actif { animation: ptf-pulse 1s ease-in-out infinite; }
@keyframes ptf-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
/* Bouton DISCRET (bordure fine, fond de surface) : la synchronisation est
   automatique, le bouton n'est qu'un raccourci */
.ptf-btn {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: .78rem;
  font-weight: 600; white-space: nowrap; padding: 5px 11px; border-radius: var(--r-sm);
  cursor: pointer; background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border); text-decoration: none;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}
.ptf-btn:hover:not(:disabled) { color: var(--blue); border-color: var(--blue); }
.ptf-btn:disabled { opacity: .6; cursor: default; }
.ptf-actions { white-space: nowrap; }
.ptf-actions form { display: inline-block; margin: 0 4px 0 0; }
.ptf-actions .saxo-btn-envoi-vente { background: #b91c1c; border-color: #b91c1c; }
.ptf-details { padding: 0; }
.ptf-details > summary { cursor: pointer; padding: 16px 18px; list-style: none; }
.ptf-details > summary::-webkit-details-marker { display: none; }
.ptf-details > summary .sig-h2 { margin: 0; display: inline; }
.ptf-details > summary::before { content: '▸'; color: var(--text-4); margin-right: 8px; font-size: .8rem; }
.ptf-details[open] > summary::before { content: '▾'; }
.ptf-details > :not(summary) { margin: 0 18px 16px; }
.ptf-maj { text-align: right; margin: -4px 0 12px; }

/* Période d'analyse dans l'en-tête */
.strat-periode-analyse { font-size: .86rem; color: var(--text-2); margin: 6px 0 0; }

/* Sous-groupe de paramètres (fondamentaux dans les signaux d'achat) */
.strat-sous-groupe {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-4); margin: 12px 0 2px;
}

/* Les <button> stylés en .opp-btn-portfolio hors de .strat-actions (ex.
   « Mettre en production » dans l'en-tête) : pas de bordure navigateur */
button.opp-btn-portfolio { border: none; cursor: pointer; font-family: inherit; }

/* Fil d'Ariane au-dessus du titre (volontairement discret) */
.strat-ariane {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: .74rem; color: var(--text-4); margin: 0 0 8px; opacity: .85;
}
.strat-ariane a { color: var(--text-4); text-decoration: none; }
.strat-ariane a:hover { color: var(--blue); text-decoration: underline; }
.strat-ariane .courant { color: var(--text-3); font-weight: 500; }

/* Liens vers les combinaisons incluant la stratégie (sous le titre) : badges violets */
.strat-combos-liens { font-size: .82rem; color: var(--text-3); margin: 8px 0 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.strat-combo-badge {
  display: inline-block;
  background: #f3effc;
  color: #6d28d9;
  border: 1px solid #ddd0f7;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.strat-combo-badge:hover { background: #e9e0fb; border-color: #c4b0f0; }

/* Modale de confirmation (changement de liste de supports) */
.strat-modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .55); padding: 24px;
}
.strat-modal[hidden] { display: none; }
.strat-modal-boite {
  background: var(--surface, #fff); border-radius: 12px;
  width: min(480px, 94vw); padding: 20px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.strat-modal-titre { font-weight: 700; color: var(--text); margin-bottom: 10px; }
.strat-modal-texte { font-size: .88rem; color: var(--text-2); line-height: 1.5; margin: 0 0 16px; }
.strat-ajout-combo-nom { color: #6d28d9; }
.strat-ajout-combo-note { font-size: .76rem; color: var(--text-2); line-height: 1.45; margin: 6px 0 0; }
.strat-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.strat-modal-actions button { border: none; cursor: pointer; }
.strat-form .strat-modal-actions { margin-top: 14px; }
/* Bouton de confirmation destructive (suppression) */
.strat-btn-danger { background: #b91c1c; color: #fff; }
.strat-btn-danger:hover { background: #991b1b; }

/* Avertissement « date de début de production passée » dans les modales */
.strat-avert-passe {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-top: 10px;
}

/* ── Optimisation par balayage ── */
/* <details> « Optimiser la stratégie » : ne garder que la flèche personnalisée
   (::before de opportunites.css), pas le marqueur natif du navigateur */
.strat-page .pf-details > summary { list-style: none; }
.strat-page .pf-details > summary::marker { content: none; }
.strat-page .pf-details > summary::-webkit-details-marker { display: none; }

/* Onglet Optimisation : 4 parties en cartes DISTINCTES, numérotées, avec
   liseré à la couleur de la zone pour bien les séparer visuellement */
.strat-page .optim-card { border-left: 3px solid var(--dom-analyser); }
.strat-page .optim-card .sig-h2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 1rem; color: var(--text);
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.optim-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: .82rem; font-weight: 700;
}

/* Tableaux « Stratégie avant optimisation » et « Simulations » : conteneur à
   défilement borné → beaucoup de paramètres = barre de défilement HORIZONTALE
   interne (le tableau n'élargit pas la page) ; en-tête COLLANT en haut du
   conteneur (reste visible quand on descend dans les résultats). */
.optim-table-scroll {
  max-height: 65vh;
  overflow: auto;
}
.optim-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--border);
  /* Titres sur PLUSIEURS lignes (au lieu de nowrap) : les colonnes se
     rétrécissent et le tableau tient dans la largeur du conteneur au lieu
     de s'élargir quand il y a beaucoup de paramètres à balayer. */
  white-space: normal;
  vertical-align: bottom;
  min-width: 3.5em;
}
/* ⚠️ `.opp-table .num` (0-2-0) impose white-space: nowrap sur les th.num et
   l'emporte sur la règle ci-dessus (0-1-2) : il faut ce sélecteur plus
   spécifique (0-2-2) pour que les en-têtes numériques se replient aussi. */
.optim-table-scroll thead th.num { white-space: normal; }
/* Les VALEURS restent sur une seule ligne (nombres compacts, pas de coupure
   sur l'espace des milliers) */
.optim-table-scroll tbody td { white-space: nowrap; }
/* Filtre par colonne façon page « Marchés » : icône entonnoir dans l'en-tête +
   pop-up min/max flottante. */
.optim-fic { cursor: pointer; margin-left: 5px; display: inline-block; vertical-align: middle; }
.optim-fic svg { width: 13px; height: 13px; fill: #94a3b8; transition: fill .15s; }
.optim-fic:hover svg, .optim-fic.active svg { fill: var(--blue, #1d6fe0); }
.optim-fpop {
  position: absolute; z-index: 1000; width: 128px; padding: 8px;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16); display: flex; flex-direction: column; gap: 5px;
}
.optim-fpop input {
  width: 100%; box-sizing: border-box; padding: 4px 6px; font-size: .8rem; font-family: inherit;
  border: 1px solid var(--border, #e3e8ef); border-radius: 5px;
}

.optim-avancement { margin-top: 14px; }
/* Ligne de simulation dont les paramètres sont actuellement appliqués à la
   stratégie : fond vert clair persistant + badge APPLIQUÉE */
.optim-ligne-appliquee { background: #f0fdf4; }
.optim-ligne-appliquee:hover { background: #e3fbe9; }
.optim-bar {
  height: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.optim-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #60a5fa);
  border-radius: 999px;
  transition: width .6s ease;
}
/* Phase de préparation (chargement des cours, simulation de référence) :
   barre pleine animée « indéterminée » pour montrer que le process avance */
.optim-bar-fill.optim-bar-prep {
  width: 100% !important;
  background: repeating-linear-gradient(45deg,
    #93c5fd 0 12px, #dbeafe 12px 24px);
  background-size: 34px 34px;
  animation: optimPrep 1s linear infinite;
}
@keyframes optimPrep {
  to { background-position: 34px 0; }
}
/* Bouton d'en-tête « Terminer l'optimisation » (remplace « Mettre en
   production » tant qu'une optimisation existe sur la stratégie) : même vert
   que le badge du hub */
.strat-btn-optim-fin { background: #0acc3a; }
.strat-btn-optim-fin:hover { background: #08a02d; }

/* Modale de LANCEMENT d'optimisation : nombre en avant + points clés. */
.optim-lancer-boite { width: min(500px, 94vw); }
.optim-lancer-nombre {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 10px;
  padding: 14px 18px; border-radius: 12px; background: var(--blue-50, #eef5ff);
  border: 1px solid var(--blue-100, #cfe0f5);
}
.optim-lancer-num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--blue-dk, #1d6fe0); }
.optim-lancer-unit { font-size: .82rem; font-weight: 600; color: var(--text-2, #475569); line-height: 1.25; }
.optim-lancer-sous { margin: 0 0 10px; font-size: .9rem; color: var(--text-2, #475569); }
.optim-lancer-points { margin: 0 0 4px; padding: 0; list-style: none; }
.optim-lancer-points li {
  position: relative; padding-left: 24px; margin-bottom: 9px;
  font-size: .88rem; line-height: 1.45; color: var(--text, #1e293b);
}
.optim-lancer-points li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--blue, #1d6fe0); font-weight: 800;
}

/* Modale « Terminer l'optimisation » : paramètres appliqués + KPIs. */
.optim-fin-boite { width: min(540px, 94vw); }
.optim-fin-params {
  margin: 4px 0 14px; border: 1px solid var(--border, #e3e8ef); border-radius: 10px; overflow: hidden;
}
.optim-fin-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 8px 13px; border-bottom: 1px solid var(--border, #eef2f7); font-size: .9rem;
}
.optim-fin-row:last-child { border-bottom: none; }
.optim-fin-k { color: var(--text-2, #475569); }
.optim-fin-v { font-weight: 700; color: var(--text, #0f172a); text-align: right; }
.optim-fin-old { font-weight: 500; font-size: .78rem; color: var(--text-3, #94a3b8); margin-left: 8px; }
.optim-fin-kpis {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.optim-fin-kpi {
  border: 1px solid var(--border, #e3e8ef); border-radius: 10px; padding: 9px 12px;
  background: var(--bg, #f8fafc);
}
.optim-fin-kpi-l {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3, #64748b); margin-bottom: 3px;
}
.optim-fin-kpi-v { font-size: 1.12rem; font-weight: 800; }

/* Badge « en optimisation » sur le hub : vert plein #0acc3a (demande
   utilisateur - usage sémantique autorisé), bien visible */
.strat-badge-optim {
  display: inline-block;
  background: #0acc3a;
  color: #fff;
  border: 1px solid #0acc3a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 2px;
  animation: optimBadgePulse 1.6s ease-in-out infinite;
}
@keyframes optimBadgePulse {
  50% { opacity: .55; }
}
/* Terminée : même badge, sans clignotement */
.strat-badge-optim-fini { animation: none; }

/* Hub : carte « Combinaisons enregistrées » - accent violet (titre + noms)
   cohérent avec la convention violet = combinaison */
.combos-card .sig-h2 { color: #6d28d9; }
.combos-card .opp-ticker { color: #6d28d9; }
.combos-card .opp-ticker:hover { color: #5b21b6; }

/* Bouton d'export scindé : clic principal = Excel, flèche = menu des formats */
.strat-export-split { position: relative; display: inline-flex; }
.strat-export-split .strat-export-main {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.strat-export-caret {
  border: none; cursor: pointer; font-family: inherit;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  border-left: 1px solid rgba(255, 255, 255, .35) !important;
  padding: 8px 10px;
}
.strat-export-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 160px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
  padding: 4px; display: flex; flex-direction: column;
}
.strat-export-menu[hidden] { display: none; }
.strat-export-menu a {
  padding: 8px 12px; border-radius: 6px;
  font-size: .85rem; font-weight: 600; color: var(--text-2);
  text-decoration: none;
}
.strat-export-menu a:hover { background: var(--blue-50); color: var(--blue); }

/* Analyse par support : toute la ligne ouvre le graphique pop-up */
.strat-ligne-support { cursor: pointer; }
.strat-ligne-support:hover td { background: var(--blue-50); }
.strat-ligne-attente { opacity: .5; cursor: wait; }

/* Ancres : atterrissage sous les barres collantes */
[id^="sec-"] { scroll-margin-top: 112px; }

/* Titres de section UNIFIÉS (même langage que « Mes productions ») : petit, en
   majuscules, souligné d'un filet - identique sur TOUS les onglets des pages
   stratégie/combinaison (Paramètres inclus, via .pf-settings-title). */
.strat-page .pf-section-title,
.strat-page .pf-settings-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--border);
  padding: 0 0 6px; margin: 24px 0 12px;
}
/* Sous-section : contient parfois une info-bulle (flex) et porte l'accent de
   zone → le filet bas est TEINTÉ (bleu stratégie / violet combinaison). Déclarée
   APRÈS pour l'emporter sur .pf-section-title à spécificité égale. */
.strat-page .pf-section-sub {
  display: flex; align-items: center; gap: 8px; line-height: 1.25;
  border-left: none; padding-left: 0;
  /* Filet à la couleur de la zone « Analyser » (teal), comme les onglets et les
     liserés de titres - le bleu d'origine était le seul accent à ne pas avoir
     suivi la bascule de la section. */
  border-bottom: 2px solid var(--dom-analyser);
  margin: 24px 0 12px !important;
}
/* Combinaison : filet violet (l'accent de zone), déclaré APRÈS pour l'emporter. */
.combi-page .pf-section-sub { border-bottom-color: #6d28d9; }

/* Cartes : cohérence radius / bordure / ombre / padding */
.strat-page .sig-card,
.strat-page .pf-chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--sh-sm);
  padding: 18px 20px; margin-bottom: 16px;
}
.strat-page .strat-desc { background: var(--blue-50); border-color: var(--blue-100); }
.strat-page .sig-h2 { font-size: .92rem; font-weight: 700; color: var(--text-2); margin: 0 0 12px; }

/* Groupes de KPI : label discret + grille de tuiles */
.kpi-group { margin-bottom: 18px; }
.kpi-group-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-4); margin: 0 0 9px 2px;
}
.strat-page .pf-kpis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin: 0;
}
.strat-page .pf-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 13px 15px;
  box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 6px;
}
.strat-page .pf-kpi-label {
  font-size: .74rem; font-weight: 600; color: var(--text-3);
  text-transform: none; letter-spacing: 0; line-height: 1.25;
  display: flex; align-items: center; gap: 5px;
}
.strat-page .pf-kpi-value { font-size: 1.28rem; font-weight: 700; color: var(--text); line-height: 1.15; }
.strat-page .pf-kpi-sub { display: block; font-size: .72rem; font-weight: 500; color: var(--text-4); margin-top: 2px; }
.strat-page .pf-pos { color: #15803d; }
.strat-page .pf-neg { color: #b91c1c; }
/* Tuile phare (gain total) : accent bleu */
.pf-kpi--hero {
  border-left: 4px solid var(--blue) !important;
}
/* Page combinaison : liseré du KPI principal en violet */
.strat-page .pf-kpi--hero { border-left-color: var(--dom-analyser) !important; }
.combi-page .pf-kpi--hero { border-left-color: #6d28d9 !important; }
.pf-kpi--hero .pf-kpi-value { font-size: 1.5rem; }

/* Grille de graphiques : responsive, cartes égales */
.strat-page .pf-charts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px; margin-bottom: 8px;
}
.strat-page .pf-chart-card { margin-bottom: 0; }
.strat-page .pf-chart-title { font-size: .85rem; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }

/* Détails dépliables : le triangle et le style de base viennent déjà de
   .pf-details > summary.pf-section-title (opportunites.css) - ne pas le
   redéfinir ici (ça créait un second triangle en doublon). */

/* Badges de transmission Saxo au hub (2026-07-16) - même géométrie que
   .strat-badge-prod. Convention couleur validée sur /mes_productions :
   ORANGE = simulation Saxo, VERT = compte réel (usage sémantique du vert). */
.strat-badge-saxo-sim,
.strat-badge-saxo {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: 2px;
  white-space: nowrap;
}
.strat-badge-saxo-sim { background: #fff6e5; color: #7a4d00; border: 1px solid #f0d9a8; }
.strat-badge-saxo     { background: #e9f9ef; color: #0f5132; border: 1px solid #b7e4c7; }

/* Boutons d'action des 2 tableaux du hub (renommer ✎, copier ⧉, supprimer ✕) :
   réduits - 26 px les faisait dominer la ligne (demande 2026-07-16). */
.container.strat-hub .strat-btn-suppr {
  width: 20px; height: 20px;
  font-size: .72rem;
  line-height: 1;
}

/* Un tableau du hub plus large que son conteneur reçoit une barre de défilement
   horizontale (classe posée par JS quand scrollWidth dépasse). ⚠️ Compromis
   assumé : un conteneur qui défile horizontalement ne peut pas laisser ses
   en-têtes collants suivre le défilement de la PAGE - les th sticky ne
   s'appliquent alors qu'à l'intérieur du conteneur. */
.container.strat-hub .opp-table-wrap.deborde-x { overflow-x: auto; }
/* ⚠️ `overflow-x:auto` fait du wrap un CONTENEUR DE DÉFILEMENT : le `top:54px` de
   l'en-tête sticky le décale alors de 54px vers le BAS *à l'intérieur* du conteneur
   et masque la 1re ligne du tableau (symptôme : la 1re combinaison enregistrée
   « disparaît »). Quand le tableau déborde horizontalement, l'en-tête n'a de toute
   façon plus lieu d'être collant à la page → on le rend NON collant. */
.container.strat-hub .opp-table-wrap.deborde-x thead th { position: static; }

/* ── Création d'une stratégie : encart descriptif de la famille choisie ──
   Le choix du signal se fait en deux temps (famille puis signal) : cet encart
   porte la durée de détention visée et le type d'approche, informations qui
   ne figurent donc plus dans le nom des signaux. */
.strat-fam-info {
  margin: 8px 0 4px; padding: 11px 14px; border-radius: 10px;
  background: var(--blue-50, #f4f9ff); border: 1px solid var(--blue-100, #cfe0f5);
}
.strat-fam-duree {
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
  font-size: .86rem; font-weight: 600; color: var(--text);
}
.strat-fam-duree-lbl {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue-dk, #1d6fe0);
}
.strat-fam-desc { margin: 6px 0 0; font-size: .84rem; line-height: 1.45; color: var(--text-2); }

/* Montant du recul max sous le pourcentage (colonne « Recul max » du hub). */
.container.strat-hub .strat-recul-mnt {
  display: block; font-size: .74rem; font-weight: 400;
  color: var(--text-3, #94a3b8); margin-top: 1px;
}

/* Paramètre géré par la COMBINAISON : verrouillé dans l'onglet Paramètres de la
   stratégie membre, avec un badge violet (couleur « combinaison ») renvoyant à
   la combinaison où il se règle. */
.strat-badge-combi-param {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 4px; text-decoration: none;
  background: color-mix(in srgb, #6d28d9 12%, var(--surface, #fff));
  color: #6d28d9;
  border: 1px solid color-mix(in srgb, #6d28d9 26%, var(--surface, #fff));
}
.strat-badge-combi-param:hover { background: color-mix(in srgb, #6d28d9 22%, var(--surface, #fff)); }
/* En sombre, le violet #6d28d9 n'a plus assez de contraste sur une surface
   sombre : on éclaircit le TEXTE (le fond, lui, suit déjà la surface). */
:root[data-theme="dark"] .strat-badge-combi,
:root[data-theme="dark"] .strat-badge-combi-param { color: #c4b5fd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .strat-badge-combi,
  :root:not([data-theme="light"]) .strat-badge-combi-param { color: #c4b5fd; }
}
.strat-param-verrou input:disabled {
  opacity: .6; cursor: not-allowed; background: var(--bg, #f1f5f9);
}

/* Modale « Appliquer ces réglages aux stratégies » : liste des réglages écrits
   + notes de ce qui est préservé/ignoré. */
.combi-appliquer-liste {
  margin: 0 0 14px; padding: 10px 14px 10px 30px; list-style: none;
  border: 1px solid var(--border, #e3e8ef); border-radius: 10px; background: var(--bg, #f8fafc);
}
.combi-appliquer-liste li {
  position: relative; padding: 3px 0; font-size: .9rem; font-weight: 600; color: var(--text, #0f172a);
}
.combi-appliquer-liste li::before {
  content: '⧉'; position: absolute; left: -18px; color: #6d28d9; font-weight: 700;
}
.combi-appliquer-notes p {
  margin: 0 0 6px; font-size: .84rem; line-height: 1.5; color: var(--text-2, #475569);
}
.combi-appliquer-notes p:last-child { margin-bottom: 0; }

/* Frais (commission, glissement) réglables MÊME en production : badge + champ mis
   en évidence pour les distinguer des paramètres verrouillés. */
.strat-badge-frais {
  display: inline-block; margin-left: 6px; font-size: .6rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--teal-dk) 15%, var(--surface)); color: var(--teal-dk);
  vertical-align: middle;
}
.strat-param-frais { opacity: 1; }
input.strat-num-frais {
  border-color: color-mix(in srgb, var(--teal-dk) 45%, var(--border));
  background: color-mix(in srgb, var(--teal-dk) 5%, var(--surface));
}
input.strat-num-frais:focus { outline: 2px solid color-mix(in srgb, var(--teal-dk) 40%, transparent); }
:root[data-theme="dark"] .strat-badge-frais { color: #4fd1c5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .strat-badge-frais { color: #4fd1c5; } }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE D'ÉDITION D'UNE STRATÉGIE PAR CRITÈRES (refonte 2026-08-08)
   ══════════════════════════════════════════════════════════════════════════ */
.strat-editeur .ed-form { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.ed-bloc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ed-grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
@media (max-width: 640px) { .ed-grille2 { grid-template-columns: 1fr; } }
.ed-champ { display: flex; flex-direction: column; gap: 6px; }
.ed-label { font-size: .82rem; font-weight: 700; color: var(--text-2); }
.ed-input { font-family: inherit; font-size: .95rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; width: 100%; }
.ed-input:focus { outline: 2px solid var(--blue-100); outline-offset: 1px; border-color: var(--blue); }

.ed-bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ed-bloc-titre { font-size: 1.15rem; margin: 0; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ed-logic { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-50); border: 1px solid var(--blue-100);
  padding: 2px 9px; border-radius: 20px; }
.ed-bloc-aide { margin: 6px 0 14px; font-size: .86rem; color: var(--text-3); }
.ed-sous-titre { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin: 18px 0 10px; }

.ed-criteres { display: flex; flex-direction: column; gap: 10px; }
.ed-crit { border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px; background: var(--bg); }
.ed-crit-head { display: flex; align-items: flex-start; gap: 11px; }
.ed-crit-toggle { margin-top: 3px; }
.ed-crit-tag { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px; margin-top: 2px; white-space: nowrap;
  background: var(--surface); color: var(--text-3); border: 1px solid var(--border); }
.ed-tag-prix { color: #4a5a6b; } .ed-tag-volume { color: #4c5490; }
.ed-tag-fondamental { color: #8a6410; } .ed-tag-sortie { color: #92454f; }
.ed-crit-titre { flex: 1; min-width: 0; }
.ed-crit-titre h4 { margin: 0; font-size: 1rem; font-weight: 700; }
.ed-crit-court { margin: 2px 0 0; font-size: .82rem; color: var(--text-3); }
.ed-crit-remove { border: none; background: none; cursor: pointer; color: var(--text-3);
  font-size: 1.05rem; line-height: 1; padding: 2px 4px; border-radius: 6px; flex-shrink: 0; }
.ed-crit-remove:hover { color: #b91c1c; background: #fbe9e9; }
.ed-crit-params { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 12px 0 0; padding-left: 2px; }
.ed-crit-std .ed-crit-params { margin-top: 11px; }
.ed-crit-params .strat-param { margin: 0; min-width: 210px; }
.ed-crit-noparam { margin: 8px 0 0; font-size: .8rem; color: var(--text-3); font-style: italic; }
/* Standard désactivé : réglages grisés, mais la carte reste visible. */
.ed-crit-off { opacity: .62; }
.ed-crit-off .ed-crit-params { pointer-events: none; }
.ed-crit-off .ed-crit-titre h4 { color: var(--text-3); }

.ed-add-zone { position: relative; margin-top: 12px; }
.ed-add-btn { font-family: inherit; font-size: .86rem; font-weight: 600; color: var(--blue);
  background: var(--blue-50); border: 1px dashed var(--blue-100); border-radius: 9px;
  padding: 9px 15px; cursor: pointer; }
.ed-add-btn:hover:not(:disabled) { background: var(--blue-100); }
.ed-add-btn:disabled { opacity: .5; cursor: not-allowed; }
.ed-add-menu { position: absolute; z-index: 40; left: 0; top: calc(100% + 6px);
  width: min(430px, 92vw); max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18); padding: 6px; }
.ed-add-item { display: block; width: 100%; text-align: left; border: none; background: none;
  cursor: pointer; padding: 9px 11px; border-radius: 8px; font-family: inherit; }
.ed-add-item:hover { background: var(--bg); }
.ed-add-item-nom { display: block; font-weight: 700; font-size: .9rem; color: var(--text); }
.ed-add-item-court { display: block; font-size: .8rem; color: var(--text-3); margin-top: 1px; }
.ed-add-vide { padding: 12px; font-size: .84rem; color: var(--text-3); }

.ed-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ed-submit { font-weight: 700; }

:root[data-theme="dark"] .ed-crit-remove:hover { background: rgba(185,28,28,.22); color: #f4726f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ed-crit-remove:hover { background: rgba(185,28,28,.22); color: #f4726f; }
}

/* ── Section « Ordre d'achat » de la page d'édition ── */
.ed-ordre-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .ed-ordre-types { grid-template-columns: 1fr; } }
.ed-ordre-type { display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; background: var(--bg);
  transition: border-color .12s, background .12s; }
.ed-ordre-type:has(input:checked) { border-color: var(--blue); background: var(--blue-50); }
.ed-ordre-type input { margin-top: 3px; accent-color: var(--blue); }
.ed-ordre-type-txt { display: flex; flex-direction: column; gap: 2px; }
.ed-ordre-type-txt strong { font-size: .92rem; }
.ed-ordre-type-txt em { font-style: normal; font-size: .78rem; color: var(--text-3); line-height: 1.35; }
.ed-ordre-reglages { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.ed-ordre-auto { margin: 0; max-width: 360px; }
.ed-ordre-seuil { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; color: var(--text-2); }
.ed-ordre-seuil-champ { display: inline-flex; align-items: center; gap: 5px; }
.ed-ordre-seuil-champ .strat-num { width: 78px; }
.ed-ordre-hint { font-size: .78rem; color: var(--text-3); }

/* Zone de danger (suppression) en bas de la page d'édition */
.ed-danger { border-color: #f0c9c4; background: color-mix(in srgb, #b91c1c 4%, var(--surface)); }
:root[data-theme="dark"] .ed-danger { border-color: rgba(220,80,72,.4); background: rgba(185,28,28,.10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ed-danger {
  border-color: rgba(220,80,72,.4); background: rgba(185,28,28,.10); } }
.ed-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ed-danger-lbl { font-weight: 700; color: #b91c1c; font-size: 1rem; }
:root[data-theme="dark"] .ed-danger-lbl { color: #f0837c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ed-danger-lbl { color: #f0837c; } }
.ed-danger-desc { margin: 3px 0 0; font-size: .85rem; color: var(--text-2); max-width: 62ch; }

/* Espace entre les actions du formulaire (Annuler/Enregistrer) et la zone de
   danger, qui est hors du .ed-form (le gap du flex ne s'y applique pas). */
.strat-editeur .ed-danger { margin-top: 22px; }

/* Menu « + Ajouter un critère » : recherche (sticky) + regroupement par famille. */
.ed-add-search { position: sticky; top: 0; z-index: 1; background: var(--surface);
  padding: 2px 2px 7px; margin-bottom: 2px; border-bottom: 1px solid var(--border); }
.ed-add-input { width: 100%; font-family: inherit; font-size: .88rem; color: var(--text);
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.ed-add-input:focus { outline: 2px solid var(--blue-100); outline-offset: 0; border-color: var(--blue); }
.ed-add-groupe { font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); padding: 10px 11px 3px; }
.ed-add-groupe:first-child { padding-top: 4px; }

/* ── Profil de la stratégie (en-tête page détail) : 4 scores d'affinité aux
      profils de liste + profil dominant, déduits des critères d'achat/vente.
      MÊME présentation que les « Profils de liste » de la page /ticker. ── */
.strat-arch { margin: 12px 0 4px; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface); max-width: 760px; }
.tk-arch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 12px; }
.tk-arch-title { font-weight: 800; font-size: 1.02rem; color: var(--text); }
.tk-arch-hint { font-size: .82rem; color: var(--text-3); }
.tk-arch-hint strong { color: var(--blue); }
.tk-arch-hint a { color: var(--blue); text-decoration: none; }
.tk-arch-hint a:hover { text-decoration: underline; }
.tk-arch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .tk-arch-grid { grid-template-columns: repeat(2, 1fr); } }
.tk-arch-item { padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg); }
.tk-arch-item.tk-arch-dom { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.tk-arch-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tk-arch-lbl { font-size: .82rem; font-weight: 700; color: var(--text-2); line-height: 1.2; }
.tk-arch-score { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.tk-arch-score small { font-size: .62rem; font-weight: 700; color: var(--text-3); }
.tk-arch-bar { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; }
.tk-arch-bar span { display: block; height: 100%; border-radius: 999px; }
.tk-arch-item.ok  .tk-arch-score { color: #12a35a; } .tk-arch-item.ok  .tk-arch-bar span { background: #12a35a; }
.tk-arch-item.moy .tk-arch-score { color: #c98a05; } .tk-arch-item.moy .tk-arch-bar span { background: #eaa11a; }
.tk-arch-item.bas .tk-arch-score { color: #d0473d; } .tk-arch-item.bas .tk-arch-bar span { background: #d0473d; }

/* ══ Investissement régulier : synthèse et tableaux de suivi ══ */
.dca-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 12px 0 6px;
}
.dca-kpi {
  background: var(--surface, #fff); border: 1px solid var(--border, #dfe4ea);
  border-radius: 10px; padding: 12px 14px; min-width: 0;
}
.dca-kpi-val {
  font-size: 1.12rem; font-weight: 800; color: var(--text, #1f2937);
  letter-spacing: -.01em; white-space: nowrap;
}
.dca-kpi-sub { font-size: .8rem; font-weight: 600; opacity: .8; margin-left: 5px; }
.dca-kpi-lbl {
  margin-top: 3px; font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3, #6b7280);
}
.dca-table td, .dca-table th { vertical-align: middle; }
/* Support retiré de la liste : conservé, plus alimenté */
.dca-table tr.dca-hors-liste { opacity: .62; }
.dca-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3, #6b7280); background: var(--bg, #f1f5f9);
  padding: 2px 6px; border-radius: 4px; margin-left: 6px;
}
/* Cagnotte supérieure à un demi-versement : le titre attend depuis longtemps */
.dca-table .dca-cagnotte-forte { color: var(--gold-dk, #9a5b00); font-weight: 700; }
.dca-table tr.dca-servi td { background: var(--teal-50, #e6f6f4); }
.dca-achats { display: flex; flex-wrap: wrap; gap: 6px; }
.dca-achat { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; }
/* ── Onglet Analyse d'une production DCA (2026-08-23) : colonne de sections à
   gauche (titre + KPI), contenu à droite - même patron que l'onglet
   « Investissement » d'une liste (lv2-inv-*), accent BLEU production. ── */
.pg-inv-grid { display: grid; grid-template-columns: minmax(196px, 236px) 1fr; gap: 16px; }
.pg-inv-rail { position: sticky; top: 70px; align-self: start; padding: 14px; }
.pg-inv-detail { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pg-inv-vue { display: flex; flex-direction: column; gap: 16px; }
.pg-inv-vue[hidden] { display: none; }
.pg-inv-items { display: flex; flex-direction: column; gap: 6px; }
.pg-inv-item {
  display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 10px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.pg-inv-item:hover { background: var(--bg); border-color: var(--blue, #018ffa); }
.pg-inv-item.actif {
  border-color: var(--blue, #018ffa); border-left-width: 4px;
  background: var(--blue-50, #e7f3fe); box-shadow: 0 2px 10px -4px var(--blue, #018ffa);
}
.pg-inv-lbl { display: block; font-size: .78rem; font-weight: 700; color: var(--text-2); line-height: 1.2; }
.pg-inv-val {
  display: block; margin-top: 3px; font-size: 1.16rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pg-inv-sub { display: block; margin-top: 2px; font-size: .7rem; color: var(--text-3); line-height: 1.3; }
/* Onglet Portefeuille (2026-09-03) : même colonne de vues, un peu plus étroite -
   le tableau des positions (14 colonnes) doit tenir sans défilement à 1440 px */
#onglet-pflie .pg-inv-grid { grid-template-columns: minmax(176px, 192px) 1fr; }
@media (max-width: 1000px) {
  .pg-inv-grid { grid-template-columns: 1fr; }
  .pg-inv-rail { position: static; }
  .pg-inv-items { display: grid; grid-template-columns: repeat(2, 1fr); }
}

/* Panneau courtier de la carte « Gestion des ordres » (Réglages DCA,
   2026-08-23) : mêmes classes que la modale de /liste (définies dans liste.css,
   non chargé ici), accent BLEU (pages de production) au lieu du teal listes. */
.dca-broker { margin: 10px 0 0; padding: 11px 13px; border: 1px solid var(--border);
  border-left: 3px solid var(--blue, #018ffa); border-radius: 10px; background: var(--bg); }
.dca-broker[hidden] { display: none; }
.dca-broker-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.dca-broker-lbl { font-size: .78rem; font-weight: 700; color: var(--text-2); min-width: 122px; }
.dca-broker-env { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--text); }
.dca-broker-env input { accent-color: var(--blue, #018ffa); }
.dca-broker select { font-family: inherit; font-size: .84rem; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); min-width: 240px; }
.dca-broker-msg { margin: 4px 0 0; font-size: .76rem; color: var(--text-3); line-height: 1.4; }
.dca-broker-btn-connexion {
  display: inline-flex; align-items: center; font-size: .8rem; font-weight: 650;
  padding: 6px 12px; border-radius: 8px; background: var(--blue, #018ffa); color: #fff;
  text-decoration: none; line-height: 1.3;
}
.dca-broker-btn-connexion:hover { filter: brightness(1.1); }
.dca-broker-btn-connexion[hidden] { display: none; }

/* Achats d'un support, dépliables dans « Répartition des achats » (refonte DCA
   2026-08-23) : liste compacte tirée du journal dca_versements. */
.dca-achats-det summary {
  cursor: pointer; font-size: .82rem; color: var(--blue, #018ffa); user-select: none;
}
.dca-achats-liste {
  margin: 4px 0 2px; padding-left: 16px; font-size: .8rem; color: var(--text-2, #374151);
  font-variant-numeric: tabular-nums; line-height: 1.6; white-space: nowrap;
}
.strat-note-inline { font-size: .82rem; font-weight: 400; color: var(--text-3, #6b7280); }

/* ── « Ce que fait cette stratégie » (tête de l'onglet Paramètres) ──────
   Deux lignes libellé / description, alignées : les signaux d'achat et de
   vente se lisent en regard l'un de l'autre plutôt qu'en un paragraphe où le
   point-virgule sépare tout. */
.strat-signaux { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.strat-signal {
  display: grid; grid-template-columns: 160px 1fr; gap: 4px 14px; align-items: baseline;
}
.strat-signal dt {
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3);
}
.strat-signal dd {
  margin: 0; font-size: .92rem; line-height: 1.5; color: var(--text);
}
@media (max-width: 620px) {
  .strat-signal { grid-template-columns: 1fr; }
}

/* ── « Ajouter une condition / un signal de vente » ─────────────────────
   Replié par défaut : c'est une action ponctuelle à côté de réglages qu'on
   revisite souvent. Les cases n'ont pas d'interrupteur (slider) : elles ne
   règlent rien, elles font ENTRER un signal dans le formulaire - il prendra sa
   forme habituelle au rechargement. */
.strat-ajout { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.strat-ajout > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 700; color: var(--blue);
}
.strat-ajout > summary::-webkit-details-marker { display: none; }
/* Le « + » et le « − » sont DESSINÉS (deux barres en dégradé plein) et non
   composés avec un caractère : un glyphe se cale sur les métriques de la police
   installée - le « + » se place sur l'axe mathématique, le « – » sur l'axe des
   tirets -, si bien qu'aucun des deux ne tombe au centre du disque, et pas de la
   même façon d'un poste à l'autre. `center` est, lui, une position géométrique. */
.strat-ajout > summary::before {
  content: ""; display: inline-block; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 8px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 8px no-repeat,
    var(--blue);
}
.strat-ajout[open] > summary::before {
  background:
    linear-gradient(#fff, #fff) center / 8px 2px no-repeat,
    var(--blue);
}
.strat-ajout > summary:hover { text-decoration: underline; }
.strat-ajout-aide { margin: 8px 0 10px; font-size: .78rem; color: var(--text-3); }
.strat-ajout-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px;
}
.strat-ajout-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); font-size: .84rem; color: var(--text-2);
  transition: border-color .14s, background .14s;
}
.strat-ajout-item:hover { border-color: var(--blue); background: var(--blue-50, #eff6ff); }
.strat-ajout-item input { flex: none; }

/* Bouton d'AJOUT : ce n'est plus une case à cocher mais une action immédiate. */
button.strat-ajout-item { font-family: inherit; text-align: left; cursor: pointer; }
/* Même parti pour le « + » de chaque bouton : dessiné, jamais composé. */
.strat-ajout-plus {
  flex: none; display: inline-block;
  /* Dimensions PAIRES, barres PAIRES : (16 − 2) / 2 = 7 et (16 − 8) / 2 = 4,
     deux entiers. En 17 px avec des barres de 9, le centrage tombait sur des
     demi-pixels et la croix paraissait décalée d'un cheveu. */
  width: 16px; height: 16px; border-radius: 50%;
  background:
    linear-gradient(var(--text-2), var(--text-2)) center / 8px 2px no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) center / 2px 8px no-repeat,
    var(--border);
  transition: background-color .14s;
}
button.strat-ajout-item:hover .strat-ajout-plus {
  background:
    linear-gradient(#fff, #fff) center / 8px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 8px no-repeat,
    var(--blue);
}

/* Retrait d'un signal : croix discrète, rouge au survol seulement - l'action
   est immédiate, elle ne doit pas être appelante au repos. */
.strat-retirer {
  flex: none; margin-left: 6px; width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border: 1px solid transparent; border-radius: 6px;
  /* padding: 0 - le navigateur applique 1px 6px par défaut à tout <button> :
     la boîte de contenu tombait à 8 px pour un « × » qui en fait 9, et le
     glyphe débordait vers la droite (mesuré : 3 px hors axe). */
  padding: 0;
  background: none; color: var(--text-4); cursor: pointer;
  font-size: 1rem; line-height: 1; font-family: inherit;
  transition: background .14s, color .14s, border-color .14s;
}
.strat-retirer:hover { background: #fdeaea; color: #b91c1c; border-color: #f0c2c2; }
.strat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Signal sans réglage : la carte n'a pas de corps, son en-tête ne doit donc pas
   porter de séparateur ni de marge basse. */
.stop-carte-seule .stop-carte-tete { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.stop-carte-aide { margin: 6px 0 0; font-size: .78rem; line-height: 1.45; color: var(--text-3); }

/* Message éphémère après ajout/retrait d'un signal (la page n'étant pas
   rechargée, il n'y a pas de flash serveur à afficher). */
.strat-toast {
  position: fixed; top: calc(var(--topbar-h, 46px) + 12px); right: 18px; z-index: 400;
  max-width: min(440px, calc(100vw - 36px));
  padding: 11px 15px; border-radius: 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--blue);
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .45);
  font-size: .86rem; line-height: 1.45; font-weight: 600;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.strat-toast.visible { opacity: 1; transform: none; }
.strat-toast-err { border-left-color: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .strat-toast { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   HUB « MES STRATÉGIES » - style repris de /mes_listes (2026-08-15)
   Les deux pages font le même travail : lister des objets qu'on ouvre, renomme,
   duplique ou supprime. Elles n'avaient aucune raison d'avoir deux grammaires
   visuelles - une carte à titre h2 et des lignes de 61 px ici, un bandeau
   d'en-tête discret et des lignes de 37 px là.
   Tout est SCOPÉ à `.strat-hub` : les pages de détail et de combinaison, qui
   partagent .sig-card et .opp-table, ne bougent pas.
   ══════════════════════════════════════════════════════════════════════════ */

/* En-tête de page : titre, sous-titre, action principale à droite. */
.strat-hub .opp-header {
  padding-bottom: 0; border-bottom: none; margin-bottom: 18px; align-items: flex-start;
}
.strat-hub .opp-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.strat-hub .opp-subtitle { font-size: .9rem; line-height: 1.5; color: var(--text-2); max-width: 62ch; }
/* Bouton compact et à la couleur du domaine, comme « Nouvelle liste ». */
.strat-hub .opp-header .opp-btn-portfolio {
  padding: 6px 12px; font-size: .8rem; font-weight: 650; border-radius: var(--r-sm, 8px);
  background: var(--dom-liste, #0f766e); flex: 0 0 auto;
}
.strat-hub .opp-header .opp-btn-portfolio:hover { background: var(--dom-liste, #0f766e); filter: brightness(1.12); }

/* Carte : le titre devient un BANDEAU d'en-tête, la table occupe toute la
   largeur (plus de padding autour). */
.strat-hub .sig-card { padding: 0; overflow: hidden; }
.strat-hub .sig-card > .sig-h2 {
  margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-2);
}
.strat-hub .combos-card > .sig-h2 { color: #6d28d9; }
/* Les blocs qui ne sont pas des tableaux (barre de sélection, invitations)
   retrouvent leur marge intérieure. */
.strat-hub .sig-card > .strat-combi-bar,
.strat-hub .sig-card > p,
.strat-hub .sig-card > .strat-note,
.strat-hub .strat-invite { padding: 14px 18px; }
.strat-hub .sig-card > .opp-table-wrap { border: none; border-radius: 0; box-shadow: none; }

/* Tableau : densité et graphisme de .ml-table. */
.strat-hub .opp-table { font-size: .82rem; }
.strat-hub .sig-card .opp-table th {
  padding: 6px 12px; font-size: .66rem; letter-spacing: .05em;
  color: var(--text-3); border-bottom: 1px solid var(--border); background: none;
}
.strat-hub .sig-card .opp-table td {
  padding: 5px 12px; font-size: .82rem;
  border-bottom: 1px solid var(--border-lt); vertical-align: middle;
}
.strat-hub .opp-table tbody tr:last-child td { border-bottom: none; }
.strat-hub .opp-table tbody tr:hover { background: var(--bg); }
.strat-hub .opp-table tbody tr:nth-child(even) { background: none; }
.strat-hub .opp-table tbody tr:nth-child(even):hover { background: var(--bg); }

/* Nom : même graisse et même taille que dans /mes_listes, sans effet de survol
   (le fond de ligne suffit - cf. la même décision là-bas). */
.strat-hub .opp-table td a.strat-lien-nom,
.strat-hub .opp-table td .opp-ticker {
  font-weight: 650; font-size: .86rem; text-decoration: none;
}
.strat-hub .opp-table td a:hover { text-decoration: none; }

/* Boutons d'action : carrés de 24 px, discrets, rouges au survol pour la
   suppression - géométrie de .ml-act. */
.strat-hub .strat-actions button,
.strat-hub .strat-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 2px; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: none;
  color: var(--text-3); cursor: pointer; text-decoration: none;
  transition: background .14s, color .14s, border-color .14s;
}
.strat-hub .strat-actions button:hover,
.strat-hub .strat-actions a:hover { background: var(--bg); color: var(--text); border-color: var(--border); }
.strat-hub .strat-actions .strat-btn-danger:hover,
.strat-hub .strat-actions .js-suppr:hover { background: #fdeaea; color: #b91c1c; border-color: #f0c2c2; }

/* Une ligne = UNE ligne. Le nom qui passe à la ligne et la date coupée en deux
   faisaient des lignes de 55 px là où /mes_listes en fait 37 : c'est ce qui
   distinguait encore les deux tableaux. Le nom est tronqué par des points de
   suspension, comme là-bas, et son intitulé complet reste dans l'infobulle du
   lien. */
.strat-hub .opp-table td { white-space: nowrap; }
.strat-hub .opp-table td:nth-child(2) { max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.strat-hub .opp-table td:nth-child(2) > * { vertical-align: middle; }
/* Deuxième ligne des cellules à double valeur (recul en %, puis en montant) :
   elle reste, mais en petit, à la suite plutôt qu'en dessous. */
.strat-hub .opp-table td .pf-neg-sub,
.strat-hub .opp-table td small { font-size: .72rem; }

/* Montant du recul À LA SUITE du pourcentage, et non en dessous : c'est lui qui
   imposait deux lignes à chaque rangée du hub (52 px au lieu de 37). Même
   décision que pour le tableau des pires épisodes de /liste. */
.strat-hub .opp-table .strat-recul-mnt {
  display: inline; margin-left: 6px; font-size: .72rem; opacity: .75;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE D'UNE STRATÉGIE - grammaire de la page d'une liste (2026-08-16)
   Même section « Analyser », donc même bande collante titre + onglets, mêmes
   pastilles d'onglets avec curseur glissant, mêmes titres de section à liseré.
   Couleur unique de la section : --dom-analyser (#0f766e clair / #2dd4bf sombre).
   ══════════════════════════════════════════════════════════════════════════ */

/* La bande colle sous la barre du haut. Elle est DANS .container : le conteneur
   court jusqu'au bas de la page (il enveloppe tous les panneaux), la course du
   sticky est donc complète. */
.strat-page .lv2-onglets-bar.strat-bar {
  position: sticky; top: var(--topbar-h, 46px); z-index: 120;
  background: var(--bg); border-bottom: 2px solid var(--border);
  margin: 0 0 18px; padding: 0;
}
.strat-page .strat-bar::after {         /* ombre quand le contenu passe dessous */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
  background: linear-gradient(to bottom, rgba(15, 23, 42, .07), transparent);
  pointer-events: none;
}

/* Rangée du titre : déployée en haut de page, compacte dès qu'on défile. */
.strat-titre-rang {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 8px; transition: padding .18s ease;
}
.strat-titre-rang .lv2-title {
  margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  transition: font-size .18s ease;
}
.strat-titre-rang .lv2-subtitle {
  margin: 0; font-size: .82rem; color: var(--text-3);
  overflow: hidden; max-height: 3em; opacity: 1;
  transition: max-height .18s ease, opacity .14s ease;
}
.strat-titre-rang .lv2-subtitle::before { content: "· "; }
.strat-titre-rang.compact { padding: 6px 0 4px; }
.strat-titre-rang.compact .lv2-title { font-size: 1.05rem; }
.strat-titre-rang.compact .lv2-subtitle { max-height: 0; opacity: 0; }
.strat-badge-lien { text-decoration: none; }

/* Rangée des onglets : pastilles à gauche, actions à droite, sur une ligne. */
.strat-onglets-rang {
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 0 0 9px;
}
.strat-onglets-rang .lv2-entete-actions { display: flex; align-items: center; gap: 9px; }

/* Onglets : cadre commun + pastilles + curseur glissant, comme sur /liste. */
.strat-page nav.strat-nav.liste-tabs {
  display: flex; flex-direction: row; align-items: center; gap: 0;
  margin: 0; padding: 0; border: none; background: none;
}
.strat-page .liste-tabs-boite {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px;
}
.strat-page .liste-tab {
  position: relative; z-index: 1;
  font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: -.005em;
  padding: 8px 18px; border: none; background: none; cursor: pointer;
  color: var(--text-3); border-radius: 999px; margin: 0; white-space: nowrap;
  transition: color var(--tr), background var(--tr);
}
.strat-page .liste-tab:hover { color: var(--text); background: var(--dom-analyser-lo); }
.strat-page .liste-tab.actif { color: #fff; background: var(--dom-analyser); }
.strat-page .liste-tab-thumb {
  position: absolute; top: 0; left: 0; z-index: 0;
  border-radius: 999px; background: var(--dom-analyser);
  box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 6px 16px -8px var(--dom-analyser);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), width .24s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
/* Curseur en place : l'onglet actif ne peint plus son propre fond. */
.strat-page .liste-tabs-anime .liste-tab.actif,
.strat-page .liste-tabs-anime .liste-tab.actif:hover { background: transparent; box-shadow: none; }
/* Survoler l'onglet ACTIF ne change rien - on y est déjà, comme sur /liste.
   Règle nécessaire : l'ancien sélecteur `.strat-nav button:hover:not(:disabled)`
   (spécificité 0,3,1) primait sur `.strat-page .liste-tab.actif` (0,3,0) et
   repeignait le texte en encre sombre sur le fond teal. */
.strat-page .liste-tab.actif:hover { color: #fff; }
/* En thème sombre, --dom-analyser est CLAIR : texte sombre dessus. */
:root[data-theme="dark"] .strat-page .liste-tab.actif,
:root[data-theme="dark"] .strat-page .liste-tab.actif:hover { color: #0b1420; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .strat-page .liste-tab.actif,
  :root:not([data-theme="light"]) .strat-page .liste-tab.actif:hover { color: #0b1420; }
}

/* Boutons d'action de la bande : mêmes que ceux de /liste. */
.strat-page .lv2-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: .82rem; font-weight: 650; white-space: nowrap;
  padding: 7px 13px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: filter var(--tr), background var(--tr);
}
.strat-page .lv2-btn-primaire { background: var(--dom-analyser); color: #fff; }
.strat-page .lv2-btn-primaire:hover { filter: brightness(1.12); }
.strat-page .lv2-btn-sec { background: var(--surface); color: var(--text-2); border-color: var(--border); }
.strat-page .lv2-btn-sec:hover { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .strat-page .lv2-btn-primaire { color: #0b1420; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .strat-page .lv2-btn-primaire { color: #0b1420; }
}

/* Bloc de contexte sous la bande (profil de la stratégie, combinaisons). */
.strat-page .strat-contexte { padding-bottom: 0; border-bottom: none; }

/* Titres de section : liseré à la couleur de la section, comme sur /liste. */
.strat-page .sig-card > .sig-h2 {
  position: relative; padding-left: 11px; border-bottom: none;
  font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 14px;
}
.strat-page .sig-card > .sig-h2::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px;
  border-radius: 3px; background: var(--dom-analyser);
}
.strat-page .pf-settings-title { color: var(--text); }


/* ══════════ Onglet Analyse : sections à gauche, détail à droite ══════════
   Repris de l'onglet Évaluation d'une liste (.lv2-scores) : six sections
   empilées faisaient trois écrans de défilement pour retrouver un chiffre.
   Chaque entrée porte LE chiffre clé de sa section, ce qui permet de lire
   l'essentiel sans changer de vue. */
.strat-page .strat-res-periode {
  margin: 0 0 12px; font-size: .82rem; color: var(--text-3);
}
.strat-page .strat-res-grid {
  /* Pas d'`align-items: start` : la colonne de gauche doit s'étirer sur toute
     la hauteur, sinon son `position: sticky` n'a aucune course. */
  display: grid; grid-template-columns: minmax(196px, 232px) 1fr; gap: 16px;
}
/* `--barre-collante-bas` est mesurée par onglets_sticky.js : la hauteur de la
   bande « titre + onglets » change avec le titre et son compactage, une valeur
   écrite en dur cachait le haut de la colonne derrière la bande. */
.strat-page .strat-res-rail {
  position: sticky; top: calc(var(--barre-collante-bas, 135px) + 10px);
  max-height: calc(100vh - var(--barre-collante-bas, 135px) - 24px); overflow-y: auto;
  padding: 14px 14px 12px;
}
.strat-page .strat-res-detail { min-width: 0; }
.strat-page .strat-res-rail-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.strat-page .strat-res-rail-titre { font-weight: 800; font-size: .95rem; color: var(--text); }
.strat-page .strat-res-rail-hint { font-size: .74rem; color: var(--text-3); line-height: 1.35; }
.strat-page .strat-res-items { display: flex; flex-direction: column; gap: 6px; }
.strat-page .strat-res-item {
  display: block; width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 10px;
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.strat-page .strat-res-item:hover { background: var(--bg); border-color: var(--dom-analyser); }
.strat-page .strat-res-item:focus-visible { outline: 2px solid var(--dom-analyser); outline-offset: 2px; }
/* La section choisie commande à elle seule la colonne de droite : sa marque
   doit se lire d'un coup d'œil. */
.strat-page .strat-res-item.actif {
  border-color: var(--dom-analyser); border-left-width: 4px;
  background: var(--dom-analyser-lo); box-shadow: 0 2px 10px -4px var(--dom-analyser);
}
.strat-page .strat-res-lbl {
  display: block; font-size: .78rem; font-weight: 700; color: var(--text-2); line-height: 1.2;
}
.strat-page .strat-res-val {
  display: block; margin-top: 3px; font-size: 1.16rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Un motif de sortie est un MOT, pas un nombre : plus petit, il peut passer à
   la ligne au lieu d'être coupé. */
.strat-page .strat-res-val-txt { font-size: .92rem; white-space: normal; line-height: 1.25; }
.strat-page .strat-res-sub {
  display: block; margin-top: 2px; font-size: .7rem; color: var(--text-3); line-height: 1.3;
}
.strat-page .strat-res-vue[hidden] { display: none; }

@media (max-width: 1000px) {
  .strat-page .strat-res-grid { grid-template-columns: 1fr; }
  .strat-page .strat-res-rail { position: static; max-height: none; }
  .strat-page .strat-res-items { display: grid; grid-template-columns: repeat(2, 1fr); }
}

/* Liseré des cartes numérotées de l'onglet Optimisation : reposé APRÈS le
   raccourci `border` de `.strat-page .sig-card`, qui remettait sinon le côté
   gauche à la couleur de bordure ordinaire. */
.strat-page .optim-card { border-left: 3px solid var(--dom-analyser); }
.combi-page .optim-card { border-left-color: #6d28d9; }

/* Renvoi d'une section de l'onglet Analyse à une autre, dans le fil du texte :
   un bouton (il change la vue, il ne navigue pas) dessiné comme un lien. */
.strat-page .strat-lien-vue {
  font: inherit; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--dom-analyser); font-weight: 650; text-decoration: underline;
  text-underline-offset: 2px;
}
.strat-page .strat-lien-vue:hover { filter: brightness(1.15); }

/* Onglet « Présentation » d'une combinaison : une fiche par stratégie membre. */
.combi-page .combi-membre { padding: 12px 0; border-top: 1px solid var(--border); }
.combi-page .combi-membre:first-of-type { border-top: none; padding-top: 2px; }
.combi-page .combi-membre-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-bottom: 6px; }
.combi-page .combi-membre-nom { font-weight: 750; font-size: .95rem; color: var(--text); text-decoration: none; }
.combi-page .combi-membre-nom:hover { text-decoration: underline; }
.combi-page .combi-membre-signal {
  font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  color: #6d28d9; background: color-mix(in srgb, #6d28d9 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #6d28d9 30%, var(--surface)); text-decoration: none;
}
.combi-page .combi-membre-signal:hover { text-decoration: underline; }
.combi-page .combi-membre-profil { font-size: .74rem; color: var(--text-3); }

/* Combinaison : le curseur des onglets et la barre portent le VIOLET, sa marque
   (le teal est celui des stratégies). Déclaré après le bloc .strat-page. */
.combi-page .liste-tab-thumb {
  background: #6d28d9;
  box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 6px 16px -8px #6d28d9;
}
/* Sélecteur porté à la même spécificité que l'ancien `.combi-page .strat-nav
   button.actif` (violet), qui rendait sinon le libellé violet sur le curseur
   violet - donc invisible. */
.combi-page .strat-nav .liste-tab.actif,
.combi-page .strat-nav .liste-tab.actif:hover { color: #fff; background: transparent; }
/* Le curseur d'une combinaison reste VIOLET SOMBRE dans les deux thèmes (le
   teal, lui, s'éclaircit en thème sombre) : son libellé reste donc blanc, sinon
   il hérite de l'encre sombre prévue pour le teal clair. */
:root[data-theme="dark"] .combi-page .strat-nav .liste-tab.actif,
:root[data-theme="dark"] .combi-page .strat-nav .liste-tab.actif:hover { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .combi-page .strat-nav .liste-tab.actif,
  :root:not([data-theme="light"]) .combi-page .strat-nav .liste-tab.actif:hover { color: #fff; }
}
.combi-page .liste-tab:hover { background: color-mix(in srgb, #6d28d9 10%, transparent); }
.combi-page .pf-section-sub { border-bottom-color: #6d28d9; }

/* Indicateurs clés de l'onglet Présentation : les mêmes chiffres que la colonne
   de gauche de l'onglet Analyse, cliquables pour y aller directement. */
.strat-page .strat-kpi-liens {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px;
}
.strat-page .strat-kpi-lien {
  display: block; text-align: left; font-family: inherit; cursor: pointer;
  padding: 11px 13px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--dom-analyser);
  border-radius: 10px; transition: background var(--tr), box-shadow var(--tr);
}
.combi-page .strat-kpi-lien { border-left-color: #6d28d9; }
.strat-page .strat-kpi-lien:hover { background: var(--bg); box-shadow: 0 2px 10px -4px var(--dom-analyser); }
.combi-page .strat-kpi-lien:hover { box-shadow: 0 2px 10px -4px #6d28d9; }
.strat-page .strat-kpi-lien .strat-res-lbl,
.strat-page .strat-kpi-lien .strat-res-val,
.strat-page .strat-kpi-lien .strat-res-sub { display: block; }

/* Bande d'onglets : le bouton d'action reste à droite, même quand les onglets
   passent à la ligne (une combinaison en a huit). */
.strat-page .lv2-entete-actions { margin-left: auto; }

/* Page « Mes combinaisons » : choix des stratégies à assembler, dans la pop-up
   de création. Une liste de cases lisible plutôt qu'un select multiple, qui
   cache la moitié des options et n'affiche aucun chiffre. */
.strat-modal-large { max-width: 640px; width: calc(100% - 32px); }
.combi-choix { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto;
  margin: 0 0 14px; padding: 2px; }
.combi-choix-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1px 9px; align-items: baseline;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); cursor: pointer;
}
.combi-choix-item:hover { border-color: var(--dom-analyser); background: var(--bg); }
.combi-choix-item:has(input:checked) { border-color: var(--dom-analyser); background: var(--dom-analyser-lo); }
.combi-choix-item input { grid-row: 1 / span 2; accent-color: var(--dom-analyser); }
.combi-choix-nom { font-size: .88rem; font-weight: 700; color: var(--text); }
.combi-choix-sub { grid-column: 2; font-size: .74rem; color: var(--text-3); }

/* Case « créer un portefeuille de suivi » des modales de mise en production
   (portefeuille OPTIONNEL depuis le 2026-08-27). */
.strat-lien-case {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  font-size: .88rem; line-height: 1.45; color: var(--text-2); cursor: pointer;
}
.strat-lien-case input { margin-top: 2px; flex: none; }
.strat-lien-nom[hidden] { display: none; }
.strat-lien-aide {
  margin: 8px 0 0; padding: 8px 12px; border-radius: 8px;
  background: #fff6e5; border: 1px solid #ffe2ad; color: #7a4d00;
  font-size: .82rem; line-height: 1.45;
}
.strat-lien-aide[hidden] { display: none; }

/* Lien vers la liste de supports, colonne « Liste » du hub. Discret par
   défaut (même patron que .mp-lien et .saxo-lien-strat) : il hérite de la
   couleur du texte et ne se signale qu'au survol - une colonne entière de
   liens colorés tirerait l'oeil plus que les chiffres. */
.container.strat-hub .strat-lien-liste {
  color: inherit; text-decoration: none; border-bottom: 1px dotted transparent;
}
.container.strat-hub .strat-lien-liste:hover {
  color: var(--blue); border-bottom-color: currentColor;
}

/* Tableau des positions de l'onglet Portefeuille (15 colonnes) : compact pour
   tenir dans la carte sans défilement horizontal à 1440 px. */
.sig-card .ptf-table th { padding: 7px 5px; font-size: .68rem; }
.sig-card .ptf-table td { padding: 6px 5px; font-size: .8rem; white-space: nowrap; }
.ptf-table .cmp-etat { font-size: .76rem; }
.ptf-table .pf-kpi-sub { display: block; font-size: .68rem; }

/* Capsule ticker (même dessin que /liste, liste.css) : pages de production. */
.capsule-ticker {
  display: inline-flex; justify-content: center; font-weight: 700; font-size: 0.68rem;
  background: var(--teal-dk, #14b8a6); padding: 3px 7px; color: #fff; border-radius: 5px;
  white-space: nowrap; flex-shrink: 0; text-decoration: none; vertical-align: middle;
}
a.capsule-ticker:hover { opacity: 0.82; text-decoration: none; }

/* ── Onglets d'une production servie sous l'adresse de son PORTEFEUILLE ──────
   (2026-09-15) La page vit sous /patrimoine/portefeuille/<id> et son premier
   onglet, « Composition », est rendu par /patrimoine avec l'accent ARDOISE du
   patrimoine : les onglets de la production prennent la même couleur, pour que
   la barre ne change ni de dessin ni de teinte d'un onglet à l'autre. Le
   dessin, lui, était déjà identique (.pat-page-tab / .prod-tab partagent
   géométrie et pilule). */
.strat-nav.prod-nav--pf a.prod-tab:hover { background: var(--dom-patri-lo, #eef1f5); }
.strat-nav.prod-nav--pf a.prod-tab.actif {
  background: var(--dom-patri, #334155);
  box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 6px 16px -8px var(--dom-patri, #334155);
}
.strat-nav.prod-nav--pf a.prod-tab.actif:hover { background: var(--dom-patri, #334155); }