/* ── Page Opportunités d'investissement ── */

.container {
  max-width: 1600px;
  /*margin: 0 auto;*/
  padding: 24px 20px 60px;
}

.container-narrow { max-width: 900px; }

.opp-header {
  padding-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}

/* Bouton d'action principal (bleu). Volontairement SOBRE et compact : padding
   et rayon resserrés, texte plus petit - un bouton épais faisait « gros »
   plutôt que professionnel. Classe partagée par tout le site. */
.opp-btn-portfolio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--btn-primaire, var(--blue));
  color: #fff;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tr);
}
.opp-btn-portfolio:hover { background: var(--btn-primaire-h, var(--blue-dk)); }
/* ── Toolbar calendrier + filtres ── */
.opp-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.opp-cal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--text-2);
  font-weight: 600;
}
.opp-cal input[type="date"] {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  font-family: inherit;
}
.opp-search {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .85rem;
  min-width: 170px;
}
.opp-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
}
.opp-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--text-2);
  cursor: pointer;
}
.opp-count {
  margin-left: auto;
  font-size: .8rem;
  color: var(--text-3);
}

/* ── Tri par colonne ── */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--blue-dk); }
th.sortable.sort-desc::after { content: ' ▼'; font-size: .6rem; }
th.sortable.sort-asc::after  { content: ' ▲'; font-size: .6rem; }

.opp-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

.opp-subtitle {
  color: var(--text-3);
  font-size: .92rem;
  margin: 0;
}

.opp-method {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: .85rem;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 20px;
}

.opp-method em { color: var(--text-3); }

.opp-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  overflow-x: auto;
}

.opp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.opp-table th {
  text-align: left;
  padding: 12px 14px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.opp-table th .th-sub {
  font-weight: 500;
  font-size: .7rem;
  color: var(--text-4);
  text-transform: none;
  letter-spacing: 0;
}

.opp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-lt);
  vertical-align: middle;
}

.opp-table tbody tr:last-child td { border-bottom: none; }
.opp-table tbody tr:hover { background: var(--bg); }

.opp-table .num { text-align: right; white-space: nowrap; }
.col-rank { width: 36px; color: var(--text-4); font-weight: 600; }

.opp-ticker {
  font-weight: 700;
  color: var(--blue-dk);
  text-decoration: none;
}
.opp-ticker:hover { text-decoration: underline; }

.opp-nom { font-size: .82rem; color: var(--text-2); }
.opp-sector { font-size: .75rem; color: var(--text-4); }

.opp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Couleur par FAMILLE de signaux (et non par signal) : palette limitée à
   2 coloris pour rester lisible et identifier la famille d'un coup d'œil.
   - Patterns CLASSIQUES → bleu ;
   - Patterns PROPRIÉTAIRES (mining 2026) → teal (couleur secondaire du site).
   Le libellé du badge identifie le signal précis à l'intérieur de sa famille. */
