/* ============================================================================
   visio.css — système visuel « OmegaVisio » (13/09/2026)

   Feuille dédiée à TOUT ce que l'utilisateur voit pendant une visio :
   overlay visio (visio-view.js), tableau blanc (tableau-view.js), bandeau
   « Mon prof » (eleve-dashboard-view.js), boutons Visio/Tableau de la fiche
   élève, interrupteur de disponibilité de la sidebar.

   Chargée APRÈS styles.css dans index.html (cf. ARCHITECTURE.md). Elle
   remplace les <style> injectés à l'exécution : le CSS redevient lisible,
   diffable et couvert par `tools/lint-app.py`.

   Règles du système :
     · une seule famille de gris sombres (--ov-bg-0..3), une seule de gris clairs
     · la marque #0e7490 signifie DEUX choses et deux seulement :
       « sélectionné » et « action principale »
     · rouge = quitter/supprimer · vert = disponibilité · violet = « À toi » et
       sélection · ambre = avertissement. Un sens par couleur.
     · un seul bouton (.ov-btn) : 40 px, 44 px au doigt/stylet, états complets
     · rayons 8/12/16/plein · espaces 4/8/12/16/24 · texte jamais < 12 px
     · transitions ≤ 180 ms, coupées par prefers-reduced-motion
   ========================================================================== */

