/* ─── Fluid window layout system ──────────────────────────────────── */

/* Coquille verticale : en-tête + (bannière) + barre d'onglets empilés, puis
   le bureau qui prend TOUT le reste. Remplace l'ancien calc(100dvh - 164px)
   du bureau, un décalage fixe calé sur un en-tête à 80px + la bannière Premium,
   qui laissait ~26-68px de vide noir en bas (variable selon la présence de la
   bannière). En flex, plus de nombre magique : le bureau colle au bas quelle
   que soit la config. Le mobile neutralise ce clamp (voir 80-mobile.css). */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
/* Le chrome empilé garde sa hauteur exacte : seul le bureau flexe. Sans ça, la
   colonne flex comprime en-tête/onglets/bannière (flex-shrink:1 par défaut),
   les rabotant de ~10px. */
.app-shell > .app-header,
.app-shell > .page-tab-bar,
.app-shell > .premium-banner,
.app-shell > .past-due-banner { flex: 0 0 auto; }

.desktop-container {
  position: relative;
  width: 100%;
  flex: 1 1 auto;   /* remplit l'espace restant sous l'en-tête/onglets */
  min-height: 0;    /* autorise le rétrécissement dans le conteneur flex */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow-y: auto;
  overflow-x: hidden;
}

#desktop {
  position: relative;
  /* isolation:isolate makes #desktop its own stacking context, so the
     per-window inline z-index churn (windows.js bumps each window on focus,
     climbing unbounded from 10) stays trapped inside the window layer and
     can't leak into the root context to paint over header chrome like the
     layout dropdown. Pairs with .app-header z-index:50. */
  isolation: isolate;
  width: 100%;
  min-height: 100%;
}

#panels-sink { display: none; }

