/* Dividend · $DIVI — l'application. */

:root{
  --void:#04060A;
  --panel:#080C13;
  --panel-2:#0B1018;
  --line:#161E2A;
  --line-2:#1E2836;
  --txt:#EAF2F0;
  --dim:#7B8794;
  --dimmer:#59626F;
  --green:#5BEE3E;
  --green-hi:#A6FF8C;
  --blue:#3D4CF6;
  --blue-hi:#7C8CFF;
  --flow:linear-gradient(96deg,var(--green),var(--blue));
  --f:"Archivo",system-ui,-apple-system,sans-serif;
  --rail:236px;
  --gap:clamp(12px,1.1vw,18px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--void)}
body{
  margin:0;height:100dvh;overflow:hidden;               /* coquille d'app : le plafond est ICI */
  background:var(--void);color:var(--txt);
  font-family:var(--f);font-variation-settings:"wdth" 100;
  font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit}
::selection{background:var(--green);color:#04140A}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ── le fond ────────────────────────────────────────────────────────────
   Cinq couches, chacune faible. Le noir plat bande des qu'on pose un degrade
   large dessus : c'est le grain, en dernier, qui l'empeche. */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#03050A 0%,#04070C 46%,#070A13 100%)}
.bg>span{position:absolute;inset:0;display:block}

/* les souffles de couleur, qui derivent tres lentement */
.bg-glow{
  inset:-24%;
  background:
    radial-gradient(52% 44% at 12% 2%,  rgba(91,238,62,.115), transparent 70%),
    radial-gradient(46% 46% at 88% 22%, rgba(61,76,246,.13), transparent 72%),
    radial-gradient(64% 44% at 52% 112%,rgba(61,76,246,.10), transparent 72%),
    radial-gradient(30% 26% at 74% 78%, rgba(91,238,62,.06), transparent 70%);
  animation:drift 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes drift{
  from{transform:translate3d(-1.4%,-1%,0) scale(1.02)}
  to  {transform:translate3d(1.6%,1.2%,0) scale(1.06)}
}

/* le relief : les courbes de niveau de la marque, presque invisibles une par une */
.bg-topo{
  background:url(../assets/topo.svg) center/cover no-repeat;
  opacity:.34;
  /* Un masque qui s'eteint vite laisse une arete en travers de la page. Celui-ci couvre tout
     l'ecran et ne descend jamais brutalement : aucun bord a pointer du doigt. */
  -webkit-mask-image:radial-gradient(150% 130% at 80% -14%,#000 0%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.18) 72%,transparent 100%);
  mask-image:radial-gradient(150% 130% at 80% -14%,#000 0%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.18) 72%,transparent 100%);
}

/* la trame, pour que l'oeil ait une echelle */
.bg-grid{
  background-image:linear-gradient(rgba(133,175,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(133,175,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(140% 115% at 50% -10%,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%);
  mask-image:radial-gradient(140% 115% at 50% -10%,#000 0%,rgba(0,0,0,.4) 55%,transparent 100%);
}

/* le grain : c'est lui qui tue le banding des grands degrades sur du presque noir */
.bg-grain{
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* et le bord qui se ferme, pour que le centre respire */
.bg-vig{background:radial-gradient(120% 92% at 50% 34%,transparent 42%,rgba(0,0,0,.55) 100%)}

@media (prefers-reduced-motion:reduce){ .bg-glow{animation:none} }

/* ── la coquille ───────────────────────────────────────────────────────── */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);height:100dvh}

.rail{
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;
  border-right:1px solid var(--line);background:rgba(5,8,13,.66);backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px;border-bottom:1px solid var(--line)}
.brand svg{display:block;filter:drop-shadow(0 0 9px rgba(91,238,62,.35))}
.brand b{font-weight:700;font-variation-settings:"wdth" 112;letter-spacing:.24em;font-size:13px;text-transform:uppercase;color:#fff}
.nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  color:var(--dim);text-decoration:none;font-size:13.5px;font-weight:500;
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;
}
.nav a .ico{width:16px;height:16px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.035);color:var(--txt)}
.nav a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(91,238,62,.12),rgba(61,76,246,.09));
  border-color:rgba(91,238,62,.28);color:#fff;
}
.nav a[aria-current="page"] .ico{opacity:1;color:var(--green)}
.rail-foot{padding:14px 18px 16px;border-top:1px solid var(--line);display:grid;gap:9px}
.status{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dim)}
.status i{width:7px;height:7px;border-radius:50%;background:#F0A93E;box-shadow:0 0 10px #F0A93E;flex:none}
.status.ok i{background:var(--green);box-shadow:0 0 10px var(--green)}

/* la barre haute */
.main{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px clamp(16px,2vw,26px);border-bottom:1px solid var(--line);
  background:rgba(5,8,13,.62);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(91,238,62,.09),0 10px 30px -22px rgba(91,238,62,.5);
}
.top h1{margin:0;font-size:17px;font-weight:700;font-variation-settings:"wdth" 106;letter-spacing:-.01em;color:#fff}
.top p{margin:2px 0 0;font-size:12.5px;color:var(--dim)}
.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);
  font-size:11.5px;color:var(--dim);letter-spacing:.04em;white-space:nowrap;
}
.pill b{color:var(--txt);font-weight:600}
button.pill{cursor:pointer}
button.pill:hover{border-color:var(--green);color:var(--txt)}

/* la colonne qui defile : min-height 0, sinon elle pousse au lieu de defiler */
.scroll{overflow-y:auto;min-height:0;padding:var(--gap) clamp(16px,2vw,26px) 40px;scrollbar-width:thin;scrollbar-color:#1E2836 transparent}
.scroll::-webkit-scrollbar{width:10px}
.scroll::-webkit-scrollbar-thumb{background:#161E2A;border-radius:8px;border:3px solid var(--void)}

/* ── les panneaux ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:minmax(0,1.28fr) minmax(0,1fr)}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.005)),rgba(7,10,17,.93);
  border:1px solid var(--line);border-radius:14px;padding:16px 17px;min-width:0;
  backdrop-filter:blur(7px);
  box-shadow:0 18px 40px -30px #000;
}
.panel.flush{padding:0;overflow:hidden}
.phead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.phead h2{margin:0;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.phead .hint{font-size:11.5px;color:var(--dimmer)}

.v{font-size:clamp(21px,2vw,27px);font-weight:700;font-variation-settings:"wdth" 108;letter-spacing:-.02em;line-height:1.1;color:#fff}
.v.grad{background:var(--flow);-webkit-background-clip:text;background-clip:text;color:transparent}
.u{font-size:12px;color:var(--dim);margin-left:6px;font-weight:500;letter-spacing:.02em}
.s{margin-top:5px;font-size:11.5px;color:var(--dimmer)}

/* le plateau 3D, monte une seule fois et jamais detruit */
#stage{position:relative;width:100%;height:min(46vh,420px);min-height:260px}
#rack{display:block;width:100%;height:100%}
.stage-labels{position:absolute;inset:0;pointer-events:none}
.stage-labels span{
  position:absolute;transform:translate(-50%,0);font-size:10px;font-weight:600;letter-spacing:.14em;
  color:var(--dimmer);text-transform:uppercase;white-space:nowrap;transition:color .25s,text-shadow .25s;
}
.stage-labels span.on{color:#fff;text-shadow:0 0 12px currentColor}

/* ── tuiles de sleeve ──────────────────────────────────────────────────── */
.sleeves{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sleeve{
  --c:var(--green);
  position:relative;display:grid;gap:4px;text-align:left;width:100%;cursor:pointer;padding:13px 13px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);border-radius:12px;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.sleeve:hover{transform:translateY(-2px);box-shadow:0 0 22px -6px color-mix(in srgb,var(--c) 60%,transparent)}
.sleeve[aria-pressed="true"]{
  border-color:var(--c);
  box-shadow:0 0 26px -4px color-mix(in srgb,var(--c) 62%,transparent),inset 0 0 26px -16px var(--c);
}
.sleeve .sym{font-weight:700;font-variation-settings:"wdth" 110;font-size:16px;color:#fff}
.sleeve .sub{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dimmer);font-weight:500}
.sleeve .bar{position:relative;height:2px;background:var(--line-2);margin:8px 0 4px;border-radius:2px;overflow:hidden}
.sleeve .bar i{position:absolute;inset:0 auto 0 0;background:var(--c);box-shadow:0 0 8px var(--c);transition:width .5s cubic-bezier(.22,1,.36,1)}
.sleeve .m{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.sleeve .m b{color:var(--txt);font-weight:600}

/* ── tableaux ──────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
th{
  text-align:right;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);
  font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
th:first-child,td:first-child{text-align:left;padding-left:17px}
th:last-child,td:last-child{padding-right:17px}
td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:right;color:var(--dim);white-space:nowrap}
tr:last-child td{border-bottom:0}
td .sym{color:#fff;font-weight:600;font-variation-settings:"wdth" 108}
td b{color:var(--txt);font-weight:600}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:1px}

/* ── controles ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:10px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--txt);font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .16s,background .16s,transform .12s;
}
.btn:hover:not(:disabled){border-color:var(--green);background:rgba(91,238,62,.08)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{
  border:0;color:#04140A;background:var(--flow);
  box-shadow:0 0 24px -8px rgba(91,238,62,.8);
}
.btn.primary:hover:not(:disabled){filter:brightness(1.08)}
.btn.wide{width:100%}
.field{display:grid;gap:6px;margin:12px 0}
.field label{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);font-weight:600}
.inp{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;background:rgba(0,0,0,.35)}
.inp input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font:inherit;
  font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;
}
.inp span{font-size:11.5px;color:var(--dimmer);letter-spacing:.1em}
.inp button{background:none;border:0;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.1em;cursor:pointer;text-transform:uppercase}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>*{flex:1 1 0;min-width:0}

.meter{height:4px;border-radius:3px;background:var(--line-2);overflow:hidden;position:relative}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--flow);transition:width .3s linear}

.note{font-size:12.5px;line-height:1.6;color:var(--dimmer);border-left:1px solid var(--line-2);padding-left:14px}
.note b{color:var(--dim)}
.prose{font-size:14px;color:var(--dim);max-width:74ch}
.prose p{margin:0 0 .85em}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--txt);font-weight:600}
.prose em{font-style:normal;color:var(--green-hi)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;color:var(--green-hi)}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--dimmer)}
.plot svg{display:block;width:100%;height:auto;overflow:visible}
.plot .ax{stroke:var(--line-2);stroke-width:1}
.plot .lb{font-family:var(--f);font-size:11px;fill:var(--dimmer);font-weight:500}

/* ── ecrans etroits ────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .g2{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sleeves{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  body{overflow:auto;height:auto;min-height:100dvh}
  .app{grid-template-columns:minmax(0,1fr);height:auto}
  .rail{grid-template-rows:auto auto;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
  .nav{flex-direction:row;overflow-x:auto;padding:8px 10px;gap:6px}
  .nav a{white-space:nowrap;padding:8px 12px}
  .nav a .ico{display:none}
  .rail-foot{display:none}
  .main{grid-template-rows:auto auto}
  .scroll{overflow:visible}
  #stage{height:44vh;min-height:280px}
}
@media (max-width:560px){
  .g4,.sleeves{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top{padding:12px 14px}
  .scroll{padding:12px 14px 32px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}