:root{
    --navy:#070e22; --ink:#f3eee2; --ink-2:#aab2c8; --ink-3:#66708f;
    --yellow:#f5c518; --orange:#ff7a2f; --red:#ff3b5c; --green:#4ad48f; --blue:#5b8def;
    --card:rgba(8,15,38,.86); --line:rgba(243,238,226,.10);
    --display:'Poppins',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
    color-scheme:dark; --chatW:400px;
  }
  html,body{height:100%;}
  [hidden]{display:none!important;}
  body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--body);overflow:hidden;-webkit-font-smoothing:antialiased;}
  #stage{position:fixed;inset:0;} #stage canvas{display:block;}
  #labels{position:fixed;inset:0;pointer-events:none;}
  .zl{pointer-events:none;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);text-shadow:0 1px 6px #000;white-space:nowrap;transform:translate(-50%,-50%);}
  .zl.dir{font-size:11px;color:var(--ink);} .zl.room{color:var(--ink-3);} .zl.room.on{color:var(--yellow);} .zl.room.hot{color:#fff;background:rgba(255,59,92,.9);padding:2px 6px;border-radius:6px;} .zl.place{color:var(--ink-3);font-size:9px;}
  .zl.world{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.02em;text-transform:none;color:var(--ink);} .zl.world.right{color:var(--yellow);}

  .hud{position:fixed;pointer-events:none;z-index:5;}
  /* comparaison en haut */
  #top{top:0;left:var(--chatW);right:0;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 0;display:flex;flex-direction:column;align-items:flex-end;gap:0;}
  .brand .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);}
  .brand h1{margin:2px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(16px,1.8vw,22px);line-height:1.05;}
  .brand .sub{margin-top:4px;font-size:12px;color:var(--ink-2);max-width:40ch;line-height:1.4;}
  .tools{pointer-events:auto;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:8px;}
  .tools button{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;border:1px solid var(--line);background:var(--card);color:var(--ink-3);border-radius:999px;padding:4px 10px;cursor:pointer;backdrop-filter:blur(8px);}
  .tools button.on{color:var(--ink);border-color:rgba(243,238,226,.35);} .tools button:hover{border-color:var(--yellow);}
  .tools .rdv{font-family:var(--display);font-weight:700;font-size:11.5px;background:var(--yellow);color:#14172b;border-radius:999px;padding:5px 12px;text-decoration:none;margin-left:6px;box-shadow:0 2px 10px rgba(245,197,24,.35);} .tools .rdv:hover{filter:brightness(1.08);}
  body.hide-constats #constats{display:none;} body.hide-constats{--chatW:0px;}
  body.hide-cmp #cmp{display:none;} body.hide-g1 #g1{display:none;} body.hide-g1 .groups{grid-template-columns:1fr;}
  body.hide-g2 #g2,body.hide-g2 .gt[data-for=g2]{display:none;} body.hide-g3 #g3,body.hide-g3 .gt[data-for=g3]{display:none;} body.hide-toggles #toggles,body.hide-toggles .gt[data-for=toggles]{display:none;}
  body.hide-g2.hide-g3.hide-toggles .group.g2{display:none;} body.hide-g2.hide-g3.hide-toggles .groups{grid-template-columns:1fr;} body.hide-g1.hide-g2.hide-g3.hide-toggles .groups{display:none;}
  body.hide-now-line #now-line{display:none;}
  table.cmp{pointer-events:auto;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;backdrop-filter:blur(10px);font-variant-numeric:tabular-nums;}
  table.cmp th,table.cmp td{padding:6px 12px;text-align:right;font-size:12px;}
  table.cmp th{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);}
  table.cmp th.r{color:var(--yellow);}
  table.cmp td:first-child{text-align:left;color:var(--ink-2);}
  table.cmp td.v{font-family:var(--mono);font-size:15px;color:var(--ink);}
  table.cmp td.v.r{color:var(--yellow);}
  table.cmp td.d{font-family:var(--mono);font-size:12px;color:var(--ink-3);min-width:64px;}
  table.cmp td.d.bad{color:var(--red);} table.cmp td.d.good{color:var(--green);}
  table.cmp tr.main td.v{font-size:20px;}

  /* constats */
  #constats{left:0;top:0;bottom:0;width:var(--chatW);display:flex;flex-direction:column;gap:0;pointer-events:auto;background:#ffffff;color:#242424;border-right:1px solid #e1dfdd;box-shadow:2px 0 12px rgba(0,0,0,.25);overflow:hidden;font-family:'Segoe UI',var(--body);}
  #constats .tbar{background:#464775;color:#fff;padding:10px 14px;font-family:var(--display);font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;} #constats .tbar .dot{width:9px;height:9px;border-radius:50%;background:#92c353;} #constats .tbar small{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:10px;opacity:.75;letter-spacing:.08em;}
  #constats .brand{padding:10px 14px 8px;border-bottom:1px solid #e1dfdd;} #constats .brand .eyebrow{color:#6264a7;} #constats .brand h1{color:#242424;font-size:17px;} #constats .brand .sub{color:#616161;font-size:11.5px;max-width:none;}
  #chans{display:flex;gap:4px;flex-wrap:wrap;padding:6px 10px;background:#fff;border-bottom:1px solid #e1dfdd;} .chan{font-family:var(--mono);font-size:10px;border:1px solid #d6d6d6;background:#fafafa;color:#444;border-radius:999px;padding:2px 8px;cursor:pointer;position:relative;} .chan.on{background:#6264a7;color:#fff;border-color:#6264a7;} .chan[data-unread]::after{content:attr(data-unread);position:absolute;top:-6px;right:-4px;background:#c4314b;color:#fff;font-size:8.5px;border-radius:999px;padding:0 4px;min-width:8px;text-align:center;}
  .ct .who .pres{font-family:var(--mono);font-size:9.5px;color:#6264a7;background:#eef0fb;border-radius:4px;padding:0 4px;}
  .ct.ppl .av{background:#6264a7;} .ct.ppl.bad .av{background:#c4314b;} .ct.ppl.good .av{background:#237b4b;}
  #chatlist{flex:1;overflow-y:auto;scroll-behavior:smooth;background:#f5f5f5;padding:8px 10px 14px;gap:6px;}
  #constats .chead{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid #e1dfdd;background:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#616161;}
  #constats .chead b{color:#242424;font-family:var(--display);font-size:13px;letter-spacing:0;text-transform:none;} #constats .chead .badge{margin-left:auto;background:var(--red);color:#fff;font-family:var(--display);font-weight:700;font-size:10px;border-radius:999px;padding:2px 7px;letter-spacing:0;}
  
  .ct{display:flex;gap:9px;padding:8px 10px;border-radius:6px;font-size:12.5px;line-height:1.4;color:#242424;background:#fff;border:1px solid #e8e8e8;box-shadow:0 1px 2px rgba(0,0,0,.05);animation:pop .3s ease;cursor:pointer;}
  .ct:hover{background:#f0f0ff;border-color:#c7c9f0;}
  .ct .av{flex:none;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--display);font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;}
  .ct .body{min-width:0;flex:1;}
  .ct .who{display:flex;align-items:baseline;gap:6px;} .ct .who b{font-family:var(--display);font-size:12.5px;color:#242424;} .ct .who .d{font-family:var(--mono);font-size:10px;color:#8a8886;} .ct .who .ch{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-left:auto;}
  .ct .msg{color:#242424;margin-top:1px;} .ct .msg b{color:#000;font-weight:600;}
  .ct.wait,.ct.new{background:#e8ebfa;border:1px solid #c7c9f0;margin-left:26px;} .ct.wait .av{background:var(--yellow);color:#14172b;} .ct.wait .bar{height:3px;background:rgba(243,238,226,.1);border-radius:2px;margin-top:6px;overflow:hidden;} .ct.wait .bar i{display:block;height:100%;background:var(--yellow);width:0;}
  .ct.sys .av{background:var(--orange);} .ct.sys{border-left:3px solid var(--orange);}
  .ct.new .av{background:var(--yellow);color:#14172b;} .ct.ev .av{background:#2a3560;color:var(--ink-2);}
  .ct.bad .av{background:var(--red);} .ct.good .av{background:var(--green);color:#0b1430;}
  .ct.fresh{box-shadow:0 0 0 2px rgba(98,100,167,.35);}
  .react{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;} .react span{font-family:var(--mono);font-size:10.5px;border:1px solid #d6d6d6;background:#fafafa;border-radius:999px;padding:2px 8px;color:#444;}
  .react span.up{border-color:rgba(74,212,143,.5);color:var(--green);} .react span.down{border-color:rgba(255,59,92,.5);color:var(--red);}
  .reply{display:flex;gap:7px;margin-top:6px;padding-top:6px;border-top:1px solid #eee;font-size:12px;color:#333;} .reply .av{width:20px;height:20px;border-radius:6px;font-size:9px;} .reply b{color:#242424;font-weight:600;}
  @keyframes pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

  /* courbe */
  #chart{background:#fff;border-bottom:1px solid #e1dfdd;padding:6px 12px 4px;}
  #chart .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a8886;display:flex;justify-content:space-between;}
  #chart canvas{width:100%;height:84px;display:block;}

  /* barre de pilotage */
  #bar{left:var(--chatW);right:0;bottom:0;padding:0 10px calc(10px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;}
  .tray{pointer-events:auto;max-width:1280px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:8px;}
  .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .clock{font-family:var(--mono);font-size:13px;color:var(--ink);min-width:150px;font-variant-numeric:tabular-nums;}
  .ctrl{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink-3);}
  .ctrl button{font-family:var(--mono);font-size:12px;border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:999px;padding:6px 11px;cursor:pointer;}
  .ctrl button.on{background:var(--yellow);color:#14172b;border-color:var(--yellow);}
  .ctrl button.big{font-family:var(--display);font-weight:700;font-size:13px;padding:8px 16px;color:var(--ink);border-color:rgba(243,238,226,.3);}
  .ctrl button:focus-visible{outline:2px solid var(--yellow);outline-offset:1px;}
  .now{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);}
  .groups{display:grid;grid-template-columns:5fr 7fr;gap:8px 14px;max-height:30vh;overflow:auto;align-items:start;}
  .levers{display:grid;grid-template-columns:repeat(5,1fr);gap:4px 5px;}
  .lever{display:grid;grid-template-columns:24px 1fr 24px;grid-template-areas:'n n n' 'm v p';align-items:center;gap:2px 4px;background:rgba(243,238,226,.04);border:1px solid var(--line);border-radius:10px;padding:4px 6px;min-width:0;} .lever .ln{grid-area:n;text-align:center;} .lever .lv{grid-area:v;} .lever button[data-d='-1']{grid-area:m;} .lever button[data-d='1']{grid-area:p;}
  .lever .ln{font-family:var(--display);font-weight:600;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lever .lv{font-family:var(--mono);font-size:11.5px;color:var(--yellow);text-align:center;}
  .lever button{width:24px;height:22px;border-radius:7px;border:1px solid rgba(243,238,226,.25);background:transparent;color:var(--ink);font-family:var(--display);font-weight:800;font-size:16px;cursor:pointer;line-height:1;}
  .lever button:hover{border-color:var(--yellow);background:rgba(245,197,24,.12);}
  .lever button:focus-visible{outline:2px solid var(--yellow);}
  .toggles{display:flex;gap:6px;flex-wrap:wrap;}
  .tg{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:999px;padding:4px 9px;cursor:pointer;}
  .tg.on{background:rgba(245,197,24,.15);color:var(--yellow);border-color:rgba(245,197,24,.5);}
  .zl.beacon{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;background:rgba(255,59,92,.92);color:#fff;padding:4px 8px;border-radius:8px;max-width:220px;white-space:normal;text-align:center;line-height:1.3;box-shadow:0 2px 12px rgba(0,0,0,.5);}
  .zl.beacon.good{background:rgba(74,212,143,.92);color:#0b1430;} .zl.beacon.neutral{background:rgba(245,197,24,.92);color:#14172b;}
  .zl.sys{font-family:var(--display);font-weight:700;font-size:11px;text-transform:none;letter-spacing:0;color:var(--ink);}
  .group{display:flex;flex-direction:column;gap:6px;min-width:0;}
  .group .gt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
  .cards{display:flex;flex-wrap:wrap;gap:4px;}
  .card{background:rgba(243,238,226,.05);border:1px solid var(--line);border-radius:999px;padding:4px 9px;cursor:pointer;text-align:left;color:var(--ink);font-family:var(--body);display:inline-flex;align-items:baseline;gap:6px;transition:transform .12s,border-color .2s,background .2s;}
  .card:hover{border-color:var(--yellow);background:rgba(245,197,24,.1);transform:translateY(-2px);}
  .card:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;}
  .card .n{font-family:var(--display);font-weight:700;font-size:11.5px;line-height:1.2;white-space:nowrap;}
  .card .p{display:none;}

  #tip{position:fixed;z-index:8;pointer-events:none;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.45;color:var(--ink-2);backdrop-filter:blur(8px);max-width:260px;}
  #tip b{color:var(--ink);font-family:var(--display);font-size:13px;} #tip .q{font-family:var(--mono);color:var(--orange);} #tip .tr{color:var(--ink-3);font-style:italic;}
  #pp{position:fixed;z-index:8;right:14px;top:270px;width:min(300px,calc(100vw - 28px));background:var(--card);border:1px solid rgba(245,197,24,.45);border-radius:14px;padding:12px 14px;backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--ink-2);animation:pop .3s ease;pointer-events:auto;}
  #pp .pph{display:flex;align-items:center;justify-content:space-between;} #pp .pph b{font-family:var(--display);font-size:15px;color:var(--ink);}
  #pp .pph button{background:transparent;border:0;color:var(--ink-2);font-size:18px;cursor:pointer;line-height:1;}
  #pp .ppa{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  #pp .ppa button{font-family:var(--body);font-size:11.5px;text-align:left;background:rgba(243,238,226,.05);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 9px;cursor:pointer;}
  #pp .ppa button:hover{border-color:var(--yellow);background:rgba(245,197,24,.1);}
  #pp .note{font-size:11px;color:var(--ink-3);}

  .overlay{position:fixed;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at center,rgba(7,14,34,.7),rgba(7,14,34,.96));}
  .overlay .box{max-width:780px;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center;}
  .overlay h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(26px,4.6vw,50px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance;}
  .overlay h2 em{font-style:normal;color:var(--yellow);}
  .overlay p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:60ch;} .overlay p.cta-line{color:var(--ink);font-weight:500;border-left:3px solid var(--yellow);padding-left:14px;text-align:left;}
  .overlay .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);}
  .btn{font-family:var(--display);font-weight:700;font-size:14px;border-radius:999px;padding:11px 18px;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
  .btn.primary{background:var(--yellow);color:#14172b;} .btn.ghost{background:transparent;color:var(--ink);border-color:rgba(243,238,226,.25);}
  .sizes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .size{background:rgba(243,238,226,.04);border:1px solid var(--line);border-radius:14px;padding:14px 18px;min-width:140px;cursor:pointer;color:var(--ink);font-family:var(--body);text-align:left;display:flex;flex-direction:column;gap:3px;}
  .size:hover,.size.on{border-color:var(--yellow);background:rgba(245,197,24,.08);}
  .size b{font-family:var(--display);font-weight:800;font-size:22px;} .size span{font-size:12px;color:var(--ink-2);}
  .bilan{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--ink-2);}
  .bilan b{display:block;font-size:24px;color:var(--ink);font-weight:500;}
  #loading{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:var(--navy);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);transition:opacity .5s;}

  @media (max-width:1100px){ :root{--chatW:300px;}  .groups{grid-template-columns:1fr;} .levers{grid-template-columns:repeat(2,1fr);} .brand .sub{display:none;} }
  @media (max-width:760px){ :root{--chatW:0px;} #constats{display:none;}  .groups{grid-template-columns:1fr;} .g1 .cards,.g2 .cards,.g3 .cards{grid-template-columns:repeat(2,1fr);} #constats{top:auto;bottom:330px;} table.cmp td,table.cmp th{padding:4px 7px;} table.cmp td.v{font-size:13px;} table.cmp tr.main td.v{font-size:16px;} }