/*
 * Mise en page du terminal (index.html) : en-tête de marché, rail de survie (#hud), graphique, activité en onglets,
 * ticket d'ordre ; sur téléphone, barre Acheter / Vendre et tiroir d'ordre. Jetons et composants : style.css.
 */

/* ---------- en-tête de marché ---------- */
.page-terminal .top { position: relative; flex-wrap: nowrap; gap: 14px; min-height: 52px; padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); }
.mkt-btn.frozen::before {
  content: ""; display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; margin-right: 7px;
  border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn);
}
.quote { display: grid; gap: 1px; min-width: 0; }
.quote h1 { align-items: baseline; gap: 2px 10px; }
.quote .price {
  font: 600 24px/1.1 var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -0.02em;
  color: var(--text); padding: 1px 6px; margin: 0 -6px; border-radius: 7px;
  transition: color var(--t);
}
.price[data-tone="up"] { color: var(--up); }
.price[data-tone="down"] { color: var(--down); }
.price[data-flash="up-a"] { animation: tick-up-a 700ms var(--ease); }
.price[data-flash="up-b"] { animation: tick-up-b 700ms var(--ease); }
.price[data-flash="down-a"] { animation: tick-down-a 700ms var(--ease); }
.price[data-flash="down-b"] { animation: tick-down-b 700ms var(--ease); }
/* two identical animations per direction: switching between them restarts the glow without forcing a layout */
@keyframes tick-up-a { from { background: color-mix(in srgb, var(--up) 26%, transparent); } to { background: transparent; } }
@keyframes tick-up-b { from { background: color-mix(in srgb, var(--up) 26%, transparent); } to { background: transparent; } }
@keyframes tick-down-a { from { background: color-mix(in srgb, var(--down) 26%, transparent); } to { background: transparent; } }
@keyframes tick-down-b { from { background: color-mix(in srgb, var(--down) 26%, transparent); } to { background: transparent; } }

.live {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--up);
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: live-pulse 2.2s ease-out infinite; }
body[data-conn="connecting"] .live { color: var(--warn); }
body[data-conn="lost"] .live { color: var(--down); }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
.menu-btn {
  display: none; appearance: none; cursor: pointer; place-items: center;
  width: 38px; height: 38px; padding: 0; margin-left: auto;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}

/* ---------- rail de survie : distance aux limites, toujours visible ---------- */
.hud {
  --rail: var(--up);
  position: sticky; top: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  min-height: 42px; padding: 0 16px;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--rail) 45%, transparent), 0 10px 26px -20px var(--rail);
  transition: box-shadow 400ms var(--ease);
}
.hud:has([data-tone="warn"]) { --rail: var(--warn); }
.hud:has([data-tone="down"]) { --rail: var(--down); }
.hud-item {
  --tone: var(--up);
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
  min-height: 42px; padding: 0 18px; border-left: 1px solid var(--line);
}
.hud-item:first-child { padding-left: 0; border-left: 0; }
.hud-item[data-tone="warn"] { --tone: var(--warn); }
.hud-item[data-tone="down"] { --tone: var(--down); }
#hudTarget { --tone: var(--acc); }
.hud-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.hud-val { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-item[data-tone="warn"] .hud-val { color: var(--warn); }
.hud-item[data-tone="down"] .hud-val, .hud-val[data-tone="down"] { color: var(--down); }
.hud-val[data-tone="up"] { color: var(--up); }
.hud-bar { position: relative; flex: 0 0 auto; width: 88px; height: 4px; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-3); }
.hud-bar::after {
  content: ""; position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--fill, 0));
  border-radius: inherit; background: var(--tone); box-shadow: 0 0 10px var(--tone);
  transition: transform 600ms var(--ease);
}
.hud-item[role="button"] { cursor: pointer; }
.hud-detail { flex-basis: 100%; padding: 8px 0 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text); }
@media (hover: hover) {
  .hud-item[role="button"]:hover .hud-label { color: var(--mute); }
}

/* ---------- grille de la maquette hors ligne (la grille du terminal branché est dans pro.css) ---------- */
body:not([data-mode="live"]) .layout {
  max-width: 1920px; margin: 0 auto; padding: var(--gap) 16px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: var(--gap); align-items: start;
}
.rail { display: grid; gap: var(--gap); min-width: 0; align-content: start; scrollbar-width: thin; }
body:not([data-mode="live"]) .rail { position: sticky; top: 54px; max-height: calc(100dvh - 66px); overflow-y: auto; }

