/* ═══════════════════════════════════════════════════════════════════════════
   SALLE D'ANIMATION — styles communs à Evak et à E-Mediplex.

   Pendant du fichier /shared/host_room.js. Ces règles vivaient elles aussi en
   double, et elles avaient DÉJÀ divergé : la garde `:not(.has-share)` sur la
   règle « enfant unique » — celle qui déformait les vignettes pendant un partage
   — n'existait que côté Evak, et E-Mediplex n'y échappait que par l'ordre
   d'écriture de ses règles. Les replis téléphone manquaient aussi de ce côté.

   Tout est ici, une fois. Chaque application charge ce fichier depuis sa propre
   origine, puis ajoute après lui ce qui lui est propre.
   ═══════════════════════════════════════════════════════════════════════════ */

#hostRoom{position:fixed;inset:0;z-index:10001;background:#0b0f14;display:none;flex-direction:column;color:#fff}
  #hostRoom.show{display:flex}
  /* Neutralise la règle globale button{width:100%;margin:8px 0} de stylepages.css qui
     empilait la barre de contrôle verticalement. Les boutons qui fixent leur propre
     largeur (.call-btn 64px, .pj-cbtn 52px, etc.) restent prioritaires. */
  #hostRoom button, #hprejoin button, #pvCallOverlay button{width:auto;margin:0}
  #hostRoom .hr-top{padding:10px 18px 3px;text-align:center;flex:none}
  #hostRoom .hr-title{font-size:15px;font-weight:650}
  #hostRoom .hr-count{font-size:11.5px;opacity:.75;margin-top:1px}
  #hostStatus{position:absolute;top:50%;left:0;right:0;text-align:center;font-size:14px;opacity:.85;z-index:2}
  #hostRoom .hr-main{flex:1;display:flex;min-height:0;position:relative}
  #hostGrid{flex:1;display:grid;gap:10px;padding:12px;overflow:auto;align-content:center;justify-content:center;align-items:center;grid-template-columns:repeat(auto-fit,minmax(260px,680px))}
  .hr-tile{position:relative;background:#15181d;border-radius:12px;overflow:hidden;aspect-ratio:16/9;width:100%;max-height:calc(100dvh - 210px);margin:0 auto;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .hr-tile video{width:100%;height:100%;object-fit:cover;background:#15181d}
  .hr-tile.speaking{outline:3px solid #34d399;outline-offset:-3px}
  .hr-tile.pinned{grid-column:1/-1;max-height:72vh}
  #hostGrid.has-pin .hr-tile:not(.pinned){max-width:200px;max-height:120px}
  .hr-tile.self video{transform:scaleX(-1)}
  .hr-tile.share{grid-column:1/-1;aspect-ratio:16/9}
  .hr-tile.share video{object-fit:contain;background:#000}
  .hr-tile .hr-ph{position:absolute;font-size:40px;opacity:.5}
  .hr-name{position:absolute;left:6px;bottom:6px;font-size:11px;background:rgba(0,0,0,.55);padding:2px 8px;border-radius:8px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hr-tile .t-mic{position:absolute;right:6px;bottom:6px;font-size:11px;background:rgba(0,0,0,.6);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
  .hr-tile .t-hand{position:absolute;right:6px;top:6px;font-size:19px;filter:drop-shadow(0 1px 2px #000)}
  #hostRoom .hr-side{width:300px;max-width:82vw;background:#15181d;border-left:1px solid rgba(255,255,255,.1);display:none;flex-direction:column;flex:none}
  #hostRoom .hr-side.show{display:flex}
  #hostRoom .side-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:650;font-size:14px}
  #hostRoom .side-head button{background:none;border:none;color:#fff;font-size:17px;cursor:pointer;opacity:.7}
  #hostRoom .chat-msgs{flex:1;overflow:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
  #hostRoom .chat-m{font-size:13px;line-height:1.45;word-wrap:break-word}
  /* Arrivées et départs : plus discrets qu'un message, sans nom ni gras.
     Ce style n'existait que côté E-Mediplex — Evak s'appuyait sur une règle
     globale de sa page. Il vit ici désormais, pour les deux salles. */
  #hostRoom .chat-m.sys{opacity:.6;font-size:12px;padding-left:2px}
  #hostRoom .chat-m.sys .cm-x{color:var(--t3,#8b95a1)}
  #hostRoom .chat-m .cm-name{font-weight:700;font-size:11.5px;opacity:.8;margin-right:6px}
  #hostRoom .chat-input{display:flex;gap:6px;padding:10px;border-top:1px solid rgba(255,255,255,.1)}
  #hostRoom .chat-input input{flex:1;background:#0b0f14;border:1px solid rgba(255,255,255,.15);border-radius:20px;color:#fff;padding:8px 14px;font-size:13px;outline:none}
  #hostRoom .chat-input button{background:#10b981;border:none;color:#fff;border-radius:50%;width:38px;height:38px;font-size:15px;cursor:pointer;flex:none}
  #hostPeopleList{flex:1;overflow:auto;padding:6px 0}
  #hostRoom .pl-row{display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:13px}
  #hostRoom .pl-ic{margin-left:auto;display:flex;gap:6px;align-items:center;opacity:.9}
  #hostRoom .pl-mod{background:rgba(255,255,255,.1);border:none;color:#fff;border-radius:6px;padding:3px 7px;font-size:12px;cursor:pointer}
  #hostRoom .pl-mod:hover{background:rgba(239,68,68,.4)}
  #hostRoom .pl-hand{background:rgba(245,158,11,.25);color:#fbbf24;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700}
  /* Contrôles de modération au survol d'une vignette (façon Zoom) */
  #hostRoom .tile-mod{position:absolute;top:6px;left:6px;display:none;gap:6px;z-index:4}
  #hostRoom .hr-tile:hover .tile-mod{display:flex}
  #hostRoom .tmod-btn{background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;width:34px;height:34px;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  #hostRoom .tmod-btn:hover{background:#ef4444}
  #hostRoom .tmod-btn.tmod-on{background:rgba(52,211,153,.35)}
  #hostRoom .tmod-btn.tmod-on:hover{background:#10b981}
  #hostRoom .tmod-kick:hover,#hostRoom .pl-kick:hover{background:#dc2626}
  /* Partage d'écran : scène (grand) + bandeau de caméras (gauche ou bas, au choix) */
  #hostGrid.has-share{display:block;padding:8px;overflow:hidden}
  #hostRoom .hr-stage-wrap{height:100%;display:flex;gap:8px}
  #hostRoom .hr-stage{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;order:0}
  #hostRoom .hr-stage .hr-tile.share{width:100%;height:100%;max-height:none;aspect-ratio:auto;margin:0}
  #hostRoom .hr-strip{display:flex;gap:8px;overflow:auto;order:1}
  #hostRoom .hr-strip .hr-tile{margin:0;max-height:none;flex:0 0 auto}
  /* Bandeau en bas (par défaut si non 'left') : horizontal */
  #hostGrid.has-share .hr-stage-wrap{flex-direction:column}
  #hostGrid.has-share .hr-strip{flex-direction:row;height:132px;flex:0 0 auto;justify-content:center}
  #hostGrid.has-share .hr-strip .hr-tile{width:auto;height:100%;aspect-ratio:16/9}
  /* Bandeau à gauche : vertical */
  #hostGrid.has-share.strip-left .hr-stage-wrap{flex-direction:row}
  #hostGrid.has-share.strip-left .hr-strip{flex-direction:column;width:200px;height:100%;order:0}
  #hostGrid.has-share.strip-left .hr-stage{order:1}
  #hostGrid.has-share.strip-left .hr-strip .hr-tile{width:100%;height:auto;aspect-ratio:16/9}
  /* Demande de partage d'écran d'un participant */
  #hostShareReq{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:7;display:none;background:rgba(20,24,29,.97);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:11px 14px;align-items:center;gap:14px;max-width:calc(100vw - 24px)}
  #hostShareReq.show{display:flex}
  #hostShareReq .hsr-txt{font-size:13px}
  #hostShareReq .hsr-btns{display:flex;gap:8px}
  #hostShareReq .hsr-ok{background:#10b981;color:#04231a;border:none;border-radius:8px;padding:7px 12px;font-weight:700;font-size:13px;cursor:pointer}
  #hostShareReq .hsr-no{background:rgba(255,255,255,.16);color:#fff;border:none;border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}
  #hostReactBar{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:none;gap:4px;background:#1c2027;border:1px solid rgba(255,255,255,.15);border-radius:30px;padding:7px 10px;z-index:8}
  #hostReactBar.show{display:flex}
  #hostReactBar button{background:none;border:none;font-size:24px;cursor:pointer;padding:2px 4px;line-height:1}
  #hostReactFloat{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:7}
  #hostRoom .float-emo{position:absolute;bottom:70px;font-size:34px;animation:hfloatUp 3s ease-out forwards}
  @keyframes hfloatUp{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(-30px) scale(1)}100%{opacity:0;transform:translateY(-70vh) scale(1.1)}}
  #hostRoom .hr-ctrls{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding:7px 6px calc(9px + env(safe-area-inset-bottom,0px));background:#0e1218;border-top:1px solid rgba(255,255,255,.08);flex:none;position:relative}
  #hostRoom .hbtn{background:none;border:none;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:19px;padding:6px 9px;border-radius:10px;min-width:56px;position:relative}
  #hostRoom .hbtn:hover{background:rgba(255,255,255,.08)}
  #hostRoom .hbtn .zl{font-size:10px;opacity:.85}
  #hostRoom .hbtn.off{color:#f87171}
  #hostRoom .hbtn.act{color:#34d399}
  #hostRoom .hbtn.hang{color:#f87171}
  #hostRoom .hbtn .zbadge{position:absolute;top:1px;right:7px;background:#ef4444;color:#fff;font-size:9px;min-width:15px;height:15px;border-radius:8px;display:none;align-items:center;justify-content:center;padding:0 3px}
  #hostRoom .hbtn .zbadge.show{display:flex}
  #hostWaiting{position:absolute;top:12px;left:12px;z-index:6;max-width:270px;background:rgba(20,24,29,.94);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 12px;display:none}
  #hostWaiting.show{display:block}
  #hostWaiting .hw-title{font-size:12px;font-weight:700;margin-bottom:6px;opacity:.92}
  #hostWaiting .hw-row{display:flex;align-items:center;gap:8px;padding:5px 0}
  #hostWaiting .hw-name{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #hostWaiting .hw-btn{border:none;border-radius:8px;font-size:12px;padding:5px 9px;cursor:pointer}
  #hostWaiting .hw-ok{background:#10b981;color:#fff}
  #hostWaiting .hw-no{background:rgba(255,255,255,.16);color:#fff}
  @media (max-width:640px){ #hostRoom .hr-side{position:absolute;right:0;top:0;bottom:0;z-index:9} #hostRoom .hbtn{min-width:50px;font-size:18px;padding:5px 6px} #hostRoom .hbtn .zl{font-size:9px} }
  #hostRoom .hr-timer{font-size:11px;opacity:.7}
  #hostRoom.mini{inset:auto;right:14px;bottom:14px;width:270px;height:180px;border-radius:14px;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15)}
  #hostRoom.mini .hr-top,#hostRoom.mini .hr-side,#hostRoom.mini #hostReactBar,#hostRoom.mini #hostStatus,#hostRoom.mini #hostWaiting{display:none!important}
  #hostRoom.mini #hostGrid{padding:2px;gap:2px;grid-template-columns:1fr}
  #hostRoom.mini .hr-tile{max-height:none}
  #hostRoom.mini .hr-ctrls{padding:3px;gap:2px}
  #hostRoom.mini .hbtn{min-width:auto;padding:3px 5px;font-size:15px}
  #hostRoom.mini .hbtn .zl{display:none}
  #hostRoom.mini .hbtn:not(#hMute):not(#hCam):not(#hLeave):not(#hMin){display:none}
  .host-mini-expand{display:none;position:absolute;top:5px;right:5px;z-index:10;background:rgba(0,0,0,.55);border:none;color:#fff;border-radius:8px;width:26px;height:26px;font-size:14px;cursor:pointer}
  #hostRoom.mini .host-mini-expand{display:flex;align-items:center;justify-content:center}

  /* ══════════ REFONTE DE LA SALLE ANIMATEUR ══════════
     Ces règles viennent APRÈS les précédentes et les emportent à spécificité égale :
     la structure et le comportement ne changent pas, seule l'apparence est reprise. */
  #hostRoom{--rm-surf:#151a21;--rm-line:rgba(255,255,255,.09);
            --rm-accent:#2dd4bf;--rm-danger:#f87171}

  /* GRILLE — correction du CHEVAUCHEMENT.
     Les vignettes portaient `aspect-ratio:16/9` ET `max-height`. Dès que la hauteur
     déduite du rapport dépassait celle de la rangée, la vignette débordait de sa
     cellule et recouvrait sa voisine. On inverse la logique : la grille distribue la
     hauteur (`grid-auto-rows:minmax(0,1fr)`), la vignette remplit sa cellule, et c'est
     la VIDÉO qui s'adapte par `object-fit`. Un débordement devient impossible. */
  #hostGrid{min-height:0;gap:12px;padding:14px;align-items:stretch;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    grid-auto-rows:minmax(0,1fr);width:100%;max-width:1440px;margin:0 auto}
  .hr-tile{aspect-ratio:auto;width:100%;height:100%;min-height:0;max-height:none;
    margin:0;border-radius:16px;background:var(--rm-surf);
    box-shadow:0 2px 14px rgba(0,0,0,.35)}
  .hr-tile video{width:100%;height:100%;object-fit:cover}
  .hr-tile.share video{object-fit:contain;background:#000}
  .hr-tile.pinned{grid-column:1/-1;grid-row:span 2;max-height:none}
  #hostGrid.has-pin .hr-tile:not(.pinned){max-width:none;max-height:none}
  .hr-tile.speaking{outline:2px solid var(--rm-accent);outline-offset:-2px;
    box-shadow:0 0 0 4px rgba(45,212,191,.16),0 2px 14px rgba(0,0,0,.35)}
  /* Une seule vignette : on lui rend son rapport 16/9, sinon elle s'étire en bandeau. */
  #hostGrid:not(.has-share):has(.hr-tile:only-child) .hr-tile{aspect-ratio:16/9;height:auto;
    max-height:calc(100dvh - 210px);margin:0 auto}

  .hr-name{left:10px;bottom:10px;font-size:11.5px;font-weight:600;
    background:rgba(0,0,0,.48);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:4px 10px;border-radius:999px}

  /* BARRE D'OUTILS — verre dépoli, et l'état se lit à la couleur du fond. */
  .host-ctrls,.hr-ctrls{gap:6px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));
    background:rgba(11,14,19,.86);backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);border-top:1px solid var(--rm-line)}
  .hbtn{min-width:62px;padding:8px 10px;border-radius:14px;gap:4px;
    transition:background .15s ease,color .15s ease,transform .1s ease}
  .hbtn .zi{display:flex;align-items:center;justify-content:center;height:24px}
  .hbtn .zi svg{width:22px;height:22px;display:block}
  .hbtn .zl{font-size:10px;font-weight:600;opacity:.7}
  .hbtn:hover{background:rgba(255,255,255,.07)}
  .hbtn:active{transform:scale(.94)}
  .hbtn.off{color:var(--rm-danger);background:rgba(248,113,113,.13)}
  .hbtn.act{color:var(--rm-accent);background:rgba(45,212,191,.15)}
  .hbtn.hang{color:#fff;background:#ef4444}
  .hbtn.hang:hover{background:#dc2626}

  /* PANNEAUX et LISTE — mêmes surfaces que le reste. */
  #hostRoom .pl-row{padding:10px 16px;font-size:13.5px;gap:9px}
  #hostRoom .pl-av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;
    align-items:center;justify-content:center;color:#fff;font-size:11.5px;font-weight:750}
  #hostRoom .pl-mod{background:rgba(255,255,255,.09);border-radius:8px;padding:4px 8px;
    transition:background .15s ease}
  #hostRoom .pl-mod:hover{background:rgba(255,255,255,.18)}
  #hostRoom .pl-kick:hover{background:rgba(239,68,68,.45)}

  /* Boutons de modération posés sur la vignette : mêmes tracés que le reste. */
  .tmod-btn{display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:9px;padding:0;
    background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:none;color:#fff;cursor:pointer;transition:background .15s ease}
  .tmod-btn svg{width:16px;height:16px;display:block}
  .tmod-btn:hover{background:rgba(255,255,255,.22)}
  .tmod-kick:hover{background:rgba(239,68,68,.6)}
  .hr-tile .t-hand svg{width:20px;height:20px;color:#fbbf24;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
  .hr-tile .t-mic{width:26px;height:26px;background:rgba(0,0,0,.48);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .hr-tile .t-mic svg{width:14px;height:14px;display:block}
  .hr-tile .t-mic{color:rgba(255,255,255,.85)}
  .hr-tile .t-mic.off{color:#f87171;background:rgba(248,113,113,.24)}
  .hr-tile .hr-ph{opacity:1;font-size:0}
  .hr-ph .ph-av{width:76px;height:76px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:750;
    box-shadow:0 6px 22px rgba(0,0,0,.45)}
  #hostGrid.has-share .hr-strip .ph-av,#hostRoom.mini .ph-av{width:44px;height:44px;font-size:15px}

  /* BANDE DE CAMÉRAS EN BAS — elle passait SOUS la barre d'outils et se retrouvait
     coupée. La grille de partage est une colonne : on lui donne une hauteur explicite
     et `min-height:0`, sans quoi la bande déborde du conteneur au lieu de le partager. */
  #hostGrid.has-share{display:flex;padding:10px;overflow:hidden;min-height:0}
  #hostGrid.has-share .hr-stage-wrap{flex:1;min-height:0;display:flex;gap:10px;width:100%}
  #hostGrid.has-share .hr-stage{flex:1;min-width:0;min-height:0;display:flex;
    align-items:center;justify-content:center}
  #hostGrid.has-share .hr-stage .hr-tile{width:100%;height:100%;max-height:none}
  #hostGrid.has-share .hr-strip{flex:0 0 auto;display:flex;gap:8px;overflow:auto;
    height:118px;min-height:0}
  #hostGrid.has-share .hr-strip .hr-tile{flex:0 0 auto;width:auto;height:100%;
    aspect-ratio:16/9;max-height:none}
  #hostGrid.has-share.strip-left .hr-stage-wrap{flex-direction:row}
  #hostGrid.has-share.strip-left .hr-strip{flex-direction:column;width:180px;height:100%}
  #hostGrid.has-share.strip-left .hr-strip .hr-tile{width:100%;height:auto}
  #hostGrid.has-share:not(.strip-left) .hr-stage-wrap{flex-direction:column}
  /* TÉLÉPHONE — la salle d'animation n'avait aucun repli : sur un écran de 390 px,
     la colonne latérale de 180 px prenait la moitié de la largeur et il ne restait
     presque rien au document. Mêmes règles que la salle participant, aux mêmes
     seuils, pour que les deux se comportent pareil. */
  @media (max-width:760px){
    #hostGrid.has-share.strip-left .hr-stage-wrap{flex-direction:column}
    #hostGrid.has-share.strip-left .hr-stage{order:0}
    #hostGrid.has-share.strip-left .hr-strip{order:1;flex-direction:row;width:auto;height:104px}
    #hostGrid.has-share.strip-left .hr-strip .hr-tile{width:auto;height:100%}
  }
  /* Sous 430 px : la vignette passe à 66 px de haut, soit 117 px de large, et trois
     tiennent côte à côte au lieu d'une seule. Nom et pastilles réduits en proportion,
     sinon ils couvriraient le visage. */
  @media (max-width:430px){
    #hostGrid.has-share .hr-strip,
    #hostGrid.has-share.strip-left .hr-strip{height:66px}
    #hostGrid.has-share .hr-strip .hr-tile,
    #hostGrid.has-share.strip-left .hr-strip .hr-tile{width:auto;height:100%;border-radius:9px}
    #hostGrid.has-share .hr-strip .hr-name{left:4px;bottom:4px;font-size:8.5px;
      padding:1px 5px;border-radius:6px;max-width:82%}
    #hostGrid.has-share .hr-strip .t-mic{right:4px;bottom:4px;width:17px;height:17px}
    #hostGrid.has-share .hr-strip .t-mic svg{width:10px;height:10px}
    #hostGrid.has-share .hr-strip .t-hand{right:4px;top:4px}
    #hostGrid.has-share .hr-strip .t-hand svg{width:14px;height:14px}
    #hostGrid.has-share .hr-strip .ph-av{width:30px;height:30px;font-size:11px}
  }


  /* ── Liste des participants : information visible, actions repliées ── */
  #hostRoom .pl-row{display:flex;align-items:center;gap:9px;position:relative}
  #hostRoom .pl-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #hostRoom .pl-ic{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  #hostRoom .pl-mic{display:flex;color:rgba(255,255,255,.75)}
  #hostRoom .pl-mic.off{color:#f87171}
  #hostRoom .pl-hand{display:inline-flex;align-items:center;gap:3px;color:#fbbf24;
    background:rgba(251,191,36,.16);border-radius:999px;padding:2px 7px}
  #hostRoom .pl-hand svg{width:14px;height:14px;display:block}
  #hostRoom .pl-hand i{font-style:normal;font-size:10.5px;font-weight:800}
  #hostRoom .pl-ic svg,#hostRoom .pl-mic svg{width:15px;height:15px;display:block}
  #hostRoom .pl-more{flex:0 0 auto;width:28px;height:28px;border-radius:8px;border:none;
    cursor:pointer;background:rgba(255,255,255,.09);color:#fff;font-size:15px;line-height:1;
    transition:background .15s ease}
  #hostRoom .pl-more:hover{background:rgba(255,255,255,.2)}
  /* Les actions se déplient SOUS la ligne : les poser à côté du nom le rognerait à
     nouveau, ce qui était précisément le défaut à corriger. */
  #hostRoom .pl-acts{display:none;position:absolute;right:0;top:100%;z-index:5;gap:6px;
    padding:7px;border-radius:12px;background:#1c2027;
    border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.5)}
  #hostRoom .pl-row.open .pl-acts{display:flex}
  #hostRoom .pl-row.open{background:rgba(255,255,255,.05)}
  /* Arrêt de partage : toujours visible, jamais au survol. */
  .tile-mod-always{display:flex !important}
  #hostRoom .side-head .sh-t{display:flex;align-items:center;gap:9px}
  #hostRoom .side-head .sh-t svg{width:18px;height:18px;opacity:.75;flex:0 0 auto}
  #hostRoom .hw-title{display:flex;align-items:center;gap:8px}
  #hostRoom .hw-ic svg{width:16px;height:16px;display:block;opacity:.8}
  #hprejoin .pj-cbtn svg{width:22px;height:22px;display:block}
  #hprejoin .pj-ph svg{width:56px;height:56px;opacity:.4}
  /* Le dialogue de sortie est RATTACHÉ à la salle en plein écran : il doit donc
     couvrir son parent, quel qu'il soit. */
  #hostLeaveDlg{position:absolute;inset:0}
  #hostRoom #hostLeaveDlg{z-index:60}

#hprejoin{position:fixed;inset:0;z-index:10002;background:#0b0f14;display:none;flex-direction:column;overflow-y:auto;
    align-items:center;justify-content:center;color:#fff;padding:20px}
  #hprejoin.show{display:flex}
  #hprejoin .pj-card{width:min(720px,96vw);display:flex;flex-direction:column;gap:14px}
  #hprejoin h2{margin:0;font-size:18px;font-weight:660;text-align:center}
  #hprejoin .pj-prev{position:relative;width:100%;aspect-ratio:16/9;background:#15181d;border-radius:14px;
    overflow:hidden;display:flex;align-items:center;justify-content:center}
  #hprejoin .pj-prev video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
  #hprejoin .pj-ph{position:absolute;font-size:54px;opacity:.5}
  #hprejoin .pj-mini{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:2}
  #hprejoin .pj-cbtn{width:52px;height:52px;border-radius:50%;border:none;font-size:22px;cursor:pointer;
    background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center}
  #hprejoin .pj-cbtn.off{background:#fff;color:#111}
  #hprejoin select{width:100%;background:#15181d;border:1px solid rgba(255,255,255,.15);
    border-radius:10px;color:#fff;padding:11px 12px;font-size:14px;outline:none}
  #hprejoin .pj-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #hprejoin .pj-actions{display:flex;gap:10px;justify-content:center;margin-top:4px}
  #hprejoin .pj-join{background:#10b981;color:#000;border:none;border-radius:12px;padding:13px 26px;font-size:15px;font-weight:700;cursor:pointer}
  #hprejoin .pj-cancel{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:12px;padding:13px 20px;font-size:15px;cursor:pointer}
  @media(max-width:560px){ #hprejoin .pj-row{grid-template-columns:1fr} }
  .grp-dev{width:100%;background:#0b0f14;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fff;padding:9px 10px;font-size:13px;outline:none}

#hostLeaveDlg{position:fixed;inset:0;z-index:10060;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:20px}
  #hostLeaveDlg.show{display:flex}
  #hostLeaveDlg .hld-card{background:#fff;color:#1f2937;border-radius:16px;max-width:440px;width:100%;padding:24px 26px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
  #hostLeaveDlg .hld-title{font-size:19px;font-weight:600;margin-bottom:8px}
  #hostLeaveDlg .hld-sub{font-size:14px;color:#5f6368;line-height:1.5;margin-bottom:20px}
  #hostLeaveDlg button{width:auto;margin:0}
  #hostLeaveDlg .hld-btns{display:flex;gap:22px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
  #hostLeaveDlg .hld-btns button{background:none;border:none;font-size:15px;font-weight:600;cursor:pointer;padding:6px 4px}
  #hostLeaveDlg .hld-leave{color:#1a73e8}
  #hostLeaveDlg .hld-end{color:#d93025}
  #hostLeaveDlg .hld-cancel{display:block;margin-top:14px;margin-left:auto;background:none;border:none;color:#5f6368;font-size:13px;cursor:pointer}

  /* ══ TÉLÉPHONE — même mise en page que la salle participant ═══════════════
     La salle d'animation gardait sur téléphone sa disposition d'ordinateur :
     discussion en panneau latéral occupant la moitié de l'écran, visages empilés
     en colonne, barre de commandes sur trois rangées. L'animateur voyait donc
     bien moins que ses participants — alors que c'est lui qui doit tout suivre.

     Rien ne se recouvre ici non plus. De haut en bas : les visages sur une rangée
     mince, la scène sur tout ce qui reste, les commentaires en dessous, la saisie,
     les commandes. Les sélecteurs sont ceux de la salle d'animation (`hr-`), la
     géométrie est celle du participant, aux mêmes seuils. */
  .hbtn-more{display:none}
  @media (max-width:640px){
    #hostRoom .hr-top{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:2px}
    #hostRoom .hr-title{font-size:13.5px}
    #hostRoom .hr-count{font-size:10.5px}
    #hostRoom .hr-main{flex-direction:column}

    /* ── Partage : la scène prend tout ce que la rangée de visages lui laisse ── */
    #hostGrid.has-share{padding:4px 4px 0;min-height:0}
    #hostGrid.has-share .hr-stage-wrap{flex-direction:column;gap:4px;min-height:0}
    #hostGrid.has-share .hr-stage{order:1;flex:1;min-height:0}
    #hostGrid.has-share .hr-stage .hr-tile{width:100%;height:100%;max-height:none;border-radius:4px}
    #hostGrid.has-share .hr-stage .hr-tile video{object-fit:contain}

    /* ── Les visages : une rangée mince alignée en haut, non une colonne ── */
    #hostGrid.has-share .hr-strip,
    #hostGrid.has-share.strip-left .hr-strip{position:static;order:0;
      flex-direction:row;width:auto;height:54px;max-height:54px;flex:0 0 auto;
      gap:3px;justify-content:center;overflow-x:auto;overflow-y:hidden;padding:0}
    #hostGrid.has-share .hr-strip .hr-tile,
    #hostGrid.has-share.strip-left .hr-strip .hr-tile{width:auto;height:100%;
      aspect-ratio:16/9;border-radius:4px;flex:0 0 auto;box-shadow:none}
    #hostGrid.has-share .hr-strip .hr-name{font-size:8px;left:3px;bottom:3px;
      padding:1px 4px;border-radius:5px;max-width:86%}
    #hostGrid.has-share .hr-strip .t-mic{right:3px;bottom:3px;width:15px;height:15px}
    #hostGrid.has-share .hr-strip .t-mic svg{width:9px;height:9px}
    #hostGrid.has-share .hr-strip .t-hand{right:3px;top:3px}
    #hostGrid.has-share .hr-strip .t-hand svg{width:13px;height:13px}
    #hostGrid.has-share .hr-strip .ph-av{width:26px;height:26px;font-size:10px}

    /* ── Commentaires : une bande à part, SOUS la scène — jamais par-dessus ── */
    #hostRoom .hr-side#hostChat{display:flex;position:static;width:auto;max-width:none;
      flex:0 0 auto;height:auto;background:none;border:none;
      border-top:1px solid rgba(255,255,255,.07)}
    #hostRoom #hostChat .side-head{display:none}
    #hostRoom #hostChat .chat-msgs{height:19vh;flex:0 0 auto;padding:6px 12px 2px;
      gap:1px;justify-content:flex-end}
    /* Rien que le texte : le nom porte la couleur, le message reste blanc. */
    #hostRoom #hostChat .chat-m{background:none;border-radius:0;padding:2px 0;display:block;
      text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.8)}
    #hostRoom #hostChat .chat-m .cm-name{display:block;font-size:12px;font-weight:700;
      color:rgba(255,255,255,.62);letter-spacing:.1px;margin-bottom:1px;opacity:1}
    #hostRoom #hostChat .chat-m .cm-x{display:block;color:#fff;font-size:14px;
      font-weight:700;line-height:1.32}
    #hostRoom #hostChat .chat-m.sys .cm-x{font-size:12.5px;font-weight:600;
      color:rgba(255,255,255,.55)}

    /* ── Saisie ── */
    #hostRoom #hostChat .chat-input{border-top:none;padding:6px 10px 8px;gap:8px}
    #hostRoom #hostChat .chat-input input{background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 15px;
      font-size:16px}   /* 16 px : en dessous, iOS zoome la page à la mise au point */
    #hostRoom #hostChat .chat-input button{border-radius:50%;width:40px;height:40px;flex:0 0 auto}

    /* ── Barre : une rangée, icônes seules, le reste derrière « ⋯ » ──
       L'animateur a dix-sept commandes : toutes sur une ligne seraient illisibles.
       Les six qu'on utilise pendant qu'on parle restent visibles ; la modération,
       qu'on ouvre par décision et non par réflexe, passe derrière le bouton. */
    #hostRoom .hr-ctrls{flex-wrap:nowrap;justify-content:space-between;gap:0;
      padding:5px 8px calc(6px + env(safe-area-inset-bottom,0px))}
    #hostRoom .hr-ctrls .hbtn{min-width:0;flex:1 1 0;padding:7px 2px;font-size:17px}
    #hostRoom .hr-ctrls .hbtn .zl{display:none}
    #hostRoom .hr-ctrls .hbtn .zi svg{width:22px;height:22px}
    #hostRoom .hbtn-more{display:flex}
    #hostRoom .hr-ctrls #hPeople,
    #hostRoom .hr-ctrls #hShareAll,
    #hostRoom .hr-ctrls #hLock,
    #hostRoom .hr-ctrls #hView,
    #hostRoom .hr-ctrls #hStrip,
    #hostRoom .hr-ctrls #hSettings,
    #hostRoom .hr-ctrls #hMuteAll,
    #hostRoom .hr-ctrls #hLowerHands,
    #hostRoom .hr-ctrls #hBlur,
    #hostRoom .hr-ctrls #hFull,
    #hostRoom .hr-ctrls #hMin{display:none}
    #hostRoom.more-open .hr-ctrls{flex-wrap:wrap;justify-content:center}
    #hostRoom.more-open .hr-ctrls .hbtn{flex:0 0 auto;min-width:62px;padding:7px 6px}
    #hostRoom.more-open .hr-ctrls .hbtn .zl{display:block;font-size:9.5px}
    #hostRoom.more-open .hr-ctrls #hPeople,
    #hostRoom.more-open .hr-ctrls #hShareAll,
    #hostRoom.more-open .hr-ctrls #hLock,
    #hostRoom.more-open .hr-ctrls #hView,
    #hostRoom.more-open .hr-ctrls #hStrip,
    #hostRoom.more-open .hr-ctrls #hSettings,
    #hostRoom.more-open .hr-ctrls #hMuteAll,
    #hostRoom.more-open .hr-ctrls #hLowerHands,
    #hostRoom.more-open .hr-ctrls #hBlur,
    #hostRoom.more-open .hr-ctrls #hFull,
    #hostRoom.more-open .hr-ctrls #hMin{display:flex}

    /* La salle d'attente reste par-dessus : admettre quelqu'un ne peut pas attendre. */
    #hostWaiting{top:6px;left:6px;max-width:calc(100vw - 12px);z-index:12}
    #hostRoom .hr-side#hostPeople{position:absolute;right:0;top:0;bottom:0;z-index:9;max-width:88vw}
  }