/* MyVisio — tableau vert, craie, et le code affiché comme un repère de câble */
:root{
  --board:#22362f;      /* tableau vert */
  --board-2:#2b4239;
  --board-3:#36503f;
  --chalk:#eceee4;      /* craie */
  --chalk-dim:#a9b4a6;
  --tag:#f1c618;        /* repère jaune */
  --ink:#16160f;
  --live:#e0483c;       /* coupé / quitter */
  --neutral:#6fa8e8;    /* bleu "neutre" : le prof */
  --radius-s:6px;
  --radius-m:12px;
  font-family:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--board);color:var(--chalk);font-size:16px;line-height:1.45}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--tag);outline-offset:2px}
[hidden]{display:none !important}

/* rôle */
body:not(.teacher) .teacher-only{display:none !important}
body:not(.student) .student-only{display:none !important}

/* ---------- boutons ---------- */
.btn{border:0;border-radius:var(--radius-s);padding:.8rem 1.1rem;font-weight:700;width:100%}
.btn-main{background:var(--tag);color:var(--ink)}
.btn-main:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent;border:2px solid var(--chalk-dim);color:var(--chalk)}
.btn-ghost:hover{border-color:var(--chalk)}
.btn-sm{width:auto;padding:.55rem .9rem}
.btn:disabled{opacity:.55;cursor:wait}
.chip{background:var(--board-3);border:0;border-radius:999px;padding:.35rem .8rem;font-size:.9rem}
.chip:hover{background:#41604b}

/* ---------- accueil ---------- */
.home{max-width:920px;margin:0 auto;padding:clamp(1.5rem,5vw,4rem) 1.25rem}
.home-head h1{margin:0;font-size:clamp(2.6rem,7vw,4.2rem);letter-spacing:-.02em;line-height:1}
.home-head p{margin:.6rem 0 2.2rem;color:var(--chalk-dim);font-size:1.15rem}
.doors{display:grid;grid-template-columns:1.25fr 1fr;gap:1.5rem;align-items:start}
.door{display:flex;flex-direction:column;gap:.45rem;padding:1.5rem}
.door h2{margin:0;font-size:1.45rem}
.door .hint{margin:0 0 .8rem;color:var(--chalk-dim)}
.door label{font-size:.92rem;color:var(--chalk-dim);margin-top:.4rem}
.door input{background:var(--board-2);border:2px solid var(--board-3);border-radius:var(--radius-s);padding:.7rem .8rem}
.door input:focus{border-color:var(--tag);outline:none}
.door .btn{margin-top:1rem}
.door label.check{display:flex;gap:.5rem;align-items:center;color:var(--chalk);margin-top:.7rem}
.door label.check input{width:1.1rem;height:1.1rem;accent-color:var(--tag)}
.door .legal{margin:.5rem 0 0;font-size:.8rem;color:var(--chalk-dim)}
.door .pass-wrap{display:flex;flex-direction:column;gap:.45rem}
.door-student{background:var(--board-2);border-radius:var(--radius-m)}
.door-teacher{border:2px dashed var(--board-3);border-radius:var(--radius-m)}
.code-input{
  background:var(--tag) !important;color:var(--ink);border-color:var(--tag) !important;
  font-size:2rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;text-align:center;
  padding:.55rem .5rem .55rem .85rem !important;
}
.code-input::placeholder{color:rgba(22,22,15,.28)}
.home-msg{margin:1.5rem 0 0;padding:.8rem 1rem;border-left:4px solid var(--live);background:rgba(224,72,60,.12);border-radius:0 var(--radius-s) var(--radius-s) 0}
.home-msg.info{border-left-color:var(--tag);background:rgba(241,198,24,.1)}
.home-foot{margin-top:2.5rem;color:var(--chalk-dim);font-size:.9rem}
@media (max-width:720px){.doors{grid-template-columns:1fr}}

/* ---------- salle ---------- */
.room{display:flex;flex-direction:column;height:100vh;height:100dvh}
.topbar{display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;background:var(--board-2);flex-wrap:wrap}
.code-plate{display:flex;align-items:stretch;border-radius:4px;overflow:hidden;box-shadow:0 0 0 2px var(--ink) inset}
.code-plate-label{background:var(--ink);color:var(--tag);font-size:.75rem;padding:.35rem .5rem;display:flex;align-items:center}
.code-plate strong{background:var(--tag);color:var(--ink);font-size:1.35rem;letter-spacing:.25em;padding:.1rem .4rem .1rem .65rem}
.status{color:var(--chalk-dim);font-size:.9rem}
.status.bad{color:var(--live)}
.spacer{flex:1}
.count{font-size:.9rem;color:var(--chalk-dim)}
.badge{background:var(--live);color:#fff;border-radius:999px;font-size:.75rem;padding:0 .4rem;margin-left:.2rem}
.side-toggle{display:none}

.layout{flex:1;display:grid;grid-template-columns:1fr 320px;min-height:0}
.stage{position:relative;min-height:0;padding:.75rem;overflow:auto}
.side{display:flex;flex-direction:column;min-height:0;background:var(--board-2);border-left:1px solid var(--board-3)}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .side-toggle{display:inline-block}
  .side{position:fixed;inset:auto 0 64px 0;height:60vh;border-left:0;border-top:2px solid var(--tag);z-index:20;transform:translateY(110%);transition:transform .2s}
  .side.is-open{transform:none}
}

/* tuiles vidéo */
.tile{position:relative;background:#111a16;border-radius:var(--radius-s);overflow:hidden;aspect-ratio:4/3}
.tile video{width:100%;height:100%;object-fit:cover;display:block;background:#111a16}
.tile.self video{transform:scaleX(-1)}
.tile.self.sharing video{transform:none;object-fit:contain}
.tile .label{position:absolute;left:.4rem;bottom:.4rem;right:.4rem;display:flex;gap:.35rem;align-items:center;font-size:.85rem}
.tile .nm{background:rgba(17,26,22,.78);padding:.1rem .45rem;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .st{background:rgba(17,26,22,.78);padding:.1rem .35rem;border-radius:4px}
.tile .st:empty{display:none}
.tile .hand{font-size:1.1rem}
.tile.raised{box-shadow:0 0 0 3px var(--tag)}
.tile.muted .nm::after{content:" 🔇"}
.tile .tools{position:absolute;top:.35rem;right:.35rem;display:flex;gap:.3rem;opacity:0;transition:opacity .15s}
.tile:hover .tools,.tile:focus-within .tools{opacity:1}
.tile .tools button{background:rgba(17,26,22,.85);border:0;border-radius:4px;padding:.2rem .45rem;font-size:.85rem}
.tile .tools button:hover{background:var(--board-3)}
@media (hover:none){.tile .tools{opacity:1}}

/* prof : grille d'élèves */
.stage.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem;align-content:start}
.stage.grid .tile.self{grid-column:span 2;grid-row:span 2}
@media (max-width:520px){.stage.grid .tile.self{grid-column:span 1;grid-row:span 1}}

/* élève : le prof en grand */
.stage.solo{display:flex;align-items:center;justify-content:center;background:#111a16;padding:0}
.stage.solo .main{width:100%;height:100%;object-fit:contain;background:#111a16}
.stage.solo .waiting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--chalk-dim);font-size:1.1rem;text-align:center;padding:1rem}
.stage.solo .pip{position:absolute;right:.75rem;bottom:.75rem;width:clamp(110px,18vw,200px);aspect-ratio:4/3;border:2px solid var(--board-3);z-index:2}
.stage.solo .teacher-name{position:absolute;left:.75rem;top:.75rem;background:rgba(17,26,22,.8);padding:.2rem .6rem;border-radius:4px;border-left:3px solid var(--neutral)}

/* onglets / chat */
.tabs{display:flex;border-bottom:1px solid var(--board-3)}
.tab{flex:1;background:none;border:0;padding:.7rem;color:var(--chalk-dim);border-bottom:3px solid transparent}
.tab.is-active{color:var(--chalk);border-bottom-color:var(--tag)}
.pane{flex:1;display:flex;flex-direction:column;min-height:0}
.messages{list-style:none;margin:0;padding:.75rem;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.55rem}
.messages li{max-width:92%;overflow-wrap:anywhere}
.messages .who{font-size:.8rem;color:var(--chalk-dim)}
.messages .who time{margin-left:.35rem;opacity:.7}
.messages .txt{background:var(--board-3);padding:.4rem .65rem;border-radius:var(--radius-s);display:inline-block;white-space:pre-wrap}
.messages li.teacher .who b{color:var(--neutral)}
.messages li.teacher .txt{background:#28405a}
.messages li.me{align-self:flex-end;text-align:right}
.messages li.me .txt{background:var(--tag);color:var(--ink)}
.messages .empty{color:var(--chalk-dim);font-size:.9rem;align-self:center;margin-top:1rem}
.chat-form{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--board-3)}
.chat-form input{flex:1;min-width:0;background:var(--board);border:2px solid var(--board-3);border-radius:var(--radius-s);padding:.5rem .65rem}
.chat-form input:focus{border-color:var(--tag);outline:none}

.people{list-style:none;margin:0;padding:.5rem .75rem;overflow-y:auto}
.people li{display:flex;align-items:center;gap:.5rem;padding:.45rem 0;border-bottom:1px solid var(--board-3)}
.people li .n{flex:1}
.people li.teacher .n{color:var(--neutral);font-weight:700}
.people li.raised .n::before{content:"✋ "}

/* barre de commandes */
.controls{display:flex;justify-content:center;gap:.5rem;padding:.55rem;background:var(--board-2);border-top:1px solid var(--board-3);flex-wrap:wrap;position:relative;z-index:21}
.ctl{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:84px;background:var(--board-3);border:0;border-radius:var(--radius-s);padding:.4rem .6rem}
.ctl .ico{font-size:1.25rem;line-height:1.1}
.ctl .lbl{font-size:.78rem}
.ctl:hover{background:#41604b}
.ctl.off{background:var(--live);color:#fff}
.ctl.on{background:var(--tag);color:var(--ink)}
.ctl-leave{background:transparent;box-shadow:inset 0 0 0 2px var(--live)}
.ctl-leave:hover{background:var(--live);color:#fff}
@media (max-width:520px){.ctl{min-width:0;flex:1}.ctl .lbl{font-size:.68rem}}

/* déblocage son / toasts */
.unlock{position:fixed;inset:0;background:rgba(17,26,22,.75);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
.unlock .btn{width:auto;font-size:1.1rem;padding:1rem 1.5rem}
.toasts{position:fixed;top:.75rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:.4rem;z-index:60;pointer-events:none;width:min(92vw,420px)}
.toast{background:var(--chalk);color:var(--ink);padding:.6rem .9rem;border-radius:var(--radius-s);box-shadow:0 4px 14px rgba(0,0,0,.35);text-align:center}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* =========================================================
   v2 : salle d'attente, menu Classe, bandeau, fichiers,
   tableau blanc, mise en avant, sondage
   ========================================================= */
.chip-main{background:var(--tag);color:var(--ink);font-weight:700}
.chip-main:hover{background:var(--tag);filter:brightness(1.07)}
.chip-wait{background:var(--tag);color:var(--ink);font-weight:700}

/* bandeau sous la barre du haut */
.banner{background:#3b1d1a;color:#fff;padding:.4rem .9rem;font-size:.92rem;display:flex;flex-direction:column;gap:.25rem}
.banner .dot{display:inline-block;width:.65rem;height:.65rem;border-radius:50%;background:var(--live);margin-right:.3rem;vertical-align:middle;animation:blink 1.2s steps(2) infinite}
.banner .chip{margin-left:.4rem;padding:.15rem .6rem}
@keyframes blink{50%{opacity:.25}}

/* barre de commandes */
.ctl.rec{background:var(--live);color:#fff}
.ctl.blocked{opacity:.7}
.ctl:disabled{opacity:.45;cursor:not-allowed}
.menu-anchor{position:relative;display:flex}
.class-menu{position:absolute;bottom:calc(100% + .5rem);right:0;min-width:300px;background:var(--board-2);border:1px solid var(--board-3);border-radius:var(--radius-m);padding:.35rem;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:40;display:flex;flex-direction:column}
.class-menu button{background:none;border:0;text-align:left;padding:.55rem .7rem;border-radius:var(--radius-s)}
.class-menu button:hover{background:var(--board-3)}
.class-menu button[aria-checked="true"]{color:var(--tag);font-weight:700}
.class-menu hr{border:0;border-top:1px solid var(--board-3);margin:.3rem 0}
@media (max-width:520px){.class-menu{right:auto;left:50%;transform:translateX(-50%);min-width:min(92vw,300px)}}

/* chat : liens et fichiers */
.messages .txt a{color:inherit;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.messages .txt .file{background:none;border:0;padding:0;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;text-align:left}
.attach{background:var(--board-3);border:0;border-radius:var(--radius-s);padding:0 .6rem;font-size:1.1rem}
.attach:hover{background:#41604b}
.chat-form input:disabled{opacity:.5}

/* participants : salle d'attente */
.people .people-head{color:var(--chalk-dim);font-size:.85rem;border-bottom:0;padding-top:.8rem}
.people .people-head .n{color:var(--tag);font-weight:700;font-size:.95rem}
.people .waiting-row{background:rgba(241,198,24,.08);padding-left:.4rem;padding-right:.4rem;border-radius:var(--radius-s)}
.people li{flex-wrap:wrap}

/* tuiles : mise en avant, parole */
.tile.spot{box-shadow:0 0 0 3px var(--neutral)}
.tile.spot .nm::before{content:"⭐ "}
.tile .tools .b-talk.on{background:var(--tag);color:var(--ink)}
.stage.solo .teacher-name.is-spot{border-left-color:var(--tag)}

/* tableau blanc (prof) */
.board{position:absolute;inset:0;z-index:6;background:var(--board);display:flex;flex-direction:column;gap:.5rem;padding:.6rem}
.board-tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.bt-group{display:flex;gap:.3rem;background:var(--board-2);padding:.25rem;border-radius:var(--radius-s)}
.board-tools button{background:var(--board-3);border:0;border-radius:4px;padding:.3rem .6rem;font-size:.85rem}
.board-tools button.is-active{background:var(--tag);color:var(--ink)}
.board-tools .sw{width:1.9rem;height:1.9rem;padding:0;background:var(--c);border:3px solid var(--board-2)}
.board-tools .sw.is-active{background:var(--c);border-color:var(--tag)}
.bt-hint{color:var(--chalk-dim);font-size:.85rem}
.board-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.board-wrap canvas{max-width:100%;max-height:100%;background:#fff;border-radius:4px;touch-action:none;cursor:crosshair;box-shadow:0 0 0 2px var(--board-3)}

/* dialogue sondage */
.dlg{background:var(--board-2);color:var(--chalk);border:1px solid var(--board-3);border-radius:var(--radius-m);padding:1.25rem;width:min(92vw,480px)}
.dlg::backdrop{background:rgba(17,26,22,.7)}
.dlg h3{margin:0 0 .8rem;font-size:1.3rem}
.dlg form{display:flex;flex-direction:column;gap:.5rem}
.dlg label{font-size:.92rem;color:var(--chalk-dim)}
.dlg input[type=text],.dlg #pollQ{background:var(--board);border:2px solid var(--board-3);border-radius:var(--radius-s);padding:.6rem .7rem}
.dlg #pollQ:focus{border-color:var(--tag);outline:none}
.dlg .kinds{border:0;padding:0;margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.dlg .kinds legend{font-size:.92rem;color:var(--chalk-dim);margin-bottom:.35rem;padding:0}
.dlg .kinds label{color:var(--chalk);display:flex;align-items:center;gap:.35rem}
.dlg .kinds input{accent-color:var(--tag)}
.dlg-hint{font-size:.85rem;color:var(--chalk-dim);margin:.3rem 0}
.dlg-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.4rem}

/* carte sondage (prof et élèves) */
.poll-card{position:fixed;left:1rem;bottom:84px;width:min(92vw,360px);max-height:60vh;overflow:auto;background:var(--board-2);border:2px solid var(--tag);border-radius:var(--radius-m);padding:.9rem;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:.5rem}
.poll-q{font-weight:700;font-size:1.05rem}
.poll-answers{display:flex;flex-wrap:wrap;gap:.45rem}
.poll-btn{flex:1;min-width:70px;background:var(--board-3);border:2px solid transparent;border-radius:var(--radius-s);padding:.7rem .5rem;font-weight:700;font-size:1.05rem}
.poll-btn:hover{border-color:var(--chalk-dim)}
.poll-btn.is-mine{background:var(--tag);color:var(--ink)}
.poll-note{font-size:.85rem;color:var(--chalk-dim)}
.poll-bar{display:grid;grid-template-columns:3.2rem 1fr 2rem;align-items:center;gap:.5rem}
.poll-bar .pb-track{height:.9rem;background:var(--board);border-radius:999px;overflow:hidden}
.poll-bar .pb-fill{display:block;height:100%;background:var(--neutral);transition:width .3s}
.poll-bar.is-mine .pb-fill{background:var(--tag)}
.poll-bar .pb-n{text-align:right;font-weight:700}
.poll-who{font-size:.8rem;color:var(--chalk-dim);margin:-.25rem 0 .2rem 3.7rem}
.poll-foot{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.85rem;color:var(--chalk-dim);margin-top:.2rem}
.poll-foot span{flex:1 1 100%}
@media (max-width:860px){.poll-card{bottom:76px;left:50%;transform:translateX(-50%)}}

/* =========================================================
   v3 : images collées, miniatures, visionneuse, glisser-déposer
   ========================================================= */
.messages .txt.has-thumb{padding:.3rem;background:var(--board-3)}
.messages li.me .txt.has-thumb{background:var(--tag)}
.messages .thumb{display:block;background:none;border:0;padding:0;cursor:zoom-in}
.messages .thumb img{display:block;max-width:100%;max-height:180px;min-width:60px;min-height:40px;border-radius:4px;background:var(--board)}
.messages .thumb img.broken{min-height:0;padding:.4rem;color:var(--chalk-dim);font-size:.85rem}
.side.drop{box-shadow:inset 0 0 0 3px var(--tag)}
.side.drop .messages{background:rgba(241,198,24,.06)}
.pd-preview{display:block;max-width:100%;max-height:50vh;margin:.2rem auto;border-radius:6px;background:#fff}
.pd-name{text-align:center;overflow-wrap:anywhere}
.img-viewer{position:fixed;inset:0;z-index:70;background:rgba(10,16,13,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:1rem;cursor:zoom-out}
.img-viewer img{max-width:100%;max-height:calc(100% - 3.5rem);object-fit:contain;border-radius:4px;background:#fff}
.iv-bar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:center;color:var(--chalk)}
.iv-hint{color:var(--chalk-dim);font-size:.85rem}

/* v4 : image collée au tableau */
.board.drop .board-wrap canvas{box-shadow:0 0 0 4px var(--tag)}
.dlg-actions #pdBoard:not([hidden]) + #pdSend{background:transparent;color:var(--chalk);box-shadow:inset 0 0 0 2px var(--chalk-dim)}