@font-face{font-family:'Roboto';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/Roboto-latin.woff2) format('woff2')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/RobotoMono-latin.woff2) format('woff2')}
:root{
  --lime:#A6CF39; --lime-deep:#86AB22; --lime-tint:#EDF5D2;
  --ink:#393939; --ink-950:#191B1C; --ink-900:#1F2224; --ink-800:#272A2C; --ink-700:#2F3335; --ink-600:#3B4043;
  --gray-700:#555; --gray-500:#696969; --gray-300:#C9CBC6; --gray-200:#E3E5DF; --paper:#F5F6F2;
  --blue:#3860BE; --blue-soft:#7FA4F0; --navy:#27455C; --amber:#F2A900;
  --t-seat:1.15s;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Roboto,-apple-system,"Segoe UI",system-ui,Arial,sans-serif;
  background:var(--ink-950); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{min-height:100vh;display:flex;flex-direction:column}

/* ───────── En-tête ───────── */
.top{background:var(--ink);color:#fff;padding:20px 32px 48px;display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.eyebrow{font:500 11px/1 Roboto;letter-spacing:.24em;text-transform:uppercase;color:var(--lime)}
.room{margin:8px 0 0;font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.01em}
.room small{font-size:15px;color:#A9ADAF;margin-left:10px;font-weight:400;letter-spacing:0}
.top .grow{flex:1 1 20px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.09);font-size:13px;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--lime);flex:none}
.chip[data-s=busy] .dot{animation:blink .6s infinite alternate}
.chip[data-s=busy]{background:rgba(166,207,57,.18)}
.badge-demo{font:500 11px/1 Roboto;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(242,169,0,.6);border-radius:999px;padding:8px 12px;white-space:nowrap}
.switch{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 6px;border-radius:999px;background:rgba(255,255,255,.09);font-size:13px;white-space:nowrap;transition:background .2s}
.switch .knob{width:34px;height:20px;border-radius:999px;background:#6B7073;position:relative;transition:background .2s;flex:none}
.switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-pressed=true]{background:rgba(166,207,57,.2)}
.switch[aria-pressed=true] .knob{background:var(--lime)}
.switch[aria-pressed=true] .knob::after{transform:translateX(14px);background:var(--ink)}
.clock{font:400 13px 'Roboto Mono',ui-monospace,Menlo,monospace;color:#B9BDBF;min-width:64px;text-align:right}

/* ───────── Feuille claire ───────── */
.sheet{flex:1;background:var(--paper);border-radius:36px 36px 0 0;margin-top:-28px;padding:26px 32px 30px;
  display:grid;grid-template-columns:262px minmax(0,1fr) 348px;gap:22px;align-items:start;position:relative}
.label{font:500 11px/1 Roboto;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-500);margin:2px 0 12px}

/* Configurations */
.presets{display:flex;flex-direction:column;gap:12px}
.preset{position:relative;display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center;text-align:left;
  padding:15px 16px 17px;border-radius:24px;background:#fff;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 20px -14px rgba(40,50,20,.35);transition:background .3s,transform .15s,box-shadow .3s}
.preset:hover{box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 24px -12px rgba(40,50,20,.4)}
.preset:active{transform:scale(.985)}
.p-num{grid-row:1/4;font-weight:300;font-size:48px;line-height:1;color:#C3C6BE;transition:color .3s}
.p-name{font-weight:500;font-size:18px;line-height:1.2}
.p-sub{font-size:13px;color:var(--gray-500);margin-top:2px;transition:color .3s}
.p-ico{margin-top:9px;width:64px;height:30px;color:var(--ink);opacity:.55;transition:opacity .3s}
.preset[aria-pressed=true]{background:var(--lime)}
.preset[aria-pressed=true] .p-num{color:var(--ink)}
.preset[aria-pressed=true] .p-sub{color:#46561A}
.preset[aria-pressed=true] .p-ico{opacity:.9}
.p-prog{position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .4s ease,opacity .5s;opacity:0}
.preset.running .p-prog{opacity:.85}
.hint{font-size:12.5px;line-height:1.5;color:var(--gray-500);margin:16px 4px 0}
.hint kbd{font:500 11px 'Roboto Mono',monospace;background:#fff;border:1px solid var(--gray-200);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--ink)}
.last{margin:14px 4px 0;font-size:12.5px;color:var(--gray-500)}
.last b{color:var(--ink);font-weight:500}

/* Plan de salle */
.plan{background:var(--ink-700);color:#fff;border-radius:28px;padding:18px 18px 16px;box-shadow:0 24px 40px -28px rgba(20,24,10,.6)}
.plan-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:2px 8px 14px}
.plan-h h2{margin:0;font-weight:300;font-size:24px;letter-spacing:-.01em}
.plan-h h2 small{display:block;font:500 11px/1 Roboto;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.legend{display:flex;gap:16px;font-size:12px;color:#B7BCBF;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
svg#plan{display:block;width:100%;height:auto;border-radius:20px;background:var(--ink-800)}

/* SVG : habillage */
.floor{fill:#2A2E30;stroke:#52585B;stroke-width:3}
.dotgrid{fill:#3B4043}
.glow{fill:url(#lg);transition:opacity 1s;opacity:.18}
.rail{stroke:#5A6063;stroke-width:1.5;stroke-dasharray:3 6;opacity:.7}
.part{fill:#AEB5B9;transition:transform 1s cubic-bezier(.6,0,.2,1)}
.zone{fill:rgba(166,207,57,.04);stroke:rgba(166,207,57,.4);stroke-width:1.5;stroke-dasharray:6 6;vector-effect:non-scaling-stroke;transition:transform 1s cubic-bezier(.3,.8,.3,1),opacity .6s}
.zlab{font:500 9px 'Roboto Mono',monospace;fill:rgba(166,207,57,.75);transition:transform 1s cubic-bezier(.3,.8,.3,1),opacity .6s}
.tbl{opacity:0;transition:opacity .8s}
.tbl.on{opacity:1}
.band{fill:none;stroke:#383D40;stroke-width:26;stroke-linejoin:round;stroke-linecap:round}
.band.u{stroke-width:32}
.tshape{fill:#383D40;stroke:#464C4F;stroke-width:1.5}
.tlab{font:500 10px Roboto;letter-spacing:.2em;fill:#7D8488;text-anchor:middle;text-transform:uppercase}
.scr{vector-effect:non-scaling-stroke;transition:transform 1s cubic-bezier(.3,.8,.3,1),fill .5s;stroke:rgba(255,255,255,.35);stroke-width:1}
.scr.k-live{fill:var(--lime)} .scr.k-doc{fill:#4E79D8} .scr.k-agenda{fill:#E9ECE6} .scr.k-vote{fill:var(--amber)} .scr.k-off{fill:#3E4346} .scr.k-local{fill:#58A6BC}
.scr.k-live.idle{fill:#6E8530}
.stag{transition:transform 1s cubic-bezier(.3,.8,.3,1)}
.stag circle{fill:var(--ink-900);stroke:#6A7073;stroke-width:1}
.stag text{font:500 8px 'Roboto Mono',monospace;fill:#D8DCDD;text-anchor:middle;dominant-baseline:central}
.booth{transition:transform .9s cubic-bezier(.3,.8,.3,1),opacity .6s}
.booth rect{fill:#31373A;stroke:var(--lime);stroke-width:1.5}
.booth text{font:500 11px Roboto;letter-spacing:.06em;fill:#E4EAD0;text-anchor:middle;dominant-baseline:central}
.cam{transition:opacity .6s}
.cam .body{fill:var(--ink-900);stroke:var(--lime);stroke-width:2}
.cam .lens{fill:var(--lime)}
.cam .ctag{font:500 8px 'Roboto Mono',monospace;fill:#A7ADB0;text-anchor:middle}
.cone{transition:transform 1.2s cubic-bezier(.3,.8,.3,1)}
.cone polygon{fill:url(#coneG);opacity:.75;transition:opacity .4s}
.cam.track .cone polygon{opacity:1.6}
.cam.standby{opacity:.28}
.seat{transition:transform var(--t-seat) cubic-bezier(.22,.9,.24,1),opacity .55s;cursor:pointer}
.seat .hit{fill:transparent}
.seat .u{fill:#4B5154;stroke:#7C8387;stroke-width:1.5;transition:fill .25s,stroke .25s}
.seat text{font:500 7.5px 'Roboto Mono',monospace;fill:#D0D5D7;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .25s}
.seat .halo{fill:none;stroke:var(--lime);stroke-width:2;opacity:0}
.seat:hover .u{stroke:#fff}
.seat.req .u{fill:#2F4F95;stroke:#7FA4F0}
.seat.req .halo{stroke:#7FA4F0;animation:halo 1s ease-out infinite}
.seat.open .u{fill:var(--lime);stroke:#EAF6BE}
.seat.open text{fill:var(--ink-900)}
.seat.open .halo{animation:halo 1.8s ease-out infinite}
.flash-plates .seat text{fill:var(--lime)}
.spot{fill:none;stroke:var(--lime);stroke-width:2;opacity:0;transition:transform .5s cubic-bezier(.3,.8,.3,1),opacity .3s}
.spot.on{opacity:.9}

/* Bandeau de contrôle sous le plan */
.ctrl{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;align-items:stretch}
.cell{background:var(--ink-600);border-radius:18px;padding:11px 16px;display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0}
.cell .k{font:500 10.5px/1 Roboto;letter-spacing:.18em;text-transform:uppercase;color:#98A0A4}
.cell .v{font-size:15px;font-weight:500;white-space:nowrap}
.cell .s{font-size:12px;color:#B0B6B9}
.spk{flex:2 1 270px}
.plate{display:inline-block;margin-top:2px;font:500 11px 'Roboto Mono',monospace;letter-spacing:.04em;background:#111;color:var(--lime);border-radius:6px;padding:3px 8px;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.meter{display:flex;gap:5px;align-items:center;margin:2px 0}
.meter i{width:14px;height:14px;border-radius:50%;background:transparent;border:2px solid #6A7073;transition:background .25s,border-color .25s}
.meter i.on{background:var(--lime);border-color:var(--lime)}
.btn-mute{flex:none;border-radius:999px;padding:0 20px;min-height:48px;align-self:center;background:#fff;color:var(--ink);font-weight:500;font-size:14px;display:inline-flex;gap:10px;align-items:center;transition:background .2s,color .2s}
.btn-mute svg{width:18px;height:18px}
.btn-mute[aria-pressed=true]{background:var(--amber);color:#2B2100}
.vol{flex:1 1 180px}
.vol input{width:100%;accent-color:var(--lime);margin:4px 0 0}

/* Équipements */
.eq{background:#fff;border-radius:28px;padding:20px 20px 12px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 20px -14px rgba(40,50,20,.35)}
.eq-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.eq-h h2{margin:0;font:500 11px/1 Roboto;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-500)}
.count{font:300 30px/1 Roboto;letter-spacing:-.02em}
.count small{font-size:15px;color:var(--gray-500);margin-left:2px}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:22px 1fr auto;column-gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--gray-200)}
.row:first-child{border-top:0}
.st{width:20px;height:20px;border-radius:50%;border:2px solid var(--gray-300);position:relative;transition:background .25s,border-color .25s}
.row[data-s=busy] .st{border-color:var(--lime);animation:pulse 0.9s ease-in-out infinite}
.row[data-s=ok] .st{background:var(--lime);border-color:var(--lime)}
.row[data-s=ok] .st::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:9px;border:solid var(--ink);border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.lab b{display:block;font-weight:500;font-size:14px;line-height:1.25}
.lab span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500);margin-top:1px}
.val{text-align:right;line-height:1.25;transition:opacity .25s}
.val b{display:block;font-weight:500;font-size:14px}
.val span{display:block;font-size:12px;color:var(--gray-500)}
.row[data-s=pending] .val,.row[data-s=busy] .val{opacity:.38}
.val.flip{animation:flip .5s ease}
.scr-list{grid-column:1/-1;list-style:none;margin:8px 0 0 34px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.scr-list li{display:flex;align-items:center;gap:7px;font-size:12px;background:var(--paper);border-radius:10px;padding:6px 9px;min-width:0}
.scr-list em{font:500 10px 'Roboto Mono',monospace;font-style:normal;color:var(--gray-500)}
.scr-list span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw{width:9px;height:9px;border-radius:3px;flex:none}
.sw.k-live{background:var(--lime)} .sw.k-doc{background:#4E79D8} .sw.k-agenda{background:#CFD3CA;box-shadow:inset 0 0 0 1px #aab} .sw.k-vote{background:var(--amber)} .sw.k-off{background:#9aa0a3} .sw.k-local{background:#58A6BC}

/* Journal */
.log{background:var(--ink-950);color:#D4D8D5;padding:12px 32px 14px;position:sticky;bottom:0;z-index:5;box-shadow:0 -14px 28px -18px rgba(0,0,0,.5)}
.log-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.log-h h3{margin:0;font:500 11px/1 Roboto;letter-spacing:.2em;text-transform:uppercase;color:#8B9296}
.log-h span{font-size:12px;color:#8B9296}
.log-body{height:104px;overflow:auto;font:400 12px/1.7 'Roboto Mono',ui-monospace,Menlo,monospace;scrollbar-width:thin;scrollbar-color:#3B4043 transparent}
.ln{display:grid;grid-template-columns:92px 44px minmax(0,300px) minmax(0,1fr) auto;gap:12px;white-space:nowrap;animation:lnIn .25s ease-out}
.ln .ts{color:#6F767A}
.ln .m{font-weight:500}
.m.post{color:var(--lime)} .m.put{color:var(--blue-soft)} .m.get{color:#B9BEC1} .m.evt{color:#E7B84A}
.ln .pa{color:#E8ECE9;overflow:hidden;text-overflow:ellipsis}
.ln .bd{color:#7F868A;overflow:hidden;text-overflow:ellipsis}
.ln .st{color:var(--lime);width:auto;height:auto;border:0;border-radius:0;position:static;text-align:right}
.ln .st.s5,.ln .st.s4{color:#E5675F}
.ln .st.sd{color:#8B9296}

@keyframes blink{from{opacity:1}to{opacity:.25}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(166,207,57,.55)}50%{box-shadow:0 0 0 6px rgba(166,207,57,0)}}
@keyframes halo{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes flip{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes lnIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.no-anim,.no-anim *{transition:none!important;animation:none!important}

/* Tablette et petits écrans */
@media (max-width:1180px){
  .sheet{grid-template-columns:minmax(0,1fr) 330px}
  .presets-wrap{grid-column:1/-1}
  .presets{flex-direction:row;flex-wrap:wrap}
  .preset{flex:1 1 200px}
  .hint,.last{display:none}
}
@media (max-width:820px){
  .sheet{grid-template-columns:minmax(0,1fr);padding:22px 16px 24px}
  .top,.log{padding-left:16px;padding-right:16px}
  .top{padding-bottom:44px}
  .room{font-size:25px}
  .preset{flex:1 1 calc(50% - 6px)}
  .ln{grid-template-columns:92px 44px minmax(0,1fr) auto}
  .ln .bd{display:none}
}
@media (prefers-reduced-motion:reduce){
  :root{--t-seat:.01s}
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important;transition-delay:0s!important}
}

/* Intégration dans la page d'accueil : version compacte (iframe 1440 x 900) */
.embed .top{padding:12px 28px 34px}
.embed .room{font-size:24px;margin-top:6px}
.embed .sheet{padding-top:20px;padding-bottom:14px}
.embed .hint,.embed .last{display:none}
.embed .log{padding-top:8px;padding-bottom:10px}
.embed .log-body{height:66px}
.embed .sheet{padding-bottom:10px}