/* PPS Link · Visio « Établi » (CONCEPT-53, maquette validée le 05/11 : pilotage/maquettes/visio-v3/maquette-etabli.html).
   Cadre et bande au vert de la barre (--forest, celui de la marque) ; verre sombre translucide pour les commandes et les personnes ;
   citron pour ce qui est actif et qui parle ; rouge pour Raccrocher et micro ou caméra coupés. Transitions douces partout. */
#appel.etabli{background:var(--forest);padding:0;display:block}
#appel.etabli.avec-conv{right:min(400px,42vw)}
.eb{--doux:cubic-bezier(.2,.8,.2,1);--verre:rgba(12,17,14,.6);--verre-fort:rgba(12,17,14,.8);--clair:#eef2ec;--rouge:var(--danger-fond,#e5484d);position:absolute;inset:0;overflow:hidden;color:var(--clair);user-select:none}
.eb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.eb button{font:inherit;cursor:pointer;transition:background-color .25s var(--doux),color .25s var(--doux),box-shadow .3s var(--doux),transform .2s var(--doux)}
/* L'établi : laisse la place à la palette (bande à sa mesure) sauf en Bulles, où elle flotte sur le partage */
.eb-etabli{position:absolute;inset:0;display:flex;padding:10px;transition:padding .35s var(--doux)}
.eb.pal-bas .eb-etabli{padding-bottom:var(--bande,62px)}.eb.pal-haut .eb-etabli{padding-top:var(--bande,62px)}.eb.pal-gauche .eb-etabli{padding-left:var(--bande,62px)}.eb.pal-droite .eb-etabli{padding-right:var(--bande,62px)}
.eb.vue-bulles .eb-etabli{padding:10px}
/* La scène */
.eb-scene{flex:1;min-width:0;position:relative;border-radius:16px;overflow:hidden;background:#0d1410;display:grid;place-items:center}
.eb-grand{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s var(--doux)}
.eb-scene.a-video .eb-grand{opacity:1}.eb-scene.ecran .eb-grand{object-fit:contain;background:#0d1410}
.eb-foyer{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font-size:40px;font-weight:800;color:#17251b}
.eb-scene.a-video .eb-foyer{display:none}
.eb-salle{position:absolute;left:12px;top:12px;z-index:4;display:flex;align-items:center;gap:7px;max-width:calc(100% - 24px);padding:5px 12px 5px 10px;border-radius:999px;background:var(--verre-fort);backdrop-filter:blur(12px);font-size:13px;white-space:nowrap}
.eb-salle b{overflow:hidden;text-overflow:ellipsis}.eb-salle #appel-duree,.eb-salle .eb-nb{color:#c4d0c6;font-variant-numeric:tabular-nums}
.eb-salle i{width:7px;height:7px;border-radius:50%;background:var(--rouge);flex:none;animation:eb-pouls 1.8s infinite}
@keyframes eb-pouls{0%{box-shadow:0 0 0 0 rgba(229,72,77,.6)}70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.eb-titre-ecran{position:absolute;left:12px;bottom:12px;z-index:3;padding:4px 10px;border-radius:999px;background:var(--verre-fort);font-size:12px;font-weight:600}.eb-titre-ecran:empty{display:none}
/* Une personne : verre transparent, vidéo ou initiales, nom en pastille ; qui parle : lueur et onde */
.eb-p{position:relative;flex:1 1 0;min-height:64px;border-radius:14px;overflow:hidden;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 55%,rgba(255,255,255,.05));backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);
  outline:2px solid transparent;outline-offset:-2px;animation:eb-entre .5s var(--doux) both;animation-delay:calc(var(--k,0) * 70ms);
  transition:outline-color .35s,box-shadow .35s,width .3s var(--doux),height .3s var(--doux),transform .3s var(--doux)}
@keyframes eb-entre{from{opacity:0;transform:translateY(10px) scale(.94)}}
.eb-p:hover{transform:translateY(-2px)}
.eb-p.parle{outline-color:color-mix(in srgb,var(--accent) 85%,transparent);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 25%,transparent)}
.eb-p video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}.eb-p.cam video{opacity:1}
.eb-p[data-i="moi"] video{transform:scaleX(-1)}
.eb-av{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#17251b;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.eb-p.cam .eb-av{opacity:0}
.eb-p.parle .eb-av::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:eb-onde 1.6s ease-out infinite}
@keyframes eb-onde{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.eb-n{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--verre-fort);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden}
.eb-n span{overflow:hidden;text-overflow:ellipsis}.eb-n i{display:flex}.eb-n i[hidden]{display:none}.eb-n svg{width:13px;height:13px}.eb-coupe{color:#ff9fa2}.eb-main{color:var(--accent)/*barre-foncee*/}
/* Les mini-boutons des personnes (poignée, disposition, roue) */
.eb-m{width:28px;height:28px;border-radius:8px;border:0;display:grid;place-items:center;background:var(--verre);backdrop-filter:blur(8px);color:var(--clair);flex:none}
.eb-m:hover{background:var(--verre-fort)}.eb-m.on{background:var(--accent);color:var(--accent-ink)}.eb-m svg{width:16px;height:16px}
.eb-pt{width:4px;height:4px;border-radius:50%;background:#8c9a90;margin:0 3px;flex:none}
/* Groupe (Bulles) : déplacé d'un bloc, collé au coin, roue : taille, ligne ou colonne, pastilles */
.eb-groupe{--bw:90px;position:absolute;z-index:3;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:18px;background:rgba(12,17,14,.25);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.5);transition:left .35s var(--doux),top .35s var(--doux)}
.eb-groupe.tire,.eb-palette.tire{transition:none}
.eb-gr-tete{position:relative;display:flex;align-items:center;justify-content:space-between;gap:4px;cursor:grab;touch-action:none}
.eb-groupe.replie:not(.ligne) .eb-gr-tete{flex-direction:column}
.eb-bulles{display:flex;flex-direction:column;align-items:center;gap:6px}.eb-groupe.ligne .eb-bulles{flex-direction:row}
.eb-bulles .eb-p{flex:none;width:var(--bw);height:calc(var(--bw) * .66);min-height:0}
.eb-bulles .eb-av{width:calc(var(--bw) * .3);height:calc(var(--bw) * .3);font-size:calc(var(--bw) * .1)}
.eb-groupe.replie .eb-p{width:44px;height:44px;border-radius:50%}.eb-groupe.replie .eb-n{display:none}.eb-groupe.replie .eb-av{width:36px;height:36px;font-size:12px}
.eb-gr-menu,.eb-dispos{position:absolute;z-index:6;display:flex;align-items:center;gap:4px;padding:5px;border-radius:12px;background:var(--verre-fort);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.5);animation:eb-deplie .2s var(--doux)}
.eb-gr-menu{top:0;right:calc(100% + 8px)}.eb-gr-menu.a-droite{right:auto;left:calc(100% + 8px)}.eb-gr-menu.dessous{right:0;left:auto;top:calc(100% + 8px)}
.eb-gr-menu[hidden],.eb-dispos[hidden]{display:none}
@keyframes eb-deplie{from{opacity:0;transform:scale(.96)}}
.eb-dispo{position:relative;display:flex;margin:0 auto}
.eb-dispos{top:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.eb-groupe.replie:not(.ligne) .eb-dispo{margin:0}.eb-groupe.replie:not(.ligne) .eb-dispos{flex-direction:column;top:0;left:auto;right:calc(100% + 8px);transform:none}
/* Scène : la pile à droite, réglée en tirant la poignée */
.eb-poignee{flex:none;width:14px;cursor:col-resize;display:grid;place-items:center;touch-action:none}
.eb-poignee::before{content:"";width:4px;height:44px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .2s,height .2s}
.eb-poignee:hover::before,.eb-poignee.tire::before{background:var(--accent);height:80px}
.eb-pile{flex:none;min-width:0;display:flex;flex-direction:column;gap:8px;overflow:auto;transition:width .3s var(--doux)}.eb-pile.tire{transition:none}
.eb-pile-tete{flex:none;display:flex;justify-content:center;position:relative;z-index:5}
/* Galerie : la grille la plus grande possible */
.eb-galerie{flex:1;display:grid;gap:10px;place-content:center;min-width:0;min-height:0;overflow:hidden}.eb-galerie .eb-p{min-height:0}.eb-galerie .eb-av{width:72px;height:72px;font-size:24px}
.eb-gal-tete{position:absolute;top:18px;right:18px;z-index:4}.eb-gal-tete .eb-dispos{left:auto;right:0;transform:none}
/* La palette : verre, commandes carrées de 34 px, partout le même style */
.eb-palette{position:absolute;z-index:8;display:flex;align-items:center;gap:5px;padding:6px;border-radius:16px;background:rgba(12,17,14,.25);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.5);transition:left .35s var(--doux),top .35s var(--doux)}
.eb-palette.verticale{flex-direction:column}
.eb-c{position:relative;width:34px;height:34px;border-radius:10px;border:0;display:grid;place-items:center;background:var(--verre);backdrop-filter:blur(8px);color:var(--clair);flex:none}
.eb-c:hover{background:var(--verre-fort)}.eb-c svg{width:19px;height:19px}
.eb-c.on{background:var(--accent);color:var(--accent-ink)}.eb-c.coupe{background:rgba(122,31,35,.8);color:#ffd0d2}.eb-c.rouge{background:var(--rouge);color:#fff}
.eb-grip{cursor:grab;touch-action:none}
.eb-palette.reduite .plein{display:none}
.eb-info{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.85);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.eb-c:hover .eb-info,.eb-c:focus-visible .eb-info{opacity:1;transform:translateX(-50%)}
.eb-palette.haut .eb-info{bottom:auto;top:calc(100% + 8px)}
.eb-palette.verticale .eb-info{bottom:auto;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}.eb-palette.droite .eb-info{left:auto;right:calc(100% + 8px)}
.eb-cible{position:absolute;z-index:7;border:2px dashed color-mix(in srgb,var(--accent) 50%,transparent);border-radius:20px;opacity:0;pointer-events:none;transition:opacity .2s}.eb-cible.vue{opacity:1}
.eb-aide{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:9;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.85);color:#fff;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}.eb-aide.vue{opacity:1}
.eb .appel-ajout{z-index:9}
@media (max-width:760px){
  #appel.etabli.avec-conv{right:0;bottom:55%}
  .eb-palette .eb-pt,.eb-palette [data-eb=taille],.eb-palette [data-eb=plein]{display:none}
  .eb-c{width:36px;height:36px}.eb.vue-bulles .eb-etabli{padding:8px}
}
@media (prefers-reduced-motion:reduce){.eb-p,.eb-p.parle .eb-av::after,.eb-salle i{animation:none}}