:root{
  --ov-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Surfaces sombres — overlay visio + barre du tableau */
  --ov-bg-0:#0b1220;            /* scène, fond le plus profond */
  --ov-bg-1:#111827;            /* chrome : en-tête, barre d'outils */
  --ov-bg-2:#1b2432;            /* contrôle au repos */
  --ov-bg-3:#273246;            /* contrôle survolé */
  --ov-line:rgba(255,255,255,.09);
  --ov-line-2:rgba(255,255,255,.18);
  --ov-ink:#f8fafc;
  --ov-ink-2:#9aa8bd;
  --ov-ink-3:#6b7a91;

  /* Surfaces claires — boîtes Texte/Figure, historique, côté élève */
  --ov-p-bg:#ffffff;
  --ov-p-bg-2:var(--slate-50,#f8fafc);
  --ov-p-bg-3:var(--slate-100,#f1f5f9);
  --ov-p-line:var(--slate-200,#e2e8f0);
  --ov-p-ink:var(--slate-900,#0f172a);
  --ov-p-ink-2:var(--slate-600,#475569);
  --ov-p-ink-3:var(--slate-500,#64748b);

  /* Marque — « sélectionné » et « action principale » UNIQUEMENT */
  --ov-brand:#0e7490;
  --ov-brand-hi:#0891b2;
  --ov-brand-dk:#155e75;
  --ov-brand-tint:#ecfeff;
  --ov-brand-line:#67e8f9;

  /* Sémantique */
  --ov-danger:#ef4444;
  --ov-ok:#22c55e;
  --ov-turn:#7c3aed;
  --ov-warn:#f59e0b;

  --ov-r-sm:var(--radius-md,8px);
  --ov-r-md:var(--radius-lg,12px);
  --ov-r-lg:var(--radius-xl,16px);
  --ov-r-full:var(--radius-full,9999px);

  --ov-e1:0 1px 2px rgba(0,0,0,.30);
  --ov-e2:0 8px 24px rgba(2,6,23,.38);
  --ov-e3:0 24px 60px rgba(2,6,23,.45),0 0 0 1px rgba(15,23,42,.10);

  --ov-t:120ms cubic-bezier(.2,0,0,1);
  --ov-t2:180ms cubic-bezier(.2,0,0,1);

  --ov-h:40px;                  /* hauteur unique des contrôles */
}
/* Doigt / stylet : cible tactile confortable. Remplace l'ancien mode compact
   qui descendait les boutons à 32 px — précisément sur la tablette. */
@media (pointer:coarse){ :root{ --ov-h:44px } }

@media (prefers-reduced-motion:reduce){
  .tb-root *,#visio-overlay *,#tableau-overlay *{
    transition:none !important; animation:none !important;
  }
}

/* `styles.css` (l. 972) applique `* { transition: background-color .3s, color .3s,
   border-color .3s }` à TOUT élément du document. Dans le périmètre visio cela
   déborde le budget de 200 ms et fait travailler le navigateur sur la scène
   vidéo et sur le canvas de dessin, où rien ne doit s'animer. On la neutralise
   ici (même spécificité que nos composants, mais déclarée AVANT eux : chaque
   composant redéclare ensuite sa propre transition et l'emporte). */
.ov-scope,.ov-scope *{ transition:none }

/* ============================ BOUTON UNIQUE ============================== */

.ov-btn{
  height:var(--ov-h); min-width:var(--ov-h); padding:0 12px;
  border:1px solid transparent; border-radius:var(--ov-r-sm);
  background:var(--ov-bg-2); color:var(--ov-ink);
  font:600 13px/1 var(--ov-font);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  cursor:pointer; white-space:nowrap; touch-action:manipulation;
  transition:background var(--ov-t),color var(--ov-t),border-color var(--ov-t),transform 90ms ease;
}
.ov-btn:hover{ background:var(--ov-bg-3) }
.ov-btn:active{ transform:scale(.97) }
.ov-btn:focus-visible{ outline:2px solid var(--ov-brand-hi); outline-offset:2px }
.ov-btn:disabled{ opacity:.38; cursor:default; transform:none }
.ov-btn:disabled:hover{ background:var(--ov-bg-2) }
.ov-btn.actif,.ov-btn[aria-pressed="true"]{
  background:var(--ov-brand); border-color:var(--ov-brand-hi); color:#fff;
}
.ov-btn.actif:hover,.ov-btn[aria-pressed="true"]:hover{ background:var(--ov-brand-dk) }
.ov-btn--ghost{ background:transparent }
.ov-btn--ghost:hover{ background:rgba(255,255,255,.09) }
.ov-btn--ghost:disabled:hover{ background:transparent }
.ov-btn--solid{ background:var(--ov-brand); color:#fff }
.ov-btn--solid:hover{ background:var(--ov-brand-dk) }
.ov-btn--danger{ background:transparent; color:#fca5a5 }
.ov-btn--danger:hover{ background:var(--ov-danger); color:#fff }
.ov-btn svg{ width:20px; height:20px; flex:0 0 auto; pointer-events:none }

/* ===================== TABLEAU BLANC — racine et zone ==================== */

.tb-root{
  display:flex; flex-direction:column; width:100%; height:100%;
  background:#eceff3; font-family:var(--ov-font);
  user-select:none; -webkit-user-select:none;
}
.tb-sprite{ position:absolute; width:0; height:0; overflow:hidden }

.tb-zone{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden }
.tb-canvas{
  position:absolute; touch-action:none;
  box-shadow:0 1px 3px rgba(15,23,42,.14),0 12px 32px rgba(15,23,42,.10);
}
.tb-live{ cursor:crosshair }

/* ===================== TABLEAU BLANC — barre d'outils ==================== */
/* Deux rangées assumées : « écrire » (ce qu'on touche sans arrêt) puis
   « page & séance », plus basse et grisée. Séparateurs 1 px entre groupes. */

.tb-barre{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  padding:8px 10px; background:var(--ov-bg-1); color:var(--ov-ink);
  flex:0 0 auto;
}
.tb-barre-sub{
  padding:6px 10px; border-top:1px solid var(--ov-line);
  --ov-h:36px;
}
@media (pointer:coarse){ .tb-barre-sub{ --ov-h:40px } }
.tb-groupe{ display:flex; align-items:center; gap:4px }
.tb-div{ width:1px; align-self:stretch; margin:2px 2px; background:var(--ov-line) }
.tb-droite{ margin-left:auto }
.tb-lab{
  font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ov-ink-3); padding-right:2px; white-space:nowrap;
}

/* .tb-btn : même objet que .ov-btn (la classe historique est conservée,
   tout le JS s'appuie dessus — on n'en retire aucune). */
.tb-btn{
  height:var(--ov-h); min-width:var(--ov-h); padding:0 10px;
  border:1px solid transparent; border-radius:var(--ov-r-sm);
  background:var(--ov-bg-2); color:var(--ov-ink);
  font:600 13px/1 var(--ov-font);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  cursor:pointer; white-space:nowrap; touch-action:manipulation;
  transition:background var(--ov-t),color var(--ov-t),border-color var(--ov-t),transform 90ms ease;
}
.tb-btn:hover{ background:var(--ov-bg-3) }
.tb-btn:active{ transform:scale(.97) }
.tb-btn:focus-visible{ outline:2px solid var(--ov-brand-hi); outline-offset:2px }
.tb-btn:disabled{ opacity:.38; cursor:default; transform:none }
.tb-btn:disabled:hover{ background:var(--ov-bg-2) }
.tb-btn.actif{ background:var(--ov-brand); border-color:var(--ov-brand-hi); color:#fff }
.tb-btn.actif:hover{ background:var(--ov-brand-dk) }
.tb-btn svg{ width:20px; height:20px; flex:0 0 auto; pointer-events:none }
.tb-btn-txt{ padding:0 12px }                 /* bouton icône + libellé */
.tb-btn-ghost{ background:transparent }
.tb-btn-ghost:hover{ background:rgba(255,255,255,.09) }
.tb-btn-ghost:disabled:hover{ background:transparent }
.tb-btn.tb-fermer{ background:transparent; color:#fca5a5; padding:0 14px }
.tb-btn.tb-fermer:hover{ background:var(--ov-danger); color:#fff }

/* Couleurs : posées sur une plaque claire — sinon le NOIR (#111827) se confond
   avec le fond de la barre (#111827) et la pastille disparaît. Coche quand
   actif : un seul idiome « sélectionné » dans toute la barre. */
.tb-couleurs{
  background:rgba(255,255,255,.92); border-radius:var(--ov-r-full);
  padding:3px; gap:4px;
}
.tb-coul{
  width:calc(var(--ov-h) - 6px); height:calc(var(--ov-h) - 6px);
  border-radius:var(--ov-r-full); border:2px solid transparent;
  padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform 90ms ease,border-color var(--ov-t),box-shadow var(--ov-t);
}
.tb-coul:hover{ transform:scale(1.08) }
.tb-coul:focus-visible{ outline:2px solid var(--ov-brand); outline-offset:2px }
.tb-coul svg{ width:16px; height:16px; color:#fff; opacity:0; pointer-events:none }
.tb-coul.actif{ border-color:#fff; box-shadow:0 0 0 2px var(--ov-brand) }
.tb-coul.actif svg{ opacity:1 }

/* Épaisseurs : trois vrais points, lisibles d'un coup d'œil. */
.tb-ep span{ display:block; border-radius:var(--ov-r-full); background:#fff }
.tb-ep.actif span{ background:#fff }

.tb-page-num{
  min-width:54px; text-align:center; font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--ov-ink); padding:0 4px;
}

/* Téléphone (élève en visio, ou consultation d'un tableau passé) : la barre
   défile latéralement au lieu d'empiler dix rangées — sinon il ne reste plus
   que 237 px de hauteur utile pour la page sur un écran de 390 px.
   overflow-y:hidden explicite (CLAUDE.md N°0-nodebord-bis : un overflow-y
   laissé à `visible` est recalculé en `auto` et fait apparaître un ascenseur
   vertical parasite). « Fermer » reste collé à droite. */
@media (max-width:760px){
  .tb-barre{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tb-barre::-webkit-scrollbar{ display:none }
  .tb-groupe,.tb-div,.tb-page-num{ flex:0 0 auto }
  .tb-lab{ display:none }
  .tb-droite{ margin-left:0 }
  .tb-btn.tb-fermer{
    position:sticky; right:0; background:var(--ov-bg-1);
    box-shadow:-12px 0 14px -8px rgba(11,18,32,.95);
  }
}

/* Mode compact (tableau monté dans la visio) : on resserre les espaces,
   PAS la taille des boutons — c'est le mode utilisé sur la tablette. */
.tb-root.tb-compact .tb-barre{ padding:6px 8px; gap:5px 6px }
.tb-root.tb-compact .tb-barre-sub{ padding:5px 8px }

/* Lecture seule : la rangée « écrire » disparaît entièrement, la rangée
   « page & séance » reste (cf. .tb-groupe:not(.tb-nav) ci-dessous). */
.tb-root.tb-lecture .tb-live{ cursor:default }
.tb-root.tb-lecture .tb-barre-outils{ display:none }
.tb-root.tb-lecture .tb-groupe:not(.tb-nav){ display:none }
.tb-root.tb-lecture .tb-div{ display:none }
.tb-root.tb-lecture #tb-page-plus,
.tb-root.tb-lecture #tb-nouveau,
.tb-root.tb-lecture #tb-precedent,
.tb-root.tb-lecture #tb-stylet{ display:none }

/* Bandeau « À toi de jouer » + chrono. Ancré à GAUCHE : le haut-centre est
   occupé par la boîte Figure — les deux se superposaient systématiquement. */
.tb-tour-bandeau{
  position:absolute; top:10px; left:12px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ov-turn); color:#fff; padding:7px 14px;
  border-radius:var(--ov-r-full);
  font:700 13px/1 var(--ov-font); font-variant-numeric:tabular-nums;
  box-shadow:var(--ov-e2); pointer-events:none;
}

/* ===================== TABLEAU BLANC — historique ======================== */
/* (repris tel quel de tableau-view.js ; refonte prévue à l'incrément (e)) */
.tb-liste{
  position:absolute; inset:0; z-index:5; background:rgba(11,18,32,.62);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.tb-liste-boite{
  background:var(--ov-p-bg); color:var(--ov-p-ink); border-radius:var(--ov-r-lg);
  width:min(560px,96vw); max-height:80vh; display:flex; flex-direction:column;
  box-shadow:var(--ov-e3);
}
.tb-liste-boite h3{
  margin:0; padding:14px 18px; font-size:16px;
  border-bottom:1px solid var(--ov-p-line);
  display:flex; justify-content:space-between; align-items:center;
}
.tb-liste-corps{ overflow:auto; padding:8px }
.tb-liste-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--ov-p-line); border-radius:var(--ov-r-md);
  margin:6px 0; background:var(--ov-p-bg-2); cursor:pointer;
  transition:background var(--ov-t),border-color var(--ov-t);
}
.tb-liste-item:hover{ background:var(--ov-brand-tint); border-color:var(--ov-brand-line) }

/* ========================================================================== */
/* PANNEAUX « Texte & formule » et « Figure »  (incrément b — 13/09/2026)      */
/* Coquille commune : en-tête 48 px, corps défilant, pied collant.            */
/* Tous les contrôles à --ov-h (40 px, 44 px au stylet), anneau de focus       */
/* partout, aucune police sous 12 px, contrastes AA.                          */
/* ========================================================================== */

:is(#tb-texte-boite,#tb-fig-boite){
  position:absolute; z-index:4; width:min(600px,94vw);
  max-height:calc(100% - 16px);
  display:flex; flex-direction:column;
  background:var(--ov-p-bg); color:var(--ov-p-ink);
  border-radius:var(--ov-r-lg); box-shadow:var(--ov-e3);
  font-family:var(--ov-font); overflow:hidden;
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-tete{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:48px; padding:0 8px 0 16px; background:var(--ov-bg-1); color:#fff;
  flex:0 0 auto;
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-tete b{ font-size:14px; font-weight:600; letter-spacing:.2px }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-x{
  width:32px; height:32px; padding:0; background:transparent; border:none;
  color:var(--ov-ink-2); font-size:20px; line-height:1; cursor:pointer;
  border-radius:var(--ov-r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--ov-t),color var(--ov-t);
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-x:hover{ background:rgba(255,255,255,.14); color:#fff }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-x:focus-visible{ outline:2px solid var(--ov-brand-hi); outline-offset:2px }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-corps{
  padding:14px 16px 12px; overflow:auto; flex:1 1 auto; min-height:0;
}
:is(#tb-texte-boite,#tb-fig-boite) input#tb-texte-phrase{
  width:100%; box-sizing:border-box; height:var(--ov-h);
  border:1px solid var(--ov-p-line); border-radius:var(--ov-r-sm);
  padding:0 12px; font:15px var(--ov-font);
  background:var(--ov-p-bg-2); color:var(--ov-p-ink); outline:none;
  transition:border-color var(--ov-t),box-shadow var(--ov-t),background var(--ov-t);
}
:is(#tb-texte-boite,#tb-fig-boite) input#tb-texte-phrase:focus{
  border-color:var(--ov-brand); background:#fff; box-shadow:0 0 0 3px rgba(14,116,144,.16);
}
:is(#tb-texte-boite,#tb-fig-boite) math-field{
  display:block; width:100%; box-sizing:border-box; margin-top:10px;
  font-size:26px; border:1px solid var(--ov-p-line); border-radius:var(--ov-r-sm);
  padding:8px 12px; min-height:58px; background:#fff;
  --caret-color:var(--ov-brand);
  --selection-background-color:rgba(14,116,144,.18);
  --contains-highlight-background-color:rgba(14,116,144,.08);
}
:is(#tb-texte-boite,#tb-fig-boite) math-field:focus-within{
  border-color:var(--ov-brand); box-shadow:0 0 0 3px rgba(14,116,144,.16); outline:none;
}
:is(#tb-texte-boite,#tb-fig-boite) math-field::part(container){ outline:none }
:is(#tb-texte-boite,#tb-fig-boite) math-field::part(virtual-keyboard-toggle),
:is(#tb-texte-boite,#tb-fig-boite) math-field::part(menu-toggle){ display:none }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-aide{
  font-size:12px; color:var(--ov-p-ink-2); margin:8px 2px 0; line-height:1.5;
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-aide kbd{
  font:inherit; background:var(--ov-p-bg-3); border:1px solid var(--ov-p-line);
  border-radius:4px; padding:0 5px; color:var(--ov-p-ink);
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-section{ margin-top:12px }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-titre{
  /* était #94a3b8 à 10,5 px : 2,8:1 et sous le plancher — passé AA et 12 px */
  font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--ov-p-ink-2); margin:0 2px 6px;
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-grille{ display:flex; flex-wrap:wrap; gap:6px }
:is(#tb-texte-boite,#tb-fig-boite) .tb-pal{
  min-width:var(--ov-h); height:var(--ov-h); padding:0 10px;
  border:1px solid var(--ov-p-line); border-radius:var(--ov-r-sm);
  background:#fff; color:var(--ov-p-ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:17px;
  transition:background var(--ov-t),border-color var(--ov-t),transform 90ms ease;
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-pal:hover{ background:var(--ov-brand-tint); border-color:var(--ov-brand-line) }
:is(#tb-texte-boite,#tb-fig-boite) .tb-pal:active{ transform:scale(.96) }
:is(#tb-texte-boite,#tb-fig-boite) .tb-pal:focus-visible{ outline:2px solid var(--ov-brand); outline-offset:2px }
:is(#tb-texte-boite,#tb-fig-boite) .tb-pal .ML__latex{ font-size:1.15em; line-height:1 }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-pied{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; border-top:1px solid var(--ov-p-line);
  background:var(--ov-p-bg-2); flex:0 0 auto;
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-clavier{
  height:var(--ov-h); padding:0 14px;
  border:1px solid var(--ov-p-line); border-radius:var(--ov-r-sm);
  background:#fff; color:var(--ov-p-ink); font:600 13px/1 var(--ov-font);
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:background var(--ov-t),border-color var(--ov-t),color var(--ov-t);
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-clavier:hover{ background:var(--ov-brand-tint); border-color:var(--ov-brand-line) }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-clavier:focus-visible{ outline:2px solid var(--ov-brand); outline-offset:2px }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-clavier.ouvert{ background:var(--ov-brand); color:#fff; border-color:var(--ov-brand) }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-clavier,
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn{ white-space:nowrap }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-clavier svg,
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn svg,
#tb-clavier-fermer svg{ width:18px; height:18px; flex:0 0 auto }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn{
  height:var(--ov-h); padding:0 16px; border:1px solid transparent;
  border-radius:var(--ov-r-sm); font:600 14px/1 var(--ov-font); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:background var(--ov-t),border-color var(--ov-t),transform 90ms ease;
}
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn:active{ transform:scale(.97) }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn:focus-visible{ outline:2px solid var(--ov-brand); outline-offset:2px }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn.annuler{ background:#fff; border-color:var(--ov-p-line); color:var(--ov-p-ink) }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn.annuler:hover{ background:var(--ov-p-bg-3) }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn.poser{ background:var(--ov-brand); color:#fff }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn.poser:hover{ background:var(--ov-brand-dk) }
:is(#tb-texte-boite,#tb-fig-boite) .tb-ed-btn:disabled{ opacity:.5; cursor:default; transform:none }
/* Clavier maths ouvert : la palette fait doublon, on la replie — mais on ne
   masque plus l'aperçu de la figure (c'est le retour dont on a besoin en
   tapant). La hauteur de la boîte est ajustée en JS pour rester au-dessus. */
:is(#tb-texte-boite,#tb-fig-boite).clavier-ouvert .tb-ed-section,
:is(#tb-texte-boite,#tb-fig-boite).clavier-ouvert .tb-ed-aide{ display:none }

/* ------------------------------- boîte Figure ---------------------------- */
#tb-fig-boite{ width:min(860px,96vw) }
/* L'aperçu devient une colonne collée en haut : il ne quitte plus l'écran
   quand on remplit le formulaire (il était le dernier bloc d'un corps
   défilant, donc sous la ligne de flottaison). */
#tb-fig-boite .tb-fig-grille{
  display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px; align-items:start;
}
#tb-fig-boite .tb-fig-grille>*{ min-width:0 }
#tb-fig-boite .tb-fig-cote{ position:sticky; top:0 }
@media (max-width:820px){
  #tb-fig-boite .tb-fig-grille{ grid-template-columns:minmax(0,1fr) }
  #tb-fig-boite .tb-fig-cote{ order:-1; background:var(--ov-p-bg); z-index:1; padding-bottom:8px }
}
#tb-fig-boite .tb-fig-types{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px }
#tb-fig-boite .tb-fig-type{
  height:36px; padding:0 14px; border:1px solid var(--ov-p-line);
  border-radius:var(--ov-r-full); background:#fff; color:var(--ov-p-ink);
  font:600 13px/1 var(--ov-font); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:background var(--ov-t),border-color var(--ov-t),color var(--ov-t);
}
#tb-fig-boite .tb-fig-type:hover{ background:var(--ov-brand-tint); border-color:var(--ov-brand-line) }
#tb-fig-boite .tb-fig-type:focus-visible{ outline:2px solid var(--ov-brand); outline-offset:2px }
#tb-fig-boite .tb-fig-type.actif{ background:var(--ov-brand); color:#fff; border-color:var(--ov-brand) }
#tb-fig-boite .tb-fig-form{ display:flex; flex-direction:column; gap:10px }
#tb-fig-boite .tb-fig-ligne{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px }
#tb-fig-boite .tb-fig-lbl{ font-size:12.5px; font-weight:700; color:var(--ov-p-ink-2); white-space:nowrap }
#tb-fig-boite .tb-mf{
  flex:1 1 160px; min-width:96px; box-sizing:border-box;
  border:1px solid var(--ov-p-line); border-radius:var(--ov-r-sm);
  padding:4px 10px; font-size:18px; background:var(--ov-p-bg-2); color:var(--ov-p-ink);
  min-height:var(--ov-h);
  --caret-color:var(--ov-brand); --selection-background-color:rgba(14,116,144,.18);
}
#tb-fig-boite .tb-mf:focus-within,#tb-fig-boite .tb-mf:focus{
  border-color:var(--ov-brand); box-shadow:0 0 0 3px rgba(14,116,144,.16); background:#fff; outline:none;
}
#tb-fig-boite math-field::part(virtual-keyboard-toggle),
#tb-fig-boite math-field::part(menu-toggle){ display:none }
#tb-fig-boite .tb-mf-court{ flex:0 1 128px; min-width:76px; font-size:17px }
#tb-fig-boite input.tb-mf-txt{ font-size:15px; font-family:inherit }
#tb-fig-boite .tb-fig-num{
  display:flex; flex-direction:column; gap:3px;
  font-size:12px; font-weight:700; color:var(--ov-p-ink-2); width:86px;
}
#tb-fig-boite .tb-fig-num input,
#tb-fig-boite .tb-fig-nom,
#tb-fig-boite .tb-fig-proba{
  width:100%; box-sizing:border-box; height:var(--ov-h);
  border:1px solid var(--ov-p-line); border-radius:var(--ov-r-sm);
  padding:0 8px; font-size:14px; font-weight:400;
  color:var(--ov-p-ink); background:var(--ov-p-bg-2); outline:none; font-family:inherit;
  transition:border-color var(--ov-t),box-shadow var(--ov-t),background var(--ov-t);
}
#tb-fig-boite .tb-fig-nom{ width:52px; text-align:center; font-weight:600 }
#tb-fig-boite .tb-fig-proba{ width:68px }
#tb-fig-boite input:focus,#tb-fig-boite select:focus{
  border-color:var(--ov-brand); box-shadow:0 0 0 3px rgba(14,116,144,.16); background:#fff; outline:none;
}
#tb-fig-boite select{
  height:var(--ov-h); border:1px solid var(--ov-p-line); border-radius:var(--ov-r-sm);
  padding:0 8px; font-size:14px; background:var(--ov-p-bg-2); color:var(--ov-p-ink);
  font-family:inherit; cursor:pointer;
}
#tb-fig-boite select:focus-visible{ outline:2px solid var(--ov-brand); outline-offset:1px }
#tb-fig-boite .tb-fig-check{
  display:inline-flex; align-items:center; gap:7px; min-height:var(--ov-h);
  font-size:12.5px; font-weight:600; color:var(--ov-p-ink-2); cursor:pointer; white-space:nowrap;
}
#tb-fig-boite .tb-fig-check input{ width:18px; height:18px; accent-color:var(--ov-brand); cursor:pointer }
#tb-fig-boite .tb-fig-check input:focus-visible{ outline:2px solid var(--ov-brand); outline-offset:2px }
/* Anciennement 30 / 26 / 24 px : les contrôles les plus fins de l'app,
   dans l'écran conçu pour le S Pen. Tous ramenés à --ov-h. */
#tb-fig-boite .tb-fig-b{
  height:var(--ov-h); min-width:var(--ov-h); padding:0 12px;
  border:1px solid var(--ov-p-line); border-radius:var(--ov-r-sm);
  background:#fff; color:var(--ov-p-ink); font:600 14px/1 var(--ov-font);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  transition:background var(--ov-t),border-color var(--ov-t),color var(--ov-t),transform 90ms ease;
}
#tb-fig-boite .tb-fig-b:hover{ background:var(--ov-brand-tint); border-color:var(--ov-brand-line) }
#tb-fig-boite .tb-fig-b:active{ transform:scale(.97) }
#tb-fig-boite .tb-fig-b:focus-visible{ outline:2px solid var(--ov-brand); outline-offset:2px }
#tb-fig-boite .tb-fig-b.on{ background:var(--ov-brand); color:#fff; border-color:var(--ov-brand) }
#tb-fig-boite .tb-fig-b.ajout{ border-style:dashed; color:var(--ov-brand); font-weight:600; font-size:13px; align-self:flex-start }
#tb-fig-boite .tb-fig-b.petit{ height:36px; font-size:13px; padding:0 10px }
#tb-fig-boite .tb-fig-b.discret{
  min-width:36px; height:36px; padding:0 6px; font-size:13px;
  color:var(--ov-p-ink-3); border-color:transparent; background:transparent;
}
#tb-fig-boite .tb-fig-b.discret:hover{ color:var(--ov-brand); background:var(--ov-brand-tint) }
#tb-fig-boite .tb-fig-signe{ width:var(--ov-h); height:var(--ov-h); padding:0; font-size:22px; font-weight:700 }
#tb-fig-boite .tb-fig-signe.plus{ color:#15803d; border-color:#bbf7d0; background:#f0fdf4 }
#tb-fig-boite .tb-fig-signe.moins{ color:#b91c1c; border-color:#fecaca; background:#fef2f2 }
#tb-fig-boite .tb-fig-fleche{ width:var(--ov-h); height:var(--ov-h); padding:0; font-size:22px; color:#1d4ed8; border-color:#bfdbfe; background:#eff6ff }
#tb-fig-boite .tb-fig-bornes{ display:flex; align-items:flex-start; gap:6px; overflow-x:auto; overflow-y:hidden; padding:4px 2px }
#tb-fig-boite .tb-fig-borne{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto }
#tb-fig-boite .tb-fig-borne .tb-mf{ flex:0 0 auto; width:104px; min-width:104px; text-align:center }
#tb-fig-boite .tb-fig-borne.interdit .tb-mf{ border-color:var(--ov-danger); background:#fef2f2 }
#tb-fig-boite .tb-fig-borne-outils{ display:flex; gap:4px; min-height:36px }
#tb-fig-boite .tb-fig-borne-outils .tb-fig-b{ height:36px; min-width:36px; padding:0 6px; font-size:14px; font-weight:700; color:var(--ov-p-ink-3) }
#tb-fig-boite .tb-fig-borne-outils .tb-fig-b.on{ color:#fff; background:var(--ov-danger); border-color:var(--ov-danger) }
#tb-fig-boite .tb-fig-sep{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:2px 4px; flex:0 0 auto }
#tb-fig-boite .tb-fig-chips{ display:inline-flex; gap:6px }
#tb-fig-boite .tb-fig-valeurs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px; border-radius:var(--ov-r-md); background:var(--ov-p-bg-2) }
#tb-fig-boite .tb-fig-val .tb-mf{ flex:0 0 auto; width:104px; min-width:104px; text-align:center }
#tb-fig-boite .tb-fig-val-interdit{ display:inline-flex; width:104px; height:var(--ov-h); align-items:center; justify-content:center; color:var(--ov-danger); font-size:22px }
#tb-fig-boite .tb-fig-arbre{ display:flex; flex-direction:column; gap:8px }
#tb-fig-boite .tb-fig-branche{ border-left:3px solid var(--ov-p-line); padding-left:10px; display:flex; flex-direction:column; gap:6px }
#tb-fig-boite .tb-fig-enfants{ display:flex; flex-direction:column; gap:6px; padding-left:22px }
#tb-fig-boite .tb-fig-noeud{ display:flex; flex-wrap:wrap; align-items:center; gap:6px }
#tb-fig-boite .tb-fig-barre{ font-size:15px; font-weight:700; width:var(--ov-h) }
#tb-fig-boite .tb-fig-points{ display:flex; flex-direction:column; gap:8px }
#tb-fig-boite .tb-fig-fonctions{ display:flex; flex-direction:column; gap:8px }
#tb-fig-boite .tb-fig-tex{ display:inline-flex; align-items:center; min-height:22px; font-size:17px; color:var(--ov-p-ink) }
#tb-fig-boite .tb-fig-tex .ML__latex{ font-size:1.05em }
#tb-fig-boite .tb-fig-num .tb-fig-tex{ font-size:14px; min-height:18px }
#tb-fig-boite .tb-arbre{ display:flex; align-items:center; gap:0; padding:8px 4px; overflow-x:auto; overflow-y:hidden }
#tb-fig-boite .tb-arbre-racine{ width:10px; height:10px; border-radius:50%; background:var(--ov-p-ink); flex:0 0 auto }
#tb-fig-boite .tb-arbre-enfants{ display:flex; flex-direction:column; justify-content:center; gap:14px; border-left:2px solid var(--slate-400,#94a3b8) }
#tb-fig-boite .tb-arbre-branche{ display:flex; align-items:center }
#tb-fig-boite .tb-arbre-trait{ position:relative; width:86px; height:2px; background:var(--slate-400,#94a3b8); flex:0 0 auto; display:flex; align-items:center; justify-content:center }
#tb-fig-boite .tb-arbre-proba{
  width:62px; height:32px; border:1px solid #bfdbfe; border-radius:var(--ov-r-sm);
  text-align:center; font:600 13px/1 var(--ov-font); color:#1d4ed8; background:#fff;
  position:relative; top:-18px; padding:0; outline:none;
}
#tb-fig-boite .tb-arbre-proba:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.16) }
#tb-fig-boite .tb-arbre-noeud{ display:flex; align-items:center; gap:3px; padding:0 6px 0 4px }
#tb-fig-boite .tb-arbre-evt{
  height:var(--ov-h); padding:0 6px; border:1px solid var(--ov-p-line);
  border-radius:var(--ov-r-sm); font-size:15px; font-weight:700;
  background:var(--ov-p-bg-2); color:var(--ov-p-ink); font-family:inherit; cursor:pointer;
}
#tb-fig-boite .tb-fig-coord{
  width:58px; height:var(--ov-h); border:1px solid var(--ov-p-line);
  border-radius:var(--ov-r-sm); text-align:center; font-size:14px;
  background:var(--ov-p-bg-2); color:var(--ov-p-ink); outline:none; padding:0 4px;
}
#tb-fig-boite .tb-fig-obj{ padding:6px 8px; border-radius:var(--ov-r-md); background:var(--ov-p-bg-2); gap:6px }
#tb-fig-boite .tb-fig-objets{ display:flex; flex-direction:column; gap:8px; margin-top:2px }
#tb-fig-boite .tb-fig-nom-long{ width:160px; letter-spacing:2px }
#tb-fig-boite .tb-fig-mode{ font-weight:600; font-size:13px }
#tb-fig-boite #tb-fig-consigne{ color:var(--ov-brand); font-weight:600 }
#tb-fig-boite .tb-fig-erreur{
  margin-top:10px; padding:9px 12px; border-radius:var(--ov-r-sm);
  background:#fef2f2; border:1px solid #fecaca; color:#b91c1c;
  font-size:13px; font-weight:600;
}
#tb-fig-boite .tb-fig-apercu{
  padding:10px; border:1px dashed var(--ov-p-line); border-radius:var(--ov-r-md);
  background:#fff; text-align:center; min-height:60px; overflow:auto;
  transition:opacity var(--ov-t);
}
#tb-fig-boite .tb-fig-apercu svg{ max-width:100%; height:auto }
#tb-fig-boite .tb-fig-apercu.placer{ cursor:crosshair; border-style:solid; border-color:var(--ov-brand); box-shadow:0 0 0 3px rgba(14,116,144,.16) }
/* Saisie incomplète : on garde le DERNIER aperçu valide, en estompé, au lieu
   de vider la zone (une faute de frappe faisait disparaître la figure). */
#tb-fig-boite .tb-fig-apercu.perime{ opacity:.35 }
#tb-fig-boite .tb-fig-apercu-titre{
  font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--ov-p-ink-2); margin:0 0 6px;
}

/* Bouton flottant « Fermer le clavier » : neutre (l'action est anodine), et
   posé sur l'échelle documentée — plus de --keyboard-zindex écrasé à 100001. */
#tb-clavier-fermer{
  position:fixed; right:12px; z-index:calc(var(--keyboard-zindex, 6000) + 1);
  height:38px; padding:0 14px;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--ov-r-sm);
  background:var(--ov-bg-2); color:var(--ov-ink);
  font:600 13px/1 var(--ov-font); cursor:pointer;
  box-shadow:var(--ov-e2); display:none; align-items:center; gap:7px; white-space:nowrap;
  transition:background var(--ov-t);
}
#tb-clavier-fermer:hover{ background:var(--ov-bg-3) }
#tb-clavier-fermer:focus-visible{ outline:2px solid var(--ov-brand-hi); outline-offset:2px }
#tb-clavier-fermer.visible{ display:inline-flex }

/* ========================================================================== */
/* OVERLAY VISIO  (incrément c — 13/09/2026)                                  */
/* En-tête réel, contrôle segmenté Vidéo/Tableau, états de chargement et       */
/* d'erreur en place, vignette au ratio fixe avec son chrome à l'intérieur.    */
/* Aucun backdrop-filter sur la scène : elle affiche un flux vidéo en continu. */
/* ========================================================================== */

#visio-overlay{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background:var(--ov-bg-0); color:var(--ov-ink);
  display:flex; flex-direction:column; font-family:var(--ov-font);
}

/* ------------------------------- en-tête --------------------------------- */
.visio-tete{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-sizing:border-box; height:52px; padding:0 12px; flex:0 0 auto;
  background:var(--ov-bg-1); border-bottom:1px solid var(--ov-line);
}
.visio-id{ display:flex; align-items:center; gap:10px; min-width:0 }
.visio-marque{
  width:28px; height:28px; border-radius:var(--ov-r-sm); flex:0 0 auto;
  background:linear-gradient(140deg,var(--ov-brand-hi),var(--ov-brand-dk));
  display:flex; align-items:center; justify-content:center;
  font:700 15px/1 var(--ov-font); color:#fff;
}
#visio-titre{
  font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.visio-meta{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  font-size:12px; font-weight:600; color:var(--ov-ink-2);
  background:var(--ov-bg-2); border-radius:var(--ov-r-full); padding:5px 11px;
  font-variant-numeric:tabular-nums;
}
.visio-live{
  width:8px; height:8px; border-radius:var(--ov-r-full); background:var(--ov-ok);
  flex:0 0 auto; box-shadow:0 0 0 3px rgba(34,197,94,.20);
}
.visio-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto }
@media (max-width:640px){ .visio-meta{ display:none } }

/* Contrôle segmenté : deux boutons qui DISENT où l'on va, au lieu d'un seul
   bouton qui changeait de libellé et de sens à chaque clic. */
#visio-segment{
  display:inline-flex; gap:3px; padding:3px;
  background:var(--ov-bg-2); border:1px solid var(--ov-line); border-radius:var(--ov-r-sm);
}
#visio-segment .ov-btn{
  height:32px; min-width:32px; padding:0 11px;
  background:transparent; border:none; color:var(--ov-ink-2); font-size:12.5px;
}
#visio-segment .ov-btn:hover{ background:rgba(255,255,255,.07); color:var(--ov-ink) }
#visio-segment .ov-btn.actif{ background:var(--ov-brand); color:#fff }
#visio-segment .ov-btn svg{ width:18px; height:18px }
@media (max-width:520px){ #visio-segment .ov-btn span{ display:none } #visio-segment .ov-btn{ padding:0 8px } }

/* -------------------------------- scène ---------------------------------- */
#visio-scene{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:var(--ov-bg-0) }
.visio-grand{
  position:absolute; inset:0; z-index:0; width:auto; height:auto;
  border:none; box-shadow:none; border-radius:0;
  transition:none;                      /* rien n'anime le flux vidéo */
}
.visio-petit{
  position:absolute; z-index:1;
  width:min(32vw,300px); aspect-ratio:16/10; height:auto;
  border:1px solid var(--ov-line-2); border-radius:var(--ov-r-md);
  overflow:hidden; box-shadow:var(--ov-e2);
}
@media (max-width:640px){ .visio-petit{ width:min(46vw,190px) } }
#visio-conteneur.visio-grand,#visio-conteneur.visio-petit{ background:var(--ov-bg-0) }
#visio-tableau.visio-grand{ background:#eceff3 }
#visio-tableau.visio-petit{ background:#fff; pointer-events:none }
/* La barre du tableau disparaît quand il est en vignette (les deux rangées). */
#visio-tableau.visio-tableau-vignette .tb-barre{ display:none }

/* Chrome de la vignette : DANS la vignette (avant : une barre flottante posée
   32 px au-dessus, qui sortait de l'écran quand on remontait la vignette). */
#visio-vignette-barre{
  position:absolute; z-index:2; display:none; align-items:center; gap:6px;
}
#visio-vignette-poignee{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:30px; border-radius:var(--ov-r-sm);
  background:rgba(11,18,32,.74); color:#fff; cursor:grab;
  touch-action:none; user-select:none; -webkit-user-select:none;
  transition:background var(--ov-t);
}
#visio-vignette-poignee:hover{ background:rgba(11,18,32,.92) }
#visio-vignette-poignee svg{ width:18px; height:18px; pointer-events:none }
#visio-vignette-btn{
  height:30px; padding:0 10px; border:none; border-radius:var(--ov-r-sm);
  background:rgba(11,18,32,.74); color:#fff;
  font:600 12px/1 var(--ov-font); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  transition:background var(--ov-t);
}
#visio-vignette-btn:hover{ background:rgba(11,18,32,.92) }
#visio-vignette-btn:focus-visible,#visio-vignette-poignee:focus-visible{
  outline:2px solid var(--ov-brand-hi); outline-offset:2px;
}
#visio-vignette-btn svg{ width:16px; height:16px; flex:0 0 auto }
@media (max-width:520px){ #visio-vignette-btn span{ display:none } #visio-vignette-btn{ padding:0 8px } }

/* --------------------- chargement / erreur / attente --------------------- */
.visio-centre{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:3;
}
.visio-carte{
  background:rgba(27,36,50,.94); border:1px solid var(--ov-line);
  border-radius:var(--ov-r-lg); box-shadow:var(--ov-e2);
  padding:24px 28px; max-width:400px; text-align:center; color:var(--ov-ink);
}
.visio-carte h3{ margin:0 0 6px; font-size:15px; font-weight:600 }
.visio-carte p{ margin:0; font-size:13px; line-height:1.55; color:var(--ov-ink-2) }
.visio-carte .ov-btn{ margin-top:16px }
.visio-carte.erreur h3{ color:#fca5a5 }
.visio-spin{
  width:30px; height:30px; margin:0 auto 14px; border-radius:var(--ov-r-full);
  border:3px solid rgba(255,255,255,.14); border-top-color:var(--ov-brand-hi);
  animation:visio-spin .9s linear infinite;
}
@keyframes visio-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .visio-spin{ animation:none; border-top-color:var(--ov-brand-hi) } }

/* Attente du tableau côté élève : discret, en bas à gauche — avant, la
   relance toutes les 15 s était totalement silencieuse. */
#visio-attente-tableau{
  position:absolute; left:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(27,36,50,.92); border:1px solid var(--ov-line);
  border-radius:var(--ov-r-full); padding:8px 14px;
  font:600 12.5px/1 var(--ov-font); color:var(--ov-ink-2); box-shadow:var(--ov-e1);
}
#visio-attente-tableau .pts{ display:inline-flex; gap:4px }
#visio-attente-tableau .pts i{
  width:6px; height:6px; border-radius:var(--ov-r-full); background:var(--ov-ink-3);
  animation:visio-bat 1.2s infinite;
}
#visio-attente-tableau .pts i:nth-child(2){ animation-delay:.15s }
#visio-attente-tableau .pts i:nth-child(3){ animation-delay:.3s }
@keyframes visio-bat{ 0%,80%{ opacity:.35 } 40%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ #visio-attente-tableau .pts i{ animation:none; opacity:.6 } }

/* ========================================================================== */
/* CÔTÉ ÉLÈVE ET CÔTÉ PROF  (incrément d — 13/09/2026)                        */
/* Bandeau « Mon prof », interrupteur de disponibilité, actions de la fiche.   */
/* Ces blocs vivent sur des pages CLAIRES : ils n'utilisent pas .ov-scope.     */
/* ========================================================================== */

/* --------------------- bandeau « Mon prof » (dashboard) ------------------ */
/* `.glass-card` est conservée sur l'élément (rien n'est retiré), mais le flou
   permanent et le survol qui soulève la carte de 2 px n'ont pas lieu d'être
   sur un bandeau qui n'est pas cliquable. */
#prof-bandeau{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--ov-r-lg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
  transition:background var(--ov-t);
}
#prof-bandeau:hover{ background:rgba(255,255,255,.10); transform:none; box-shadow:none }
/* Gabarit posé ici plutôt que laissé aux seules classes Tailwind (p-4, gap-3) :
   le bandeau garde sa mise en page même si l'utilitaire change. */
