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

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

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

.opp-header {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.opp-btn-portfolio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--tr);
}
.opp-btn-portfolio:hover { background: 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;
}
.opp-badge-pullback { background: var(--blue-50); color: var(--blue-dk); border: 1px solid var(--blue-100); }
.opp-badge-golden   { background: #fdf4e3; color: #a16207; border: 1px solid #fde9c3; }
.opp-badge-breakout { background: #eef7ee; color: #15803d; border: 1px solid #d3ecd6; }
.opp-badge-capitulation   { background: #fdeeee; color: #b91c1c; border: 1px solid #fbd9d9; }
.opp-badge-rebond_v       { background: #f3eefb; color: #6d28d9; border: 1px solid #e6dbf7; }
.opp-badge-choc_momentum  { background: #eef6fb; color: #0e7490; border: 1px solid #d8ecf5; }
.opp-badge-capitulation_v { background: var(--navy); color: var(--gold); border: 1px solid var(--navy); }
.opp-badge-rebond_confirme { background: #eef7ee; color: #15803d; border: 1px solid #d3ecd6; }

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

.opp-stop-pct { font-size: .78rem; color: #b91c1c; }
.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: 15px;
  text-align: center;
  cursor: help;
  vertical-align: middle;
}
.opp-info::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: -12px;
  width: 280px;
  background: var(--navy);
  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(--gold);
}

.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;
}
.pf-sortie-target  { background: #eef7ee; color: #15803d; }
.pf-sortie-stop    { background: #fdeeee; color: #b91c1c; }
.pf-sortie-horizon { background: var(--bg); color: var(--text-3); }
.pf-sortie-open    { background: var(--blue-50); color: var(--blue-dk); }

.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 ── */
.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.02rem; padding: 7px 16px; }
.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; }
.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(--gold); }
.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; }
}