/* =========================================================
   Trading Evolution — COT data (cot.js). Bandeau sombre dans les deux thèmes (illustration des positions), le reste
   suit les jetons du site (sombre par défaut, clair via html:not([data-theme="dark"])).
   Couleurs : grands spéculateurs = bleu, commerciaux = ambre, petits porteurs = violet ; hausse = vert, baisse = rouge.
   ========================================================= */
.cot .is-up { color: var(--pos); } .cot .is-down { color: var(--neg); }

/* ---------- Bandeau ---------- */
.cot-hero {
  position: relative; isolation: isolate; overflow: hidden; margin-bottom: var(--s-12);
  border-radius: var(--r-xl); border: 1px solid rgba(96, 165, 250, .18);
  background: radial-gradient(120% 100% at 72% 40%, #0d1b3f 0%, #060a18 58%, #04060f 100%);
  box-shadow: 0 30px 80px -30px rgba(2, 8, 30, .7);
  color-scheme: dark; --ink: #eef2fa; --ink-2: #b9c3d9; --muted: #8a95ae; --line: rgba(255, 255, 255, .09); --pos: #22c55e; --neg: #f87171;
}
.cot-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.cot-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 7, 18, .86) 0%, rgba(4, 7, 18, .55) 42%, rgba(4, 7, 18, .2) 75%, rgba(4, 7, 18, .45) 100%), linear-gradient(0deg, rgba(4, 7, 18, .7), transparent 38%); }
[dir="rtl"] .cot-hero::after { background: linear-gradient(270deg, rgba(4, 7, 18, .86) 0%, rgba(4, 7, 18, .55) 42%, rgba(4, 7, 18, .2) 75%, rgba(4, 7, 18, .45) 100%), linear-gradient(0deg, rgba(4, 7, 18, .7), transparent 38%); }
.cot-hero-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--s-10); align-items: center; padding: clamp(1.5rem, .8rem + 3.4vw, 3.75rem); min-height: 470px; }
.cot-hero h1 { font-family: var(--f-disp); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; color: #fff; margin-bottom: var(--s-5); text-wrap: balance; text-shadow: 0 2px 18px rgba(4, 7, 18, .85); }
.cot-hero .lead { color: var(--ink-2); margin-bottom: 0; max-width: 37rem; text-shadow: 0 2px 18px rgba(4, 7, 18, .85); }
.cot-hero .eyebrow { color: #cfe0ff; background: rgba(59, 130, 246, .12); border-color: rgba(96, 165, 250, .3); box-shadow: none; }
.cot-hero .eyebrow .dot { background: #22c55e; }
.cot-card {
  background: rgba(8, 13, 28, .7); border: 1px solid rgba(96, 165, 250, .24); border-radius: var(--r-xl); padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.cot-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0 0 var(--s-4); }
.cot-facts div { padding: .65rem .75rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); min-width: 0; }
.cot-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cot-facts dd { margin: .3rem 0 0; font-family: var(--f-mono); font-size: .86rem; font-weight: 700; color: #fff; line-height: 1.3; }
.cot-card-label { margin: 0 0 var(--s-3); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8fb4ff; }
.cot-clock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cot-clock span { display: grid; gap: .2rem; text-align: center; padding: .75rem .25rem .6rem; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .08); }
.cot-clock b { font-family: var(--f-mono); font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.3rem); font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.cot-clock small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cot.is-due .cot-clock b { color: #fbbf24; }
.cot-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--muted); }
.cot-live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4ade80; }
.cot-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: cot-ping 2s infinite; }
@keyframes cot-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* ---------- Tableau de bord ---------- */
.cot #dashboard, .cot .cot-wide-sec { max-width: none; }
.cot-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin: var(--s-5) 0 var(--s-4); }
.cot-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cot-chip { padding: .45rem .85rem; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: 600 var(--t-sm) var(--f-body); cursor: pointer; transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.cot-chip:hover { border-color: var(--blue-200); color: var(--ink); }
.cot-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.cot-search { min-width: 220px; padding: .55rem .9rem; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface-3); color: var(--ink); font: 500 var(--t-sm) var(--f-body); }
.cot-search:focus, .cot-chip:focus-visible, .cot-sort:focus-visible, .cot-bar:focus-visible, .cot-table tr:focus-visible, .cot-pick select:focus { outline: 2px solid var(--blue-200); outline-offset: 2px; }
.cot-table-wrap { max-height: 72vh; }
.cot-table { font-size: 13px; font-variant-numeric: tabular-nums; }
.cot-table thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); text-align: end; padding: .5rem .55rem; }
.cot-table thead tr:nth-child(2) th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.cot-table thead .cot-groups th { top: 0; text-align: center; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.cot-table thead tr:nth-child(2) th { top: 33px; }
.cot-table thead .cot-groups th:first-child { text-align: start; vertical-align: bottom; }
.cot-g-spec { box-shadow: inset 0 -2px 0 var(--cv-a); } .cot-g-comm { box-shadow: inset 0 -2px 0 var(--amber); } .cot-g-small { box-shadow: inset 0 -2px 0 var(--cv-c); }
.cot-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: pointer; }
.cot-sort::after { content: '↕'; margin-inline-start: .3rem; opacity: .35; }
th[aria-sort="ascending"] .cot-sort::after { content: '↑'; opacity: 1; color: var(--blue-300); }
th[aria-sort="descending"] .cot-sort::after { content: '↓'; opacity: 1; color: var(--blue-300); }
.cot-table td { text-align: end; white-space: nowrap; vertical-align: middle; font-family: var(--f-mono); color: var(--ink-2); padding: .5rem .55rem; }
.cot-table tbody th { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--panel); min-width: 11.5rem; padding: .5rem .55rem; }
.cot-table tbody tr { cursor: pointer; transition: background-color var(--d-fast) var(--ease); }
.cot-table tbody tr:hover > *, .cot-table tbody tr.is-sel > * { background: rgba(59, 130, 246, .08); }
.cot-table tbody tr.is-sel th { box-shadow: inset 3px 0 0 var(--blue); }
.cot-sym { display: inline-block; min-width: 2.6rem; margin-inline-end: .45rem; text-align: start; font-family: var(--f-mono); font-weight: 800; color: var(--blue-300); }
.cot-name { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.cot-table td b { display: block; font-weight: 700; color: var(--ink); }
.cot-table td b.is-up { color: var(--pos); } .cot-table td b.is-down { color: var(--neg); }
.cot-table td small { display: block; margin-top: .15rem; font-size: 10px; color: var(--muted); }
.cot-ext { display: inline-block; margin-inline-start: .4rem; padding: .05rem .4rem; border-radius: var(--r-full); font-family: var(--f-body); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.cot-ext.is-hi { background: rgba(34, 197, 94, .14); color: var(--pos); border: 1px solid rgba(34, 197, 94, .35); }
.cot-ext.is-lo { background: rgba(248, 113, 113, .14); color: var(--neg); border: 1px solid rgba(248, 113, 113, .35); }
.cot-idx { display: inline-flex; align-items: center; gap: .4rem; min-width: 6.2rem; justify-content: flex-end; }
.cot-idx i { position: relative; flex: 1 1 auto; max-width: 56px; height: 6px; border-radius: 3px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; direction: ltr; }
.cot-idx s { position: absolute; inset-block: 0; left: 0; border-radius: 3px; background: var(--cv-a); text-decoration: none; }
.cot-idx.is-hi s { background: var(--pos); } .cot-idx.is-lo s { background: var(--neg); }
.cot-idx b { min-width: 2.6rem; text-align: end; color: var(--ink) !important; }
.cot-status { margin-top: var(--s-3); color: var(--muted) !important; font-size: var(--t-sm); }
.cot.is-error .cot-status { color: var(--amber) !important; }
.cot:not(.is-ready) #cot-rows td { background: linear-gradient(100deg, transparent 20%, rgba(96, 165, 250, .06) 50%, transparent 80%) 0 0 / 200% 100%; animation: cot-shimmer 1.6s linear infinite; }
@keyframes cot-shimmer { to { background-position: -200% 0; } }

/* ---------- Plus fortes variations ---------- */
.cot-movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.cot-fig { margin: 0; padding: var(--s-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.cot-fig figcaption { margin-bottom: var(--s-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cot-bars { display: grid; gap: .35rem; }
.cot-bar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: .7rem; align-items: center; width: 100%; padding: .45rem .5rem; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); font: inherit; text-align: start; cursor: pointer; }
.cot-bar:hover { background: var(--surface-3); }
.cot-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); }
.cot-bar-l b { font-family: var(--f-mono); color: var(--ink); }
.cot-bar-t { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.cot-bar-t i { display: block; height: 100%; border-radius: 4px; }
.cot-bar-t i.is-up { background: var(--pos); } .cot-bar-t i.is-down { background: var(--neg); }
.cot-bar-v { font-family: var(--f-mono); font-weight: 700; text-align: end; min-width: 5.5rem; }
.cot-bar-v small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }

/* ---------- Détail d'un marché ---------- */
.cot-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: var(--s-4) 0; }
.cot-pick label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cot-pick select { min-width: 260px; padding: .6rem .9rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-3); color: var(--ink); font: 600 var(--t-sm) var(--f-body); }
.cot-pick select option, .cot-pick select optgroup { background: var(--pop); color: var(--ink); }
.cot-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.cot-kpi-h { grid-column: 1 / -1; margin: 0 !important; color: var(--ink) !important; font-weight: 700; }
.cot-kpi-h b { font-family: var(--f-mono); color: var(--blue-300); }
.cot-kpi { display: grid; gap: .25rem; align-content: start; padding: var(--s-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.cot-kpi small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cot-kpi > b { font-family: var(--f-mono); font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); color: var(--ink); line-height: 1.15; }
.cot-kpi > span { font-size: var(--t-xs); color: var(--muted); font-family: var(--f-mono); }
.cot-kpi .cot-idx { justify-content: flex-start; min-width: 0; }
.cot-kpi .cot-idx i { max-width: none; }
.cot-kpi .cot-idx b { display: none; }
.cot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.cot-span { grid-column: 1 / -1; }
.cot-chart { position: relative; direction: ltr; }
.cot-chart svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.cot-chart .fg { stroke: var(--cv-grid); }
.cot-chart .f0 { stroke: var(--cv-axis); stroke-opacity: .55; stroke-dasharray: 3 4; }
.cot-chart .fa { fill: var(--cv-axis); font: 10.5px var(--f-mono); }
.cot-chart .fln { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cot-chart .farea { fill-opacity: .14; stroke: none; }
.cot-chart .fend { stroke: var(--cv-bg); stroke-width: 1.5; }
.cot-chart .fband { fill-opacity: .1; } .cot-chart .fband.is-hi { fill: var(--pos); } .cot-chart .fband.is-lo { fill: var(--neg); }
.cot-chart .fbar.is-up { fill: var(--pos); } .cot-chart .fbar.is-down { fill: var(--neg); }
.cot-chart .fx { stroke: var(--ink-2); stroke-opacity: .5; stroke-dasharray: 3 3; pointer-events: none; }
.cot-tip { position: absolute; top: 8px; z-index: 3; display: grid; gap: .2rem; min-width: 150px; padding: .55rem .7rem; border-radius: var(--r-md); background: var(--pop); border: 1px solid var(--line); box-shadow: var(--sh-md); font-size: 12px; color: var(--ink-2); pointer-events: none; }
.cot-tip b { color: var(--ink); font-size: 11.5px; }
.cot-tip span { display: flex; align-items: center; gap: .4rem; }
.cot-tip i { width: 9px; height: 3px; border-radius: 2px; flex: none; }
.cot-tip em { margin-inline-start: auto; font-style: normal; font-family: var(--f-mono); font-weight: 700; color: var(--ink); }
.cot-tip em.is-up { color: var(--pos); } .cot-tip em.is-down { color: var(--neg); }
.cot-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: var(--s-2) 0 0 !important; font-size: var(--t-sm); color: var(--ink-2) !important; }
.cot-legend span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.cot-legend i { width: 14px; height: 3px; border-radius: 2px; }
.cot-breakdown { display: grid; gap: .55rem; }
.cot-bd-head { display: grid; grid-template-columns: 1fr 1fr; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); direction: ltr; }
.cot-bd-head span:first-child { text-align: right; padding-right: .5rem; } .cot-bd-head span:last-child { padding-left: .5rem; }
.cot-bd p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .8rem; margin: 0 0 .25rem !important; font-size: 12.5px; color: var(--ink-2) !important; }
.cot-bd p b { color: var(--ink); }
.cot-bd p span { font-family: var(--f-mono); font-size: 11.5px; }
.cot-bd p em { font-style: normal; font-weight: 700; }
.cot-bd.is-smart p b::after { content: '★'; margin-inline-start: .35rem; color: var(--amber); }
.cot-bd-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; direction: ltr; }
.cot-bd-bars span { position: relative; height: 18px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.cot-bd-bars i { position: absolute; inset-block: 0; border-radius: 3px; }
.cot-bd-bars .s i { right: 0; background: linear-gradient(270deg, var(--amber), rgba(245, 158, 11, .45)); }
.cot-bd-bars .l i { left: 0; background: linear-gradient(90deg, var(--cv-a), rgba(59, 130, 246, .45)); }
.cot-bd-bars small { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.cot-bd-bars .s small { left: 6px; } .cot-bd-bars .l small { right: 6px; }

/* ---------- Thème clair ---------- */
html:not([data-theme="dark"]) .cot-chip, html:not([data-theme="dark"]) .cot-fig, html:not([data-theme="dark"]) .cot-kpi { background: #fff; box-shadow: var(--sh-sm); }
html:not([data-theme="dark"]) .cot-chip[aria-pressed="true"] { background: var(--blue); }
html:not([data-theme="dark"]) .cot-search, html:not([data-theme="dark"]) .cot-pick select { background: #fff; border-color: rgba(10, 22, 40, .14); }
html:not([data-theme="dark"]) .cot-table thead th, html:not([data-theme="dark"]) .cot-table tbody th { background: #fff; }
html:not([data-theme="dark"]) .cot-table thead tr:nth-child(2) th { background: var(--surface-2); }
html:not([data-theme="dark"]) .cot-bd-bars small { color: #0a1628; text-shadow: 0 1px 2px rgba(255, 255, 255, .7); }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 960px) {
  .cot-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); min-height: 0; }
  .cot-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-grid, .cot-movers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cot-hero { margin-inline: calc(var(--s-4) * -1 + 4px); border-radius: var(--r-lg); }
  .cot-hero-in { padding: var(--s-5) var(--s-4); }
  .cot-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cot-facts div:last-child { grid-column: 1 / -1; }
  .cot-clock b { font-size: 1.6rem; }
  .cot-search { min-width: 0; width: 100%; }
  .cot-table tbody th { min-width: 9.5rem; }
  .cot-name { display: block; font-size: 11px; white-space: normal; }
  .cot-kpis { gap: var(--s-2); }
  .cot-kpi { padding: var(--s-3); }
  .cot-pick select { min-width: 0; width: 100%; }
  .cot-fig { padding: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .cot-live i, .cot:not(.is-ready) #cot-rows td { animation: none; }
  .cot-table tbody tr, .cot-chip { transition: none; }
}