/* Pop-up graphiques d'un ticker (templates/_ticker_modal.html +
   static/js/liste_ticker_modal.js) : cours ajusté, recul, volume MM5, sélecteur
   de durée. Partagée par /liste, /marches, /favoris et les pages de production
   (extraite de liste_analyse.css le 2026-09-02). Requiert les tokens de base.css. */
.tk-modal { position: fixed; inset: 0; z-index: 1000; }
.tk-modal[hidden] { display: none; }
.tk-modal-overlay { position: absolute; inset: 0; background: rgba(10,20,30,.5); }
.tk-modal-box { position: relative; max-width: 780px; 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; }
.tk-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tk-modal-titre { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.tk-modal-nom { margin: 2px 0 0; color: var(--text-3); font-size: .9rem; }
.tk-modal-close { border: none; background: none; font-size: 1.7rem; line-height: 1; color: var(--text-3);
  cursor: pointer; padding: 0 4px; }
.tk-modal-close:hover { color: var(--text); }
/* Bandeau « titre délisté » (2026-09-07) : même rouge et même message que
   .tkh-bandeau-delisted de la page ticker ; pleine largeur de la boîte
   (compense le padding 20px de .tk-modal-box). */
.tk-modal-delisted { margin: 10px -20px 0; padding: 8px 20px; background: #b91c1c; color: #fff;
  font-size: .85rem; font-weight: 600; letter-spacing: .01em; }
.tk-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 14px 0 4px; }
.tk-duree { display: inline-flex; gap: 3px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px; }
.tk-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; }
.tk-duree button:hover { color: var(--text); }
.tk-duree button.actif { background: var(--blue); color: #fff; }
.tk-duree button:disabled { cursor: default; opacity: .5; }
.tk-duree button:disabled:hover { color: var(--text-2); }
.tk-page-btn { font-family: inherit; font-size: .86rem; font-weight: 600; text-decoration: none;
  padding: 8px 16px; border-radius: 9px; background: var(--teal-dk, #0f766e); color: #fff;
  border: none; cursor: pointer; }
.tk-page-btn:hover { filter: brightness(1.07); }
/* Aperçu avant import (recherche élargie de /marches) : titre pas encore
   importé, devise à préciser dans le tableau avant de pouvoir le faire. */
.tk-page-btn-desactive { background: var(--text-4, #94a3b8); cursor: not-allowed; }
.tk-page-btn-desactive:hover { filter: none; }
.tk-fig { margin: 10px 0 0; }
.tk-fig figcaption { font-size: .78rem; font-weight: 700; color: var(--text-2); margin-bottom: 2px; }
.tk-loading { padding: 42px 0; text-align: center; color: var(--text-3); font-size: .9rem; }

/* Curseur synchronisé dessiné par nous : une ligne verticale + une petite pastille
   de suivi sur chaque courbe, à la même date sur les trois graphiques
   (position: fixed = repère viewport, voir liste_ticker_modal.js). */
.tk-cur-line { position: fixed; width: 0; border-left: 1px dashed var(--text-3);
  transform: translateX(-.5px); pointer-events: none; display: none; z-index: 1005; opacity: .5; }
.tk-cur-dot { position: fixed; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--surface); transform: translate(-50%, -50%); pointer-events: none;
  display: none; z-index: 1006; box-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* Tooltip combiné de la pop-up (une seule fenêtre, les 3 valeurs au même jour).
   COPIE du tooltip des graphiques synchronisés de la page ticker (.tt de
   ticker.css, non chargé ici) : même habillage et même positionnement - il suit
   la souris, 18 px à sa droite et centré verticalement (voir placerTT()).
   D'où `position: fixed` : le placement se fait en coordonnées viewport. */
.tk-tt {
  position: fixed;
  display: none;
  pointer-events: none;
  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;
  min-width: 172px;
  z-index: 1007;
}
.tk-tt .tk-tt-title {
  background: #eceff1;
  border-bottom: 1px solid #ddd;
  padding: 6px 10px;
  font-weight: 600;
  white-space: nowrap;
}
.tk-tt .tk-tt-line {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px; white-space: nowrap;
}
.tk-tt .tk-tt-line:last-child { padding-bottom: 7px; }
.tk-tt .tk-tt-color {
  --couleur: #018FFA;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--couleur); flex: 0 0 auto;
}
.tk-tt .tk-tt-label { font-weight: 400; }
.tk-tt .tk-tt-value { margin-left: auto; font-weight: 600; padding-left: 12px; }

/* La boîte native d'ApexCharts est remplacée par la nôtre (combinedTip renvoie ''). */
#tickerModal .apexcharts-tooltip { display: none !important; }

/* Note globale sur 100 dans l'en-tête de la pop-up (2026-09-07) */
.tk-modal-note { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; text-decoration: none;
  color: var(--text); padding: 4px 8px; border-radius: 10px; }
.tk-modal-note:hover { background: var(--bg); }
.tkm-anneau { position: relative; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: conic-gradient(var(--tkm-c, var(--blue)) calc(var(--pct, 0) * 1%), var(--border) 0); }
.tkm-anneau::before { content: ''; position: absolute; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); }
.tkm-val { position: relative; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tkm-lbl { font-size: .72rem; font-weight: 700; line-height: 1.15; color: var(--text-2); }
.tkm-lbl small { font-weight: 500; color: var(--text-3); }
.tk-modal-note.ok  { --tkm-c: #12a35a; }
.tk-modal-note.moy { --tkm-c: #eaa11a; }
.tk-modal-note.bas { --tkm-c: #d0473d; }