/* ==========================================================================
   AIRH — Rentabilité · HUD plein écran (esthétique Cockpit)
   ========================================================================== */

#rt-hud {
  --bg: #EDF2F5;
  --bg-deep: #E2EAEF;
  --glass: rgba(255,255,255,.74);
  --glass-strong: rgba(255,255,255,.9);
  --line: rgba(22,60,90,.14);
  --line-soft: rgba(22,60,90,.07);
  --ink-1: #14222C;
  --ink-2: #4E6373;
  --ink-3: #8CA0AD;
  --hivis: #F4640A;
  --pos: #22c55e;
  --neg: #ef4444;
  --ca: #0ea5e9;
  --scan: rgba(10,166,201,.10);
  --panel-shadow: 0 30px 80px rgba(20,50,75,.22);
  --font-display: "Archivo", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* remappage design system -> HUD (le tableau garde ses styles inline) */
  --color-bg-primary: var(--glass-strong);
  --color-bg-secondary: var(--glass);
  --color-bg-tertiary: color-mix(in srgb, var(--ink-3) 10%, transparent);
  --color-text-primary: var(--ink-1);
  --color-text-secondary: var(--ink-2);
  --color-text-tertiary: var(--ink-3);
  --color-text-quaternary: var(--ink-3);
  --color-border: var(--line);
  --color-border-light: var(--line-soft);
  --color-primary: var(--ca);
  --color-success: var(--pos);
  --color-error: var(--neg);
  --color-warning: #f59e0b;
  --neu-raised: none;
  --neu-inset-sm: inset 0 0 0 1px var(--line);

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 30% 20%, var(--bg), var(--bg-deep));
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 15px;
}

#rt-hud[data-theme="dark"] {
  --bg: #0A1218;
  --bg-deep: #070D12;
  --glass: rgba(14,24,32,.78);
  --glass-strong: rgba(16,28,38,.92);
  --line: rgba(140,200,235,.22);
  --line-soft: rgba(140,200,235,.09);
  --ink-1: #E8F1F6;
  --ink-2: #93AAB9;
  --ink-3: #54707F;
  --scan: rgba(60,220,255,.07);
  --panel-shadow: 0 30px 80px rgba(0,0,0,.6);
}

#rt-hud *, #rt-hud *::before, #rt-hud *::after { box-sizing: border-box; }
#rt-hud button, #rt-hud select { font-family: inherit; cursor: pointer; }
#rt-hud :focus-visible { outline: 2px solid var(--hivis); outline-offset: 2px; border-radius: 4px; }

#rt-hud .rt-sweep {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 44%, var(--scan) 50%, transparent 56%);
  background-size: 300% 100%;
  animation: rt-sweep 12s linear infinite;
  mix-blend-mode: multiply;
}
#rt-hud[data-theme="dark"] .rt-sweep { mix-blend-mode: screen; }
@keyframes rt-sweep { from { background-position: 120% 0 } to { background-position: -120% 0 } }

/* ---------- BARRE SUPÉRIEURE ---------- */
#rt-hud .rt-header {
  position: relative; z-index: 20; flex: none;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px;
  background: linear-gradient(var(--glass), transparent);
  border-bottom: 1px solid var(--line-soft);
}
#rt-hud .rt-brand { display: flex; align-items: baseline; gap: 10px; }
#rt-hud .rt-rail { width: 34px; height: 8px; position: relative; top: -2px; }
#rt-hud .rt-rail::before, #rt-hud .rt-rail::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink-3);
}
#rt-hud .rt-rail::before { top: 0 } #rt-hud .rt-rail::after { bottom: 0 }
#rt-hud .rt-name {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 18px; letter-spacing: .14em; text-transform: uppercase;
}
#rt-hud .rt-name em { font-style: normal; color: var(--hivis); }
#rt-hud .rt-mode {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px;
  background: var(--glass); backdrop-filter: blur(10px); white-space: nowrap;
}
#rt-hud .rt-spacer { flex: 1 }

