/* optionnels/synchro-supabase/mode-demo.css — « Mode démo » (mode-demo.js) : flèches des autres membres, cercle d'un clic, bandeau
   Couleur de chaque membre : --demo-c, posée par mode-demo.js. Le calque ne reçoit aucun clic. Chargée après partage.css. */

 .demo-curseurs{position:fixed; inset:0; z-index:6000; pointer-events:none; overflow:hidden;}
 .demo-curseur{position:absolute; left:0; top:0; will-change:transform; transition:opacity .15s; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}
 .demo-curseur.is-cache{opacity:0;}
 .demo-curseur svg{position:absolute; left:-3px; top:-2px; width:22px; height:24px; fill:var(--demo-c); stroke:#fff; stroke-width:1.6; stroke-linejoin:round;}
 .demo-curseur-nom{position:absolute; left:16px; top:19px; padding:2px 8px 3px; border-radius:9px 9px 9px 3px; background:var(--demo-c); color:#fff;
 font:600 12px/1.3 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; white-space:nowrap; text-shadow:0 1px 1px rgba(0,0,0,.35);}
 .demo-clic{position:absolute; width:36px; height:36px; margin:-18px 0 0 -18px; box-sizing:border-box; border:3px solid var(--demo-c); border-radius:50%;
 opacity:0; animation:demoClic .7s ease-out;}
 @keyframes demoClic{from{opacity:.9; scale:.4;}to{opacity:0; scale:1.3;}}

 .demo-bandeau{position:fixed; left:50%; bottom:calc(46px * var(--ui-scale-factor)); transform:translateX(-50%); z-index:6001;
 display:flex; align-items:center; gap:calc(10px * var(--ui-scale-factor)); max-width:calc(100vw - 32px); box-sizing:border-box;
 padding:calc(6px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)) calc(13px * var(--ui-scale-factor));
 background:var(--surface); color:var(--text); border:calc(1px * var(--ui-scale-factor)) solid var(--border); border-radius:calc(20px * var(--ui-scale-factor));
 box-shadow:0 calc(8px * var(--ui-scale-factor)) calc(24px * var(--ui-scale-factor)) rgba(0,0,0,.4); font:500 calc(11px * var(--ui-scale-factor))/1.3 system-ui;}
 .demo-bandeau[hidden]{display:none;}
 .demo-bandeau-point{flex:none; width:round(calc(8px * var(--ui-scale-factor)),1px); height:round(calc(8px * var(--ui-scale-factor)),1px); border-radius:50%;
 background:#ff4d4f; box-shadow:0 0 0 round(calc(3px * var(--ui-scale-factor)),1px) rgba(255,77,79,.25);}
 .demo-bandeau-texte{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
 .demo-bandeau-btn{flex:none; border:0; border-radius:calc(14px * var(--ui-scale-factor)); padding:calc(4px * var(--ui-scale-factor)) calc(11px * var(--ui-scale-factor));
 background:var(--surface-2); color:var(--text); font:inherit; cursor:pointer;}
 .demo-bandeau-btn:hover{filter:brightness(1.15);}
 .demo-bandeau-btn.is-principal{background:var(--accent); color:#10141c;}
 body.view-agenda #btnModeDemo{display:none;}
 @media (prefers-reduced-motion:reduce){ .demo-clic{animation-duration:.01s;} }