#prof-bandeau>div{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
#prof-bandeau{ padding:14px 16px }
.visio-bandeau-id{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 260px }
#prof-bandeau-dot{
  width:34px; height:34px; border-radius:var(--ov-r-full); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
#prof-bandeau-dot svg{ width:18px; height:18px }
#prof-bandeau-dot.ok{ background:rgba(34,197,94,.18); box-shadow:inset 0 0 0 1px rgba(34,197,94,.55) }
#prof-bandeau-dot.no{ background:rgba(239,68,68,.16); box-shadow:inset 0 0 0 1px rgba(239,68,68,.5) }
.visio-bandeau-txt{ min-width:0 }
/* L'état ne tient plus à la seule couleur : une pastille ET un mot. */
#prof-bandeau-etat{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:4px;
  font:700 12px/1 var(--ov-font); letter-spacing:.3px;
  border-radius:var(--ov-r-full); padding:4px 10px;
}
#prof-bandeau-etat.ok{ background:rgba(34,197,94,.18); color:#86efac }
#prof-bandeau-etat.no{ background:rgba(239,68,68,.16); color:#fca5a5 }
#prof-bandeau-etat i{ width:7px; height:7px; border-radius:var(--ov-r-full); background:currentColor; flex:0 0 auto }
#prof-bandeau-titre{ font-size:15px; font-weight:700; color:#fff; line-height:1.25 }
#prof-bandeau-sous{ font-size:12.5px; color:rgba(255,255,255,.68); margin-top:2px }
#prof-bandeau-actions{ display:flex; gap:8px; flex-wrap:wrap }
/* Boutons du bandeau : `.glass-button` reste posée, on la neutralise ici
   (padding 12/24 défini deux fois dans styles.css, halo indigo sur un bouton
   teal, aucun focus clavier). */