#rt-hud .rt-nav {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--glass); backdrop-filter: blur(10px); overflow: hidden;
}
#rt-hud .rt-nav button {
  width: 34px; height: 34px; border: none; background: none; color: var(--ink-2);
  display: grid; place-items: center; transition: background .15s, color .15s;
}
#rt-hud .rt-nav button:hover { background: var(--line-soft); color: var(--ink-1); }
#rt-hud .rt-nav .rt-month {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
  min-width: 168px; text-align: center; padding: 0 6px; color: var(--ink-1); cursor: pointer;
}
#rt-hud .rt-nav .rt-month b { color: var(--hivis); }

#rt-hud .rt-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; background: var(--glass); backdrop-filter: blur(10px);
  transition: border-color .18s, color .18s, transform .18s;
}
#rt-hud .rt-chip:hover { border-color: var(--hivis); color: var(--ink-1); transform: translateY(-1px); }
#rt-hud select.rt-chip { min-width: 170px; appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
#rt-hud .rt-clock { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; }
#rt-hud .rt-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(10px); color: var(--ink-2);
  display: grid; place-items: center; font-size: 14px;
  transition: border-color .18s, color .18s, transform .18s;
}
#rt-hud .rt-icon-btn:hover { border-color: var(--hivis); color: var(--ink-1); transform: translateY(-1px); }

/* ---------- CORPS ---------- */
#rt-hud .rt-body {
  position: relative; z-index: 10; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 20px 0; overflow: auto; scrollbar-width: thin;
}

#rt-hud .rt-panel {
  position: relative; flex: none;
  background: var(--glass); backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--panel-shadow); overflow: hidden;
}
#rt-hud .rt-corners { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#rt-hud .rt-corners::before, #rt-hud .rt-corners::after,
#rt-hud .rt-corners i::before, #rt-hud .rt-corners i::after {
  content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--hivis);
}
#rt-hud .rt-corners::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 14px 0 0 0 }
#rt-hud .rt-corners::after { top: -1px; right: -1px; border-left: none; border-bottom: none; border-radius: 0 14px 0 0 }
#rt-hud .rt-corners i::before { bottom: -1px; left: -1px; border-right: none; border-top: none; border-radius: 0 0 0 14px }
#rt-hud .rt-corners i::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 14px 0 }

#rt-hud .rt-panel-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
}
#rt-hud .rt-panel-title {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 15px; letter-spacing: .02em; color: var(--ink-1);
}
#rt-hud .rt-panel-sub {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ---------- GRAPHIQUE ---------- */
#rt-hud .rt-chart-wrap { position: relative; padding: 8px 10px 4px; }
#rt-hud .rt-chart { display: block; width: 100%; height: 330px; overflow: visible; }
#rt-hud .rt-grid-line { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 6; }
#rt-hud .rt-axis-zero { stroke: var(--line); stroke-width: 1.2; }
#rt-hud .rt-axis-txt {
  font-family: var(--font-mono); font-size: 9px; fill: var(--ink-3); letter-spacing: .08em;
}
#rt-hud .rt-month-txt {
  font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-3); letter-spacing: .14em;
  text-transform: uppercase;
}
#rt-hud .rt-month-txt.now { fill: var(--hivis); font-weight: 600; }
#rt-hud .rt-bar {
  transform-origin: center bottom;
  animation: rt-grow .85s cubic-bezier(.22,.9,.24,1) both;
}
@keyframes rt-grow { from { transform: scaleY(0) } to { transform: scaleY(1) } }
#rt-hud .rt-bar-top { animation: rt-fade .5s .5s both; }
@keyframes rt-fade { from { opacity: 0 } to { opacity: 1 } }
#rt-hud .rt-bar-val {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .04em; text-anchor: middle;
}
#rt-hud .rt-cum-area { opacity: .16 }
/* --- Prévisionnel --- */
#rt-hud .rt-bar-fc { animation: rt-fade .6s .4s both; }
#rt-hud .rt-fc-split { stroke: var(--hivis); stroke-width: 1; stroke-dasharray: 2 5; opacity: .5; }
#rt-hud .rt-fc-label {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em;
  fill: var(--hivis); opacity: .7;
}
#rt-hud .rt-month-txt.fc { fill: var(--hivis); opacity: .7; }
#rt-hud .rt-cum-fc {
  stroke-dasharray: 6 5 !important; stroke-width: 2; opacity: .75;
  animation: none; stroke-dashoffset: 0;
  filter: none;
}
#rt-hud .rt-cum-line {
  fill: none; stroke: var(--hivis); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--hivis) 45%, transparent));
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: rt-draw 1.5s .25s cubic-bezier(.22,.9,.24,1) forwards;
}
#rt-hud .rt-proj-line {
  fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: rt-draw 1.4s var(--delay, .3s) cubic-bezier(.22,.9,.24,1) forwards;
}
@keyframes rt-draw { to { stroke-dashoffset: 0 } }
#rt-hud .rt-dot { animation: rt-fade .5s .9s both; }
#rt-hud .rt-crosshair { stroke: var(--hivis); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; }
#rt-hud .rt-chart-wrap.hovering .rt-crosshair { opacity: .8 }
#rt-hud .rt-hit { fill: transparent; cursor: crosshair; }
#rt-hud .rt-hit:hover ~ .rt-bar { }