.opp-badge-pullback,
.opp-badge-golden,
.opp-badge-breakout,
.opp-badge-macd_tendance,
.opp-badge-bollinger_retour,
.opp-badge-squeeze_cassure,
.opp-badge-appui_sma50,
.opp-badge-croisement_court {
  background: var(--blue-50); color: var(--blue-dk); border: 1px solid var(--blue-100);
}
.opp-badge-capitulation,
.opp-badge-rebond_v,
.opp-badge-choc_momentum,
.opp-badge-capitulation_v,
.opp-badge-rebond_confirme,
.opp-badge-accumulation_repli {
  background: var(--teal-50, #e6f6f4); color: var(--teal-dk, #0f766e);
  border: 1px solid var(--teal-100, #9fd9d1);
}
/* Pattern TF MOYEN TERME (ex-LT) → ardoise (3ᵉ famille) */
.opp-badge-lt_momentum_ca,
.opp-badge-lt_croissance_benef,
.opp-badge-lt_convalescent {
  background: var(--surface); color: var(--text-2); border: 1px solid var(--border);
}
/* Pattern TF LONG TERME (ex-Horizon long) → indigo (4ᵉ famille).
   Teinte DÉRIVÉE sur la surface courante (les 3 autres familles passent déjà par
   des tokens) : sans cela ce badge restait clair en thème sombre. */
.opp-badge-h6_momentum,
.opp-badge-h6_cassure,
.opp-badge-h6_repli,
.opp-badge-h6_convalescent {
  background: color-mix(in srgb, #4338ca 14%, var(--surface));
  color: #4338ca;
  border: 1px solid color-mix(in srgb, #4338ca 32%, var(--surface));
}
/* Indigo éclairci en sombre : #4338ca n'a pas assez de contraste sur la teinte sombre */
:root[data-theme="dark"] .opp-badge-h6_momentum,
:root[data-theme="dark"] .opp-badge-h6_cassure,
:root[data-theme="dark"] .opp-badge-h6_repli,
:root[data-theme="dark"] .opp-badge-h6_convalescent { color: #a5b4fc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opp-badge-h6_momentum,
  :root:not([data-theme="light"]) .opp-badge-h6_cassure,
  :root:not([data-theme="light"]) .opp-badge-h6_repli,
  :root:not([data-theme="light"]) .opp-badge-h6_convalescent { color: #a5b4fc; }
}

.opp-gain { font-weight: 700; color: green; }
.opp-occ  { color: var(--text-3); }

/* Colonnes de stops : le POURCENTAGE porte l'information utile (distance),
   il passe donc en ligne principale ; le niveau en devise vient dessous. */
.opp-stop-pct { color: #b91c1c; font-weight: 600; }
.opp-stop-val { font-size: .78rem; color: var(--text-3); }
.opp-stop-note { color: var(--text-4); }
.opp-esp-pos  { font-weight: 600; color: green; }
.opp-esp-neg  { font-weight: 600; color: #b91c1c; }

/* Infobulle d'en-tête (ex. Espérance) */
.opp-info {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--text-4);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  cursor: help;
}
.opp-info::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: -12px;
  width: 280px;
  background: #0f172a;   /* marine FIXE : var(--navy) devient CLAIR en sombre, texte blanc illisible */
  color: #fff;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr);
  z-index: 50;
}
.opp-info:hover::after,
.opp-info:focus::after { opacity: 1; }

/* Variante pour les icônes situées à gauche de la page : l'infobulle s'ouvre
   vers la droite au lieu de déborder hors écran à gauche */
.opp-info--left::after { left: -12px; right: auto; }

.opp-proba-track {
  display: inline-block;
  vertical-align: middle;
  width: 64px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  margin-right: 8px;
  overflow: hidden;
}
.opp-proba-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--teal, #14b8a6);
}

.opp-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
}

/* ── Page portefeuille simulé - réglages de la stratégie ── */
.pf-settings {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.pf-settings-group { flex: 1; min-width: 260px; }
.pf-settings-aside {
  flex: 0 0 auto;
  min-width: 180px;
  border-left: 1px solid var(--border-lt);
  padding-left: 20px;
}
.pf-settings-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.pf-settings-grid {
  display: grid;
  /* assez large pour le plus long libellé de signal sans troncature */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
}
.pf-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border-lt);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}
/* Le badge rétrécit avec ellipse au lieu de déborder de la vignette */
.pf-setting-item .opp-badge {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-setting-txt { font-size: .85rem; color: var(--text-2); font-weight: 600; }
.pf-setting-item.pf-pattern-off { opacity: .55; }
.pf-setting-item.pf-pattern-off .opp-badge { filter: grayscale(.6); }
.pf-pattern-count {
  width: 52px;
  padding: 4px 4px 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;
}
.pf-bilan-off td { opacity: .5; }

/* Table bilan : en-têtes sur 2 lignes, colonnes resserrées */
.pf-bilan-table th { padding: 9px 10px; line-height: 1.3; }
.pf-bilan-table td { padding: 10px 10px; }

/* Ligne de synthèse "Ensemble des signaux" : pas de badge, mise en avant par
   la typographie (Σ + petites capitales navy) et un double filet de séparation */
.pf-ensemble-label {
  font-weight: 800;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy);
  white-space: nowrap;
}
tr.pf-bilan-total > td {
  border-top: 3px double var(--text-4);
  background: var(--bg);
  font-weight: 600;
}
tr.pf-bilan-total.pf-bilan-open > td { background: var(--blue-50); }

/* Curseur "chargement" pendant les rechargements de page (filtres, calendrier…) */
html.page-loading, html.page-loading * { cursor: progress !important; }

/* Indicateur de chargement du graphique des trades */
.pf-chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 170px;
  font-size: .82rem;
  color: var(--text-3);
}
.pf-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: pf-spin .7s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* Sous-tableau dépliable du bilan par signal */
.pf-bilan-row { cursor: pointer; }
.pf-signal-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pf-chevron {
  display: inline-block;
  color: var(--text-4);
  font-size: .8rem;
  transition: transform var(--tr);
  flex-shrink: 0;
}
.pf-bilan-open .pf-chevron { transform: rotate(90deg); }
.pf-bilan-open td { background: var(--blue-50); }
.pf-bilan-sub > td {
  background: var(--bg);
  padding: 14px 16px;
}
/* Le contenu du sous-panneau ne doit jamais élargir la table parente :
   largeur bornée + défilement interne en dernier recours */
.pf-sub-wrap {
  max-width: min(1080px, calc(100vw - 300px));
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-sm);
  padding: 14px 18px 12px;
}
.pf-sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-lt);
}
.pf-sub-header-txt {
  font-size: .82rem;
  color: var(--text-3);
  flex: 1;
}
.pf-sub-close {
  border: none;
  background: var(--bg);
  color: var(--text-3);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: .75rem;
  cursor: pointer;
  flex-shrink: 0;
}
.pf-sub-close:hover { background: var(--border); color: var(--text); }
.pf-sub-cat {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  margin: 14px 0 8px;
}
.pf-sub-cat:first-child { margin-top: 0; }
.pf-sub-chart { max-width: 100%; margin-bottom: 4px; }
.pf-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.pf-sub-stat {
  background: var(--bg);
  border: 1px solid var(--border-lt);
  border-radius: var(--r-sm);
  padding: 9px 12px;
}
.pf-sub-val { font-size: .98rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.pf-sub-label { font-size: .72rem; color: var(--text-3); margin-top: 2px; }
.pf-sub-table {
  width: auto;
  min-width: 60%;
  border-collapse: collapse;
  font-size: .84rem;
  background: var(--surface);
  border: 1px solid var(--border-lt);
  border-radius: var(--r-sm);
}
.pf-sub-table th {
  text-align: left;
  padding: 7px 14px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.pf-sub-table td { padding: 7px 14px; border-bottom: 1px solid var(--border-lt); }
.pf-sub-table tbody tr:last-child td { border-bottom: none; }
.pf-sub-table .num { text-align: right; white-space: nowrap; }
.pf-sub-foot { font-size: .76rem; color: var(--text-3); margin-top: 10px; }
.pf-sub-foot a { color: var(--blue-dk); }
.pf-esp-input { width: 62px; }

.pf-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.pf-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 14px 18px;
}
.pf-kpi-label { font-size: .78rem; color: var(--text-3); margin-bottom: 4px; }
.pf-kpi-value { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.pf-kpi-sub { display: block; font-size: .72rem; font-weight: 400; color: var(--text-4); }
.pf-pos { color: green; }
.pf-neg { color: #b91c1c; }

.pf-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.pf-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 14px 16px 6px;
}
.pf-chart-title { font-size: .85rem; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }

.pf-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 26px 0 12px;
}

/* Sections dépliables */
.pf-details > summary.pf-section-title {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-details > summary.pf-section-title::-webkit-details-marker { display: none; }
.pf-details > summary.pf-section-title::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid var(--text-3);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform var(--tr);
}
.pf-details[open] > summary.pf-section-title::before {
  transform: rotate(90deg);
}
.pf-details > summary.pf-section-title:hover { color: var(--blue-dk); }

.pf-sortie {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
}
/* Teintes dérivées de la SURFACE (claires en clair, sombres en sombre) : en dur
   ces pastilles restaient des taches claires dans les tableaux en thème sombre. */
.pf-sortie-target  { background: color-mix(in srgb, #15803d 15%, var(--surface)); color: #15803d; }
.pf-sortie-stop    { background: color-mix(in srgb, #dc2626 13%, var(--surface)); color: #b91c1c; }
.pf-sortie-horizon { background: var(--bg); color: var(--text-3); }
.pf-sortie-open    { background: var(--blue-50); color: var(--blue-dk); }
:root[data-theme="dark"] .pf-sortie-target { color: #35c46a; }
:root[data-theme="dark"] .pf-sortie-stop   { color: #f4726f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pf-sortie-target { color: #35c46a; }
  :root:not([data-theme="light"]) .pf-sortie-stop   { color: #f4726f; }
}
/* Colonne « Sens » en TEXTE neutre (sans pastille ni couleur) - pages d'ordres. */
.sens-txt { color: var(--text); font-weight: 600; }

.opp-res-detail { font-size: .8rem; font-weight: 600; white-space: nowrap; margin-top: 2px; }
.opp-res-date   { font-weight: 400; color: var(--text-4); font-size: .74rem; }

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

/* Avertissement sous le titre : usage (repérer des opportunités) + non-conseil */
.sig-avert {
  margin: 8px 0 0;
  font-size: .82rem;
  color: var(--text-3);
  font-style: italic;
}
.sig-avert a { color: var(--blue); text-decoration: none; }
.sig-avert a:hover { text-decoration: underline; }

.sig-famille {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.sig-badge-lg { font-size: 1.25rem; font-weight: 800; padding: 9px 20px; letter-spacing: .01em; }
.sig-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 18px 22px;
  margin-bottom: 16px;
  font-size: .92rem;
  color: var(--text-2);
  line-height: 1.6;
}
.sig-h2 { font-size: .98rem; font-weight: 700; color: var(--text); margin: 0 0 10px; }
/* Titre de SECTION (petit, majuscules, filet bas) - le même dans tous les
   onglets d'une production : Vue d'ensemble, Ordres, Opérations, Portefeuille,
   Réglages. Défini ici (partagé) plutôt qu'en style inline d'un seul gabarit. */
.pg-section { margin: 26px 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .8px;
              text-transform: uppercase; color: var(--text-3);
              border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.pg-section:first-child, .strat-onglet > .pg-section:first-child { margin-top: 14px; }
.sig-conditions { margin: 0; padding-left: 20px; }
.sig-conditions li { margin-bottom: 6px; }
.sig-note { font-size: .8rem; color: var(--text-3); margin: 12px 0 0; }
.sig-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.sig-stat {
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.sig-stat-value { font-size: 1.25rem; font-weight: 700; color: var(--blue-dk); }
.sig-stat-label { font-size: .78rem; color: var(--text-2); margin-top: 2px; }
.sig-stat-base { display: block; color: var(--text-4); font-size: .72rem; }
.sig-card-exit { border-left: 3px solid var(--teal, #14b8a6); }
.sig-exit-steps { margin: 10px 0; padding-left: 22px; }
.sig-exit-steps li { margin-bottom: 10px; }
.sig-others { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 960px) {
  /* Sidebar repliée : la borne desktop (100vw - 300px) serait trop étroite */
  .pf-sub-wrap { max-width: calc(100vw - 60px); }
}

@media (max-width: 700px) {
  .container { padding: 16px 10px 40px; }
  .opp-table { font-size: .82rem; }
  .opp-table th, .opp-table td { padding: 9px 8px; }
  .opp-proba-track { width: 40px; }
}

/* Bouton « Voir les titres à ce profil sur Marchés » (fiche signal) */
.sig-btn-marches {
  display: inline-flex; align-items: center; gap: 6px;
  background: #018ffa; color: #fff; border: 1px solid #018ffa;
  border-radius: 7px; padding: 6px 12px; font-size: .8rem; font-weight: 600;
  text-decoration: none;
}
.sig-btn-marches svg { width: 13px; height: 13px; }
.sig-btn-marches:hover { background: #0173c9; border-color: #0173c9; }

/* Fil d'Ariane des pages Opportunités (remplace le bouton de retour).
   Mêmes réglages que .strat-ariane (static/css/strategies.css) - dupliqué ici
   car cette page ne charge pas strategies.css ; garder les deux cohérents. */
.opp-ariane {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: .74rem; color: var(--text-4); margin: 0 0 8px; opacity: .85;
}
.opp-ariane a { color: var(--text-4); text-decoration: none; }
.opp-ariane a:hover { color: var(--blue); text-decoration: underline; }
.opp-ariane .courant { color: var(--text-3); font-weight: 500; }

/* ── Pop-up de zoom des graphiques (repris de strategies.css, que cette
   page ne charge pas). Utilisée par static/js/strategies_charts.js :
   clic sur une carte = ouverture en grand avec tooltip et zoom par
   sélection ; double-clic = vue complète. Garder les deux cohérents. ── */
.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; }
#chartModal .apexcharts-svg.apexcharts-zoomable.hovering-zoom { cursor: default; }
.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;
}
.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); }

/* Graphiques du portefeuille simulé : le PRINCIPAL (résultat) à gauche sur
   toute la hauteur, les deux graphiques de liquidités empilés à droite. */
.pf-charts-layout {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; margin-bottom: 18px;
  align-items: stretch;
}
.pf-charts-side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; }
.pf-charts-layout .pf-chart-card { min-width: 0; }
@media (max-width: 980px) { .pf-charts-layout { grid-template-columns: 1fr; } }

/* ── Bloc « Méthode » de la page Opportunités ──
   Replié par défaut et découpé en 4 points (détection / objectif / sortie /
   espérance) : le pavé continu précédent était illisible. */
.opp-method > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
}
.opp-method > summary::-webkit-details-marker { display: none; }
.opp-method > summary::before {
  content: '▸'; color: var(--blue-dk); display: inline-block; transition: transform .15s;
}
.opp-method[open] > summary::before { transform: rotate(90deg); }
.opp-method-resume { color: var(--text-3); font-size: .82rem; }
.opp-method-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px 22px; margin: 14px 0 4px;
}
.opp-method-item { min-width: 0; }
.opp-method-lbl {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue-dk); margin-bottom: 3px;
}
.opp-method-pied {
  margin: 10px 0 0; padding-top: 10px; font-size: .82rem; color: var(--text-3);
  border-top: 1px solid var(--blue-100);
}

/* Bouton « Créer une stratégie à partir de ce signal » (fiche d'un signal) :
   couleur de la section « Analyser », vers laquelle il emmène. */
.sig-btn-strat { background: var(--dom-analyser, #0f766e); white-space: nowrap; }
.sig-btn-strat:hover { background: var(--dom-analyser, #0f766e); filter: brightness(1.12); }
:root[data-theme="dark"] .sig-btn-strat { color: #0b1420; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sig-btn-strat { color: #0b1420; }
}

/* ── Pop-up « placer ses ordres » d'une opportunité (2026-09-09) ──────────
   Même gabarit que la pop-up graphiques du site (.tk-modal), classes propres. */
.opp-table tbody tr { cursor: pointer; }
.opp-table tbody tr a { cursor: pointer; }
.opp-modal { position: fixed; inset: 0; z-index: 1000; }
.opp-modal[hidden] { display: none; }
.opp-modal-overlay { position: absolute; inset: 0; background: rgba(10,20,30,.5); }
.opp-modal-box { position: relative; max-width: 820px; width: calc(100% - 32px);
  max-height: calc(100vh - 48px); overflow-y: auto; margin: 24px auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  padding: 18px 20px 22px; }
.opp-modal-head { display: flex; align-items: flex-start; gap: 12px; }
.opp-modal-titre { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.opp-modal-nom { margin: 2px 0 0; color: var(--text-3); font-size: .9rem; }
.opp-modal-head .opp-badge { margin-left: auto; margin-top: 4px; }
.opp-modal-close { border: none; background: none; font-size: 1.7rem; line-height: 1; color: var(--text-3);
  cursor: pointer; padding: 0 4px; }
.opp-modal-close:hover { color: var(--text); }
.opp-modal-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.opp-modal-duree { position: relative; display: inline-flex; gap: 3px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px; }
.opp-modal-duree button { font-family: inherit; font-size: .82rem; font-weight: 600; padding: 6px 13px;
  border: none; background: none; color: var(--text-2); cursor: pointer; border-radius: 999px; position: relative; }
.opp-modal-duree button.actif { color: #fff; }
.opp-modal-dernier { font-size: .82rem; color: var(--text-2); white-space: nowrap; }
.opp-modal-dernier b { color: var(--text); font-variant-numeric: tabular-nums; }
.opp-modal-page { font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; margin-top: 3px;
  padding: 6px 11px; border-radius: 9px; background: var(--teal-dk, #0f766e); color: #fff; }
.opp-modal-page:hover { filter: brightness(1.07); }
.opp-modal-chart { min-height: 320px; }
.opp-modal-chart .apexcharts-tooltip { display: none !important; }   /* tooltip maison */
.opp-loading { padding: 60px 0; text-align: center; color: var(--text-3); font-size: .9rem; }
/* Niveaux : quatre tuiles, liseré de la couleur de la ligne sur le graphique */
.opp-modal-niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.opp-niv { border: 1px solid var(--border); border-left: 4px solid var(--niv-c, var(--blue)); border-radius: 10px;
  padding: 9px 12px; background: var(--surface); min-width: 0; }
.opp-niv-lbl { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.opp-niv-val { display: block; margin-top: 3px; font-size: 1.15rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.opp-niv-sub { display: block; margin-top: 2px; font-size: .72rem; color: var(--text-3); line-height: 1.35; }
.opp-niv-sub b { color: var(--text-2); }
.opp-niv-achat { --niv-c: var(--blue); }
.opp-niv-stop { --niv-c: #b91c1c; }
.opp-niv-objectif { --niv-c: #12a35a; }
.opp-niv-suiveur { --niv-c: #eaa11a; }
/* Marche à suivre */
.opp-modal-marche { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--bg); }
.opp-modal-marche h4 { margin: 0 0 6px; font-size: .84rem; font-weight: 800; color: var(--text); }
.opp-modal-marche ol { margin: 0; padding-left: 20px; font-size: .84rem; color: var(--text-2); line-height: 1.5; }
.opp-modal-marche li { margin: 3px 0; }
.opp-modal-marche b { color: var(--text); font-variant-numeric: tabular-nums; }
/* Tooltip maison des chandeliers (même habillage que la pop-up graphiques) */
.opp-tt { position: fixed; display: none; pointer-events: none; z-index: 1007; min-width: 170px;
  font: 12px/1.5 system-ui, Arial, sans-serif; color: #373d3f; background: #fff; border: 1px solid #e3e3e3;
  border-radius: 5px; box-shadow: 2px 2px 6px -4px rgba(0,0,0,.5); overflow: hidden; }
.opp-tt-title { background: #eceff1; border-bottom: 1px solid #ddd; padding: 6px 10px; font-weight: 600; white-space: nowrap; }
.opp-tt-line { display: flex; justify-content: space-between; gap: 14px; padding: 3px 10px; white-space: nowrap; }
.opp-tt-line:last-child { padding-bottom: 7px; }
.opp-tt-line b { font-variant-numeric: tabular-nums; }

/* Colonne « Détails » : bouton discret qui ouvre la même pop-up que le clic sur la ligne */
.col-detail { width: 1%; white-space: nowrap; text-align: right; }
.ml-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.opp-btn-detail { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: .74rem; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--blue); cursor: pointer; }
.opp-btn-detail:hover { background: var(--blue-50); border-color: var(--blue); }
/* Bloc « trade simulé » de la pop-up : entrée, sortie, stop déclencheur */
.opp-modal-trade { margin-top: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
  font-size: .84rem; color: var(--text-2); line-height: 1.5; }
.opp-modal-trade h4 { margin: 0 0 4px; font-size: .84rem; font-weight: 800; color: var(--text); }
.opp-modal-trade b { color: var(--text); font-variant-numeric: tabular-nums; }
.opp-modal-trade .pf-pos { color: #0f8a4d; } .opp-modal-trade .pf-neg { color: #c0271f; }

/* ── Tableau tenu dans la largeur de la page (2026-09-09) : marges et corps
   réduits, en-têtes et badges de signal autorisés sur deux lignes. Mesuré à
   1440 px : 1 840 px → tient dans les 1 186 px disponibles. ── */
.opp-table { font-size: .82rem; }
.opp-table th { padding: 9px 8px; font-size: .66rem; letter-spacing: .03em; white-space: normal; line-height: 1.25; vertical-align: bottom; }
.opp-table th .th-sub { font-size: .64rem; display: block; }
.opp-table td { padding: 8px 8px; }
.col-rank { width: 28px; }
.opp-table .opp-nom { font-size: .78rem; }
.opp-table .opp-sector { font-size: .7rem; }
.opp-table tbody .opp-badge { white-space: normal; line-height: 1.25; padding: 3px 9px; font-size: .72rem; max-width: 170px; }
.opp-table .opp-stop-val { font-size: .74rem; }
.opp-table .opp-stop-note { display: block; }
.opp-btn-detail { padding: 3px 8px; font-size: .7rem; }
/* `.opp-table .num` (nowrap) l'emportait sur `.opp-table th` : les en-têtes
   numériques (« Stop de protection »…) restaient sur une ligne. */
.opp-table th.num { white-space: normal; }