#prof-bandeau .visio-btn{
  height:var(--ov-h); padding:0 16px;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--ov-r-sm);
  background:rgba(255,255,255,.10); color:#fff;
  font:600 13px/1 var(--ov-font); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
  transition:background var(--ov-t),border-color var(--ov-t);
}
#prof-bandeau .visio-btn:hover{ background:rgba(255,255,255,.18); transform:none; box-shadow:none }
#prof-bandeau .visio-btn:active{ transform:scale(.97) }
#prof-bandeau .visio-btn:focus-visible{ outline:2px solid var(--ov-brand-line); outline-offset:2px }
#prof-bandeau .visio-btn svg{ width:18px; height:18px; flex:0 0 auto }
#prof-bandeau .visio-btn--principal{ background:var(--ov-brand); border-color:var(--ov-brand-hi) }
#prof-bandeau .visio-btn--principal:hover{ background:var(--ov-brand-dk) }
#prof-bandeau .visio-btn--rejoindre{ background:#059669; border-color:#34d399 }
#prof-bandeau .visio-btn--rejoindre:hover{ background:#047857 }
@media (max-width:520px){ #prof-bandeau .visio-btn{ flex:1 1 auto; justify-content:center } }

/* ----------------- interrupteur de disponibilité (sidebar prof) ---------- */
#sidebar-visio-dispo-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; height:44px; padding:0 12px; margin-bottom:8px;
  border:1px solid var(--ov-line); border-radius:var(--ov-r-sm);
  background:var(--ov-bg-2); color:var(--ov-ink);
  font:600 13px/1 var(--ov-font); cursor:pointer; text-align:left;
  transition:background var(--ov-t);
}
#sidebar-visio-dispo-btn:hover{ background:var(--ov-bg-3) }
#sidebar-visio-dispo-btn:focus-visible{ outline:2px solid var(--ov-brand-hi); outline-offset:2px }
.visio-switch-gauche{ display:inline-flex; align-items:center; gap:9px; min-width:0 }
.visio-switch-gauche svg{ width:18px; height:18px; flex:0 0 auto }
#sidebar-visio-dispo-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* La pastille devient la piste d'un vrai interrupteur (l'ancienne était un
   rond de 9 px sur un bouton qui ne ressemblait pas à un réglage). */