.window {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  min-width: 140px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: border-color 250ms, box-shadow 250ms;
  overflow: hidden;
}
.window.focused { border-color: var(--accent); box-shadow: 0 6px 16px rgba(245, 166, 35, 0.18); }
.window.snapping { border-color: var(--accent); border-style: dashed; box-shadow: 0 6px 16px rgba(245, 166, 35, 0.18); }
.window-slot { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.window-drag-handle { cursor: move; user-select: none; }
.window-slot > .panel-box {
  border: none !important;
  border-radius: 0 !important;
  height: 100%;
  flex: 1;
}

.rh { position: absolute; z-index: 10; }
.rh-n  { top: -3px; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.rh-s  { bottom: -3px; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.rh-e  { top: 6px; bottom: 6px; right: -3px; width: 6px; cursor: ew-resize; }
.rh-w  { top: 6px; bottom: 6px; left: -3px; width: 6px; cursor: ew-resize; }
.rh-ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
.rh-nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.rh-se { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.rh-sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: nesw-resize; }

.guide-line { position: absolute; background: #F5A623; pointer-events: none; z-index: 9999; }

/* ─── Window context menu (right-click on header) ───────────────── */
.window-ctx-menu {
  position: fixed;
  z-index: 10000;
  background: #0e1319;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 0;
  min-width: 160px;
  font-size: 12px;
  font-family: var(--font);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.window-ctx-menu .ctx-label {
  padding: 4px 12px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.window-ctx-menu .ctx-item {
  padding: 5px 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.window-ctx-menu .ctx-item:hover { background: var(--accent); color: #000; }
.window-ctx-menu .ctx-item.disabled { color: var(--muted); cursor: default; }
.window-ctx-menu .ctx-item.disabled:hover { background: transparent; color: var(--muted); }
.window-ctx-menu .ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ─── Page tabs bar ───────────────────────────────────────────────── */
.page-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 var(--s-4);
  height: 36px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  width: 100%;
  overflow-x: auto;
  font-family: var(--font-sans);
}
/* Onglets « dossier » : surface remontée, liseré ambre en haut, casse normale */
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tab .tab-name {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.tab.active {
  color: var(--text);
  background: var(--elevated);
  border-color: var(--border);
  border-top: 2px solid var(--accent);
}
.tab .tab-name[contenteditable="true"] { outline: 1px dashed var(--accent); padding: 0 2px; }
.tab-close {
  width: 13px; height: 13px; border-radius: 3px;
  color: var(--muted); opacity: 0;
  transition: opacity 100ms, color 100ms;
}
.tab:hover .tab-close,
.tab.active .tab-close { opacity: 0.6; }
.tab-close:hover { opacity: 1; color: var(--negative); }
.tab-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 0 0 1px 6px; border-radius: 6px;
  color: var(--dim); cursor: pointer; flex: 0 0 auto;
  transition: color 0.15s, background 0.15s;
}
.tab-add:hover { color: var(--accent); background: var(--accent-soft); }
.tab[draggable="true"] { cursor: grab; }
.tab.dragging { opacity: 0.4; }
.tab.drag-over-left::before,
.tab.drag-over-right::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 6px 0 rgba(245, 166, 35, 0.6);
}
.tab.drag-over-left::before { left: -2px; }
.tab.drag-over-right::before { right: -2px; }

/* ─── Layout menu button + popover ─────────────────────────────── */
.layout-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn-mini);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.layout-menu-btn:hover {
  border-color: var(--border-strong);
  background: var(--accent-soft);
}
.layout-menu-btn .caret {
  color: var(--dim);
  font-size: 9px;
  margin-left: 2px;
}
.layout-menu-btn .caret.svic { width: 13px; height: 13px; }
.layout-menu-btn .dirty-dot {
  display: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.22);
}
.layout-menu-btn.dirty .dirty-dot { display: inline-block; }
.layout-menu-btn.dirty { border-color: var(--accent); background: var(--accent-soft); }

.layout-menu-popover {
  position: absolute; z-index: 10000;
  background: var(--header); border: 1px solid var(--border); border-radius: 2px;
  min-width: 280px; padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  font-family: var(--font-sans); font-size: 12px;
  color: var(--text);
}
.layout-menu-popover[hidden] { display: none; }
.layout-menu-popover .lm-title {
  font-size: 10px; color: var(--muted); letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 12px 4px;
}
.layout-menu-popover .lm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer;
}
.layout-menu-popover .lm-row:hover { background: var(--hover); }
.layout-menu-popover .lm-row.active { color: var(--accent); }
.layout-menu-popover .lm-row .lm-check { width: 10px; color: var(--accent); }
.layout-menu-popover .lm-row .lm-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-menu-popover .lm-row .lm-row-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.layout-menu-popover .lm-row .lm-del {
  opacity: 0; color: var(--muted); font-size: 12px; transition: opacity 100ms;
}
.layout-menu-popover .lm-row:hover .lm-del { opacity: 1; }
.layout-menu-popover .lm-row .lm-del:hover { color: #ef4444; }
.layout-menu-popover .lm-sep {
  height: 1px; background: var(--border); margin: 4px 0;
}
.layout-menu-popover .lm-action {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; color: var(--accent); cursor: pointer;
}
.layout-menu-popover .lm-action:hover { background: var(--hover); }
.layout-menu-popover .lm-action.disabled {
  color: var(--border); cursor: not-allowed;
}
.layout-menu-popover .lm-action.disabled:hover { background: transparent; }

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE (public /) — D1 Solaire épuré
   ═══════════════════════════════════════════════════════════════ */

.landing-scene {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: #0a0a0a;
  color: #eee;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Inter, Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

/* ── Background visuals ── */
.landing-sun {
  position: absolute; left: 50%; bottom: -55%;
  transform: translateX(-50%);
  width: 160vmax; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%,
    rgba(245,166,35,0.45) 0%,
    rgba(245,166,35,0.18) 20%,
    rgba(245,166,35,0.04) 42%,
    transparent 62%);
  pointer-events: none; z-index: 1;
}
.landing-sun-core {
  position: absolute; left: 50%; bottom: -8%;
  transform: translateX(-50%);
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle,
    #F5A623 0%, #b67812 45%, transparent 75%);
  filter: blur(1px);
  pointer-events: none; z-index: 1;
}
.landing-horizon {
  position: absolute; bottom: 14%; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(245,166,35,0.40), transparent);
  pointer-events: none; z-index: 1;
}

/* ── Header ── */
.landing-top {
  position: relative; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 36px;
}
.landing-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; color: #fff;
  letter-spacing: 0.5px;
}
.landing-logo .landing-mark {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #888;
  display: grid; place-items: center;
  position: relative;
}
.landing-logo .landing-mark::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
}
.landing-logo-text { display: inline-flex; }
.landing-logo-bold  { color: #fff; font-weight: 700; }
.landing-logo-light { color: #777; font-weight: 400; }

.landing-login {
  font-size: 11px; letter-spacing: 2.5px; color: #bbb;
  text-decoration: none !important; cursor: pointer;
  transition: color 0.15s;
}
.landing-login:hover { color: #F5A623; }

/* ── Hero ── */
.landing-hero {
  position: relative; z-index: 5;
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 0 60px;
}
.landing-eyebrow {
  font-size: 11px; letter-spacing: 3px; color: #F5A623;
  text-transform: uppercase; font-weight: 500;
  margin-bottom: 24px;
}
.landing-title {
  font-size: 52px; font-weight: 700; color: #fff;
  letter-spacing: -0.025em; line-height: 1.02;
  max-width: 820px;
  margin: 0 0 20px;
}
.landing-title-em {
  font-style: normal;   /* override default <em> italics */
  color: #F5A623;
}
.landing-sub {
  font-size: 15px; color: #999;
  max-width: 540px; line-height: 1.55;
  margin: 0 0 36px;
}

/* ── CTAs ── */
.landing-cta { display: flex; gap: 14px; align-items: center; }
.landing-btn-primary {
  font-size: 12px; letter-spacing: 2px; font-weight: 700;
  background: #F5A623; color: #000;
  padding: 14px 26px; border-radius: var(--r-btn);
  text-decoration: none !important; cursor: pointer;
  transition: filter 0.15s;
}
.landing-btn-primary:hover { filter: brightness(1.08); color: #000; }
.landing-btn-ghost {
  font-size: 12px; letter-spacing: 2px; color: #ccc;
  padding: 14px 26px; border: 1px solid #333; border-radius: var(--r-btn);
  text-decoration: none !important; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.landing-btn-ghost:hover { border-color: #F5A623; color: #F5A623; }

/* ── Data chips ── */
.landing-chip {
  position: absolute; z-index: 2;
  padding: 10px 14px;
  background: rgba(12, 12, 12, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 2px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 11px; letter-spacing: 1px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
}
.landing-chip-k {
  display: block;
  color: #888; font-size: 9px; letter-spacing: 2px;
  margin-bottom: 3px;
}
.landing-chip-v {
  color: #eee; font-weight: 600; font-size: 12px;
}
.landing-up { color: #00C805; }
.landing-dn { color: #FF3737; }

/* Chip positions: top / mid / bottom × left / right */
.landing-c1 { top:  22%; left:  5%; }   /* SPX      */
.landing-c2 { top:  17%; right: 6%; }   /* US 10Y   */
.landing-c3 { top:  48%; left:  3%; }   /* EUR/USD  */
.landing-c4 { top:  50%; right: 3%; }   /* BTC/USD  */
.landing-c5 { bottom: 28%; left:  6%; } /* BRENT    */
.landing-c6 { bottom: 31%; right: 5%; } /* GOLD/USD */

/* ── Smaller screens (narrow laptops / tablets landscape) ── */
@media (max-width: 900px) {
  .landing-title   { font-size: 36px; }
  .landing-sub     { font-size: 13px; }
  .landing-chip    { padding: 8px 10px; font-size: 10px; }
  .landing-chip-v  { font-size: 11px; }
  .landing-c1 { top: 14%; left: 3%; }
  .landing-c2 { top: 10%; right: 3%; }
  .landing-c3 { top: 50%; left: 2%; }
  .landing-c4 { top: 52%; right: 2%; }
  .landing-c5 { bottom: 22%; left: 3%; }
  .landing-c6 { bottom: 24%; right: 3%; }
  .landing-hero { padding: 0 24px; }
}