/* Consigne de l'élève (bm-consigne-eleve.js) — une ligne qui FLOTTE sur le haut de la zone de dessin.
   Elle ne pousse pas la figure : elle est SOUS les points vocaux et les objets (z-index 3, sous la couche
   des objets du labo) et ne bloque aucun clic ; seuls ses boutons (z-index 20) sont cliquables.
   Position : variables --bm-consigne-top / -left / -width posées par bm-consigne-eleve.js. */
.bm-consigne-ligne { position: fixed; top: var(--bm-consigne-top, 0px); left: var(--bm-consigne-left, 0px); width: var(--bm-consigne-width, 100%); box-sizing: border-box; z-index: 3; pointer-events: none; display: flex; align-items: flex-start; padding: 6px 60px 6px 14px; background: linear-gradient(180deg, rgba(17,15,25,0.93), rgba(17,15,25,0.80)); border-bottom: 2px solid #d4af37; color: #f5deb3; }
.bm-consigne-ligne .bm-consigne-texte { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; white-space: pre-line; }
.bm-consigne-ligne[dir="rtl"] { padding: 6px 14px 6px 60px; }
.bm-consigne-ligne.reduite { background: none; border-bottom: none; }
.bm-consigne-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.bm-consigne-modal .boite { background: #110f19; border: 2px solid #d4af37; border-radius: 12px; width: 640px; max-width: 94vw; max-height: 90vh; overflow-y: auto; padding: 22px; color: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.bm-consigne-modal h3 { margin: 0 0 6px; color: #d4af37; font-size: 1.1rem; }
.bm-consigne-modal p.aide { color: #94a3b8; font-size: 0.78rem; line-height: 1.4; margin: 0 0 10px; }
.bm-consigne-modal label { display: block; color: #94a3b8; font-size: 0.8rem; margin: 8px 0 4px; }
.bm-consigne-modal textarea { width: 100%; box-sizing: border-box; min-height: 90px; background: #0b0a12; color: #f8fafc; border: 1px solid #508289; border-radius: 6px; padding: 8px 10px; font-size: 0.95rem; line-height: 1.4; resize: vertical; font-family: inherit; }
.bm-consigne-modal .voix { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.bm-consigne-modal .voix button { padding: 5px 10px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.78rem; background: rgba(59,130,246,0.15); border: 1px solid #3b82f6; color: #93c5fd; }
.bm-consigne-modal .voix span { font-size: 0.74rem; color: #86efac; }
.bm-consigne-modal .rang { display: flex; gap: 8px; margin-top: 14px; }
.bm-consigne-modal .rang button { padding: 9px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.85rem; }

/* ── MENU DE LA FIGURE : un seul bouton ☰ ; tous les boutons de la figure sont dedans ── */
.bm-menu-figure { position: fixed; top: calc(var(--bm-consigne-top, 0px) + 5px); left: calc(var(--bm-consigne-left, 0px) + var(--bm-consigne-width, 100%) - 46px); z-index: 20; }
.bm-menu-bouton { background: rgba(17,15,25,0.92); border: 1px solid #d4af37; color: #d4af37; border-radius: 8px; width: 36px; height: 32px; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; }
.bm-menu-bouton.actif { background: #d4af37; color: #110f19; }
.bm-menu-fond { position: fixed; inset: 0; z-index: 25; background: transparent; }
.bm-menu-panneau { position: fixed; top: calc(var(--bm-consigne-top, 0px) + 42px); left: calc(var(--bm-consigne-left, 0px) + var(--bm-consigne-width, 100%) - 296px); width: 286px; max-width: 94vw; max-height: 70vh; overflow-y: auto; z-index: 30; background: rgba(17,15,25,0.98); border: 2px solid #d4af37; border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 5px; color: #f5deb3; }
.bm-menu-titre { font-size: 0.78rem; font-weight: bold; color: #d4af37; padding: 2px 4px 5px; border-bottom: 1px solid rgba(212,175,55,0.3); }
.bm-menu-panneau button { text-align: start; background: rgba(255,255,255,0.05); border: 1px solid rgba(212,175,55,0.45); color: #f5deb3; border-radius: 6px; padding: 7px 10px; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.bm-menu-panneau button:hover:not(:disabled) { background: rgba(212,175,55,0.18); }
.bm-menu-panneau button:disabled { opacity: 0.35; cursor: default; }
.bm-menu-panneau button.actif { background: #d4af37; color: #110f19; }
.bm-menu-panneau button.discret { border-style: dashed; color: #94a3b8; font-size: 0.78rem; margin-top: 3px; }
.bm-menu-nav { display: flex; align-items: center; gap: 6px; }
.bm-menu-nav button { flex: 1; text-align: center; padding: 6px 4px; }
.bm-menu-nav span, .bm-menu-info { font-size: 0.82rem; font-weight: bold; white-space: nowrap; padding: 0 4px; }
.bm-consigne-modal .lib-ligne { display: flex; gap: 8px; align-items: center; margin-top: 7px; }
.bm-consigne-modal .lib-ligne span { flex: 0 0 190px; font-size: 0.78rem; color: #cbd5e1; }
.bm-consigne-modal .lib-ligne input { flex: 1; min-width: 0; background: #0b0a12; color: #f8fafc; border: 1px solid #508289; border-radius: 6px; padding: 6px 8px; font-size: 0.85rem; }
.bm-consigne-modal .apercu { margin-top: 6px; padding: 8px 10px; background: rgba(212,175,55,0.08); border: 1px dashed rgba(212,175,55,0.5); border-radius: 6px; color: #f5deb3; font-size: 0.95rem; line-height: 1.6; }
.bm-consigne-modal .apercu::before { content: 'Aperçu : '; color: #94a3b8; font-size: 0.72rem; }
.bm-consigne-modal .apercu[dir="rtl"]::before { content: 'معاينة : '; }
.bm-consigne-modal code { background: rgba(255,255,255,0.1); padding: 0 4px; border-radius: 3px; }