#sidebar-visio-dispo-dot{
  position:relative; width:38px; height:22px; flex:0 0 auto;
  border-radius:var(--ov-r-full); background:#334155;
  transition:background var(--ov-t2);
}
#sidebar-visio-dispo-dot::after{
  content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:var(--ov-r-full); background:#94a3b8;
  transition:transform var(--ov-t2),background var(--ov-t2);
}
#sidebar-visio-dispo-btn[aria-pressed="true"] #sidebar-visio-dispo-dot{ background:rgba(34,197,94,.35) }
#sidebar-visio-dispo-btn[aria-pressed="true"] #sidebar-visio-dispo-dot::after{ transform:translateX(16px); background:var(--ov-ok) }
@media (prefers-reduced-motion:reduce){
  #sidebar-visio-dispo-dot,#sidebar-visio-dispo-dot::after{ transition:none }
}

/* ------------- actions « Visio » et « Tableau » de la fiche élève -------- */
/* Elles réutilisaient `.eleve-header-stat`, le composant STATISTIQUE (icône +
   valeur + libellé majuscule) : « Tableau / Écrire » se lisait comme un
   indicateur à côté de « 14,2 / Moyenne ». Elles redeviennent des actions. */
.eleve-header-visio-btn{
  flex:0 0 auto; gap:8px; padding:0 16px; height:44px;
  border-radius:var(--ov-r-sm); background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22) !important;
  transition:background var(--ov-t),border-color var(--ov-t);
}
.eleve-header-visio-btn:hover{ background:rgba(255,255,255,.24) }
.eleve-header-visio-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.eleve-header-visio-btn .eleve-header-stat-content{ flex-direction:row; align-items:center }
.eleve-header-visio-btn .eleve-header-stat-value{ font-size:14px; font-weight:700 }
/* le libellé secondaire (10 px, sous le plancher) n'a plus de sens ici */
.eleve-header-visio-btn .eleve-header-stat-label{ display:none }
.eleve-header-visio-btn .eleve-header-stat-icon{ font-size:16px; opacity:1 }
#header-visio-btn{ background:rgba(14,116,144,.9); border-color:rgba(103,232,249,.5) !important }
#header-visio-btn:hover{ background:#155e75 }
.visio-separateur-fiche{ width:1px; align-self:stretch; margin:0 8px; background:rgba(255,255,255,.22); flex:0 0 auto }