#rt-hud .rt-tip {
  /* fixed + hors des panneaux : jamais rognée par leur overflow:hidden */
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  background: var(--glass-strong); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 16px 40px rgba(20,50,75,.24);
  transition: opacity .15s; min-width: 168px;
}
#rt-hud .rt-tip.show { opacity: 1 }
#rt-hud .rt-tip .t {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--hivis); margin-bottom: 7px;
}
#rt-hud .rt-tip .r {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  color: var(--ink-2); padding: 2px 0;
}
#rt-hud .rt-tip .r .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
#rt-hud .rt-tip .r .v {
  margin-left: auto; font-family: var(--font-mono); font-weight: 700;
  color: var(--ink-1); font-variant-numeric: tabular-nums;
}
#rt-hud .rt-tip .sepline { height: 1px; background: var(--line-soft); margin: 6px 0; }

#rt-hud .rt-legend {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 4px 16px 14px;
}
#rt-hud .rt-leg {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 99px; padding: 5px 11px;
  background: transparent; color: var(--ink-2);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .15s, color .15s, opacity .15s, background .15s;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#rt-hud .rt-leg .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--lc); }
#rt-hud .rt-leg .sw--line { height: 3px; border-radius: 2px; width: 14px; }
#rt-hud .rt-leg:hover { border-color: var(--lc); color: var(--ink-1); }
#rt-hud .rt-leg--fc .sw {
  background: repeating-linear-gradient(45deg, var(--hivis) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1px var(--hivis);
}
#rt-hud .rt-leg.off { opacity: .38; }
#rt-hud .rt-leg.off .sw { background: var(--ink-3); }

#rt-hud .rt-chart-empty {
  padding: 90px 20px; text-align: center; color: var(--ink-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- COMPTEUR TEMPS RÉEL + KPI ---------- */
#rt-hud .rt-strip {
  flex: none; display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(4, minmax(0, .7fr));
}
#rt-hud .rt-tile {
  position: relative; overflow: hidden;
  background: var(--glass); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  animation: rt-drop .55s ease both;
}
@keyframes rt-drop { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
#rt-hud .rt-tile .k {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}
#rt-hud .rt-tile .v {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 27px; line-height: 1.1; margin-top: 8px;
  color: var(--tc, var(--ink-1)); font-variant-numeric: tabular-nums;
}
#rt-hud .rt-tile .s {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
  color: var(--ink-3); margin-top: 6px;
}
#rt-hud .rt-tile--live::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tc, var(--hivis)) 8%, transparent), transparent);
  background-size: 200% 100%; animation: rt-shine 4s linear infinite;
}
@keyframes rt-shine { from { background-position: 120% 0 } to { background-position: -120% 0 } }
#rt-hud .rt-dot-live {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); display: inline-block;
}
#rt-hud .rt-dot-live.on { background: var(--pos); animation: rt-blink 1.5s infinite; }
@keyframes rt-blink { 50% { opacity: .25 } }

