/* ── 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: calc(var(--topbar-h, 54px) + 49px);
  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; }

/* Barre d'onglets d'une PRODUCTION (page générale / transmissions / portefeuille) :
   réutilise .strat-nav ; pastilles de comptage sur les onglets « à faire ». */
.prod-nav a { display: inline-flex; align-items: center; gap: 7px; }
.prod-nav-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 16px; padding: 0 5px; border-radius: 8px;
  font-size: .68rem; font-weight: 800; color: #fff; line-height: 1; }
.prod-nav-badge-saxo { background: var(--teal-dk); }
.prod-nav-badge-valider { background: #db2777; }

/* EN-TÊTE COMMUN d'une production (macro _prod_entete.html) — partagé par la
   page générale, transmissions et portefeuille pour que la barre d'onglets soit
   toujours à la même hauteur. */
.pg-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 2px;
  font-size: .9rem; color: var(--text-2); align-items: center; }
.pg-meta b { color: var(--text); font-weight: 600; }
/* Liens de texte de l'en-tête ; le bouton « Voir l'analyse » garde son texte
   blanc (sans ce :not(), cette règle plus spécifique le repeindrait en bleu). */
.pg-meta a:not(.opp-btn-portfolio) { color: var(--blue); }
/* 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)); }

/* 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é bleu à gauche pour bien les séparer visuellement */
.strat-page .optim-card { border-left: 3px solid var(--blue); }
.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;
  border-bottom: 2px solid var(--blue);
  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 */
.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; }
.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); }