/* Labo de démonstration publique (?demo=…) — voir labo-universel-demo.js */

/* Barre des trois figures, en haut */
.bm-demo-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
    padding: 7px 12px; background: #110f19; border-bottom: 2px solid #d4af37; flex: 0 0 auto; z-index: 6000;
}
.bm-demo-titre { color: #94a3b8; font: 700 .74rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; margin-inline-end: 4px; }
.bm-demo-btn {
    border: 2px solid #d4af37; background: transparent; color: #f1f5f9; border-radius: 999px;
    padding: 6px 16px; font: 800 .85rem system-ui, sans-serif; cursor: pointer; transition: background .15s, color .15s;
}
.bm-demo-btn:hover:not(:disabled) { background: rgba(212, 175, 55, .18); }
.bm-demo-btn.actif { background: #d4af37; color: #110f19; }
.bm-demo-btn:disabled { opacity: .6; cursor: wait; }
.bm-demo-aide { color: #94a3b8; font: 600 .74rem system-ui, sans-serif; }

/* Boutons GRISÉS (Animation, Variables, Propriétés) : visibles, jamais utilisables */
.bm-demo-grises { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed #334155; }
.bm-demo-grise { opacity: .38; cursor: not-allowed; filter: grayscale(1); }
body.bm-demo-lecture .sidebar-tools .bm-demo-grises { opacity: 1; }

/* Figure en lecture seule : tous les outils de construction sont grisés (on regarde, on écoute, on déplace les points libres) */
body.bm-demo-lecture .sidebar-tools > *:not(.sidebar-resizer):not(.bm-demo-grises) { opacity: .28; pointer-events: none; filter: grayscale(.6); }

/* Jamais de sélection de texte ni de glisser-déposer d'images dans la démo */
body.bm-demo { -webkit-user-select: none; user-select: none; }
body.bm-demo input, body.bm-demo textarea { -webkit-user-select: text; user-select: text; }

/* Outils d'administration qui n'ont rien à faire devant un visiteur (palette de traduction FR⇄AR…) */
body.bm-demo #_bm_trad { display: none !important; }