/* ---------- TABLEAU ---------- */
#rt-hud .rt-table-panel { flex: 1 1 auto; min-height: 320px; display: flex; flex-direction: column; }
#rt-hud .rt-table-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
#rt-hud table.rt-table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 12px; white-space: nowrap;
}
#rt-hud table.rt-table th {
  position: sticky; top: 0; z-index: 3;
  background: var(--glass-strong); backdrop-filter: blur(18px);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line);
}
#rt-hud table.rt-table th.r { text-align: right; }
#rt-hud table.rt-table td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); }
#rt-hud table.rt-table td.r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#rt-hud table.rt-table tr.rt-site {
  cursor: pointer; background: color-mix(in srgb, var(--ink-3) 8%, transparent);
}
#rt-hud table.rt-table tr.rt-site:hover { background: color-mix(in srgb, var(--hivis) 9%, transparent); }
#rt-hud table.rt-table tr.rt-site td { border-top: 1px solid var(--line); font-weight: 700; }
#rt-hud table.rt-table tr.rt-site .chev {
  display: inline-block; width: 14px; color: var(--ink-3); font-size: 9px; transition: transform .15s;
}
#rt-hud table.rt-table tr.rt-emp td { font-size: 11.5px; color: var(--ink-2); }
#rt-hud table.rt-table tr.rt-emp:hover td { background: color-mix(in srgb, var(--hivis) 5%, transparent); }
#rt-hud table.rt-table tr.rt-total td {
  position: sticky; bottom: 0; z-index: 2;
  background: color-mix(in srgb, var(--hivis) 9%, var(--glass-strong));
  backdrop-filter: blur(18px); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-weight: 700; color: var(--hivis);
}
#rt-hud .rt-name-cell { font-weight: 600; color: var(--ink-1); }
#rt-hud .rt-num { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); margin-left: 8px; }
#rt-hud .rt-pill {
  display: inline-block; padding: 3px 9px; border-radius: 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--pc) 18%, transparent);
  color: color-mix(in srgb, var(--pc) 74%, var(--ink-1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 40%, transparent);
}
#rt-hud[data-theme="dark"] .rt-pill { color: color-mix(in srgb, var(--pc) 82%, #fff); }
#rt-hud .rt-tag {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em;
  border: 1px solid currentColor;
}
#rt-hud .rt-live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3); margin-right: 7px; vertical-align: middle;
}
#rt-hud .rt-live-dot.on { background: var(--pos); animation: rt-blink 1.5s infinite; }
#rt-hud .rt-empty {
  padding: 60px 20px; text-align: center; color: var(--ink-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}

/* ---------- BANDEAU BAS ---------- */
#rt-hud .rt-foot {
  flex: none; position: relative; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--ink-3); text-transform: uppercase;
}
#rt-hud .rt-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); display: inline-block; margin-right: 7px; }
#rt-hud .rt-foot .sep { opacity: .35 }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1500px) {
  #rt-hud .rt-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  #rt-hud .rt-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #rt-hud .rt-header { padding: 10px 12px; gap: 8px; }
  #rt-hud .rt-body { padding: 10px 12px 0; }
  #rt-hud .rt-name { font-size: 15px }
  #rt-hud .rt-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rt-hud .rt-nav .rt-month { min-width: 120px; font-size: 12px }
  #rt-hud .rt-chart { height: 260px }
}