/* ---------- graphique ---------- */
.chart-panel { position: relative; padding: 0; overflow: hidden; }
.chart-body { display: flex; min-width: 0; }
.draw-tools {
  flex: 0 0 46px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; background: var(--bg-2); border-right: 1px solid var(--line);
}
#drawToggle { display: none; }
.draw-chip {
  appearance: none; cursor: pointer; display: inline-grid; place-items: center;
  width: 36px; height: 34px; padding: 0; color: var(--dim);
  background: transparent; border: 0; border-radius: var(--r-sm);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.draw-chip svg { display: block; width: 18px; height: 18px; }
.draw-chip[aria-pressed="true"] { color: var(--acc); background: var(--acc-soft); }
#eraseTool { margin-top: 6px; position: relative; }
#eraseTool::before { content: ""; position: absolute; top: -5px; left: 8px; right: 8px; height: 1px; background: var(--line-2); }
@media (hover: hover) {
  .draw-chip:hover { color: var(--text); background: var(--surface-3); }
}
.chart-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.toolbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.group { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.group-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#inds .chip::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: 1px;
  border-radius: 50%; background: var(--chip-swatch, var(--dim)); opacity: 0.55;
}
#inds .chip[aria-pressed="true"]::before { opacity: 1; box-shadow: 0 0 8px var(--chip-swatch, var(--dim)); }
#fullscreenBtn { margin-left: auto; flex: 0 0 auto; background: var(--bg-2); border: 1px solid var(--line); }
.icon-chip { display: inline-grid; place-items: center; width: 32px; padding: 0; }
.icon-chip svg { display: block; }
.icon-chip[aria-pressed="true"] { color: var(--acc); }
.legend {
  display: flex; flex-wrap: wrap; gap: 2px 14px; min-height: 26px; padding: 6px 12px 0;
  font-size: 11.5px; color: var(--dim);
}
.legend b { color: var(--text); font-weight: 550; }
#chart { height: clamp(380px, calc(100dvh - 300px), 760px); width: 100%; touch-action: none; }
#chartPanel.has-rsi #chart { height: clamp(320px, calc(100dvh - 420px), 620px); }
#chart.over-level { cursor: ns-resize; }
#chart.dragging { cursor: grabbing; }
#chart.picking { cursor: crosshair; }
#rsiBox { display: none; border-top: 1px solid var(--line); padding-top: 4px; }
#rsiBox.show { display: block; }
#rsi { height: 120px; width: 100%; }
.chart-area > .tag, .chart-area > .note { padding: 0 12px 8px; margin: 0; }
.chart-area > .tag:empty, .chart-area > .note:empty { display: none; }
#bracketApply { align-self: flex-end; margin: 4px 12px 10px; box-shadow: 0 10px 26px -14px var(--acc); }


/* ---------- activité : positions, ordres, exécutions ---------- */
.dock { padding: 0; overflow: hidden; }
.dock-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.dock-tab {
  position: relative; appearance: none; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 12px 11px;
  font: 600 12.5px var(--font-sans); color: var(--dim); background: none; border: 0;
  transition: color var(--t-fast);
}
.dock-tab[aria-selected="true"] { color: var(--text); }
.dock-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--acc); box-shadow: 0 0 10px var(--acc);
}
.count {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px;
  font-size: 10.5px; font-weight: 650; color: var(--text); background: var(--surface-3); border-radius: var(--r-pill);
}
.dock-tab[aria-selected="true"] .count { color: var(--acc-ink); background: var(--acc); }
@media (hover: hover) {
  .dock-tab:hover { color: var(--text); }
}
.dock-pane { padding: 2px 8px 8px; max-height: 340px; overflow: auto; scrollbar-width: thin; }
.dock-pane .form-msg { padding: 0 4px; }

/* ---------- ticket d'ordre ---------- */
.p-ticket { padding: 14px; }
.p-ticket .eyebrow { display: flex; gap: 6px; align-items: baseline; }
.p-ticket .eyebrow #tkSymbol { color: var(--text); letter-spacing: 0.06em; }
.p-ticket .seg + .seg { margin-top: 8px; }
.sheet-head { display: none; }
.p-ticket .order { margin-top: 16px; }
.p-ticket .order .btn.sell { order: -1; } /* vendre à gauche, acheter à droite : la convention des plateformes */
/* écart entre le prix vendeur et le prix acheteur, posé à la jonction des deux boutons (comme cTrader) */
.order, .tradebar { position: relative; }
.spread-pill {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  min-width: 34px; padding: 2px 6px; text-align: center; pointer-events: none;
  font-size: 10.5px; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-pill);
}
.spread-pill:empty { display: none; }
.p-ticket .form-msg { margin-top: 10px; }
.p-account .gauge:first-of-type { margin-top: 12px; }

/* ---------- téléphone : barre d'ordre, tiroir, menu, notification ---------- */
.tradebar, .sheet-backdrop, .toast { display: none; }

@media (max-width: 1099px) {
  body:not([data-mode="live"]) .layout { grid-template-columns: minmax(0, 1fr); }
  body:not([data-mode="live"]) .rail { display: contents; }
}

@media (max-width: 759px) {
  .page-terminal .top {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    grid-template-areas: "brand markets menu" "quote quote quote";
    gap: 8px 10px; min-height: 0; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); position: relative;
  }
  .page-terminal .top > .brand { grid-area: brand; }
  .page-terminal .quote { grid-area: quote; }
  .page-terminal .menu-btn { grid-area: menu; display: inline-grid; }
  .page-terminal .mock-tag { grid-column: 1 / -1; justify-self: start; }
  .page-terminal .userbar {
    position: absolute; right: 12px; top: 56px; z-index: 90; display: none;
    flex-direction: column; align-items: stretch; gap: 8px; min-width: 210px; padding: 10px;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  }
  .page-terminal .userbar.open { display: flex; }
  .page-terminal .userbar .lang { align-self: flex-start; }
  .quote .price { font-size: 22px; }

  .hud { flex-wrap: nowrap; min-height: 38px; padding: 0 12px; }
  .hud-item { flex: 1 1 0; min-height: 38px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; padding: 0 10px; }
  .hud-item:first-child { flex: 1.6 1 0; }
  .hud-label { display: none; }
  .hud-val { font-size: 11.5px; max-width: 100%; }
  .hud-bar { width: 100%; height: 3px; }
  .hud-detail { display: none; }
  .hud:has(.hud-detail:not([hidden])) { flex-wrap: wrap; }
  .hud:has(.hud-detail:not([hidden])) .hud-detail { display: block; }

  .layout { padding: 8px 8px 0; gap: 8px; }
  .chart-panel { border-radius: var(--r); }
  .chart-body { position: relative; }
  .draw-tools {
    position: absolute; left: 8px; top: 84px; z-index: 6; flex: none;
    padding: 4px; gap: 2px; border: 1px solid var(--line-2); border-radius: var(--r);
    background: color-mix(in srgb, var(--surface-2) 92%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  #drawToggle { display: inline-grid; }
  .draw-tools:not(.open) .draw-chip:not(#drawToggle) { display: none; }
  .draw-tools:not(.open) { padding: 2px; }
  .toolbar {
    padding: 8px; gap: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
  .legend { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 10.5px; gap: 10px; padding: 6px 8px 0; }
  .legend #lgT { display: none; }
  #chart { height: clamp(300px, 50dvh, 460px); }
  #chartPanel.has-rsi #chart { height: clamp(250px, 40dvh, 380px); }
  #rsi { height: 96px; }
  .dock-pane { max-height: none; }

  /* ticket en tiroir : fermé hors écran, ouvert par la barre Acheter / Vendre */
  .p-ticket {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; margin: 0;
    max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0; border: 1px solid var(--line-2); border-bottom: 0;
    background: var(--surface); box-shadow: 0 -30px 70px -24px rgb(0 0 0 / 0.85);
    transform: translateY(104%); visibility: hidden;
    transition: transform 320ms var(--ease), visibility 0s linear 320ms;
  }
  body.sheet-open .p-ticket { transform: none; visibility: visible; transition: transform 320ms var(--ease); }
  .sheet-head { display: flex; justify-content: center; align-items: center; position: sticky; top: 0; z-index: 2; height: 34px; margin: 0 -16px 4px; background: var(--surface); }
  .sheet-grip { width: 38px; height: 4px; border-radius: var(--r-pill); background: var(--line-strong); }
  #sheetClose { position: absolute; right: 8px; top: 2px; }
  .p-ticket[data-side="buy"] .order .btn.buy:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 0 2px var(--up); }
  .p-ticket[data-side="sell"] .order .btn.sell:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 0 2px var(--down); }
  .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 120;
    background: rgb(2 4 8 / 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .tradebar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--line);
  }
  .tradebar .btn { min-height: 52px; }
  #bracketApply {
    position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 115;
    margin: 0; align-self: auto; min-height: 46px;
  }
  .toast {
    display: block; position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 116;
    padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--text);
    background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r);
    box-shadow: var(--shadow-pop); pointer-events: none;
    opacity: 0; transform: translateY(8px); transition: opacity var(--t), transform var(--t) var(--ease);
  }
  .toast[data-tone="down"] { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
  .toast.show { opacity: 1; transform: none; }
  .foot { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}