/* ══════════════════════════════════════════════════════════════════════════
   LE GROUPE FLOTTANT DU PROFESSEUR — 21/09/2026

   DEUX BOUTONS, DEUX COINS, ET LA BARRE BASSE EN DESSOUS. Le 🤖 de l'IA
   était posé en bas à droite (z-index 9990), le 🎓 « revoir la visite
   guidée » en bas à gauche (9998), et la barre de navigation à 900 : les
   deux ronds recouvraient donc le premier et le dernier onglet de la barre,
   sur téléphone, en permanence. Vu à l'usage, jamais en mesure — un bouton
   recouvert garde sa taille, sa position et son contraste.

   Ils vivent désormais ENSEMBLE, dans un groupe qu'on déplace, et qui se
   replie contre le bord quand il gêne. Le groupe est borné pour rester
   au-dessus de la barre : ce qu'on vient de dégager ne doit pas pouvoir
   être recouvert à nouveau par accident.
   ═════════════════════════════════════════════════════════════════════════ */

#pf-groupe {
  position: fixed;
  z-index: 9990;            /* au-dessus de la barre (900), sous les modales */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(148, 163, 184, .35);
  box-shadow: 0 6px 22px rgba(15, 23, 42, .18);
  backdrop-filter: blur(6px);
  /* Le doigt fait glisser le GROUPE, pas la page : sans cela, un glissement
     parti du bouton défile le tableau de bord et le groupe ne bouge jamais. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: left .18s ease, top .18s ease, width .18s ease, opacity .18s ease;
}
#pf-groupe.pf-glisse {
  transition: none;                      /* pendant le geste, il suit le doigt */
  box-shadow: 0 14px 34px rgba(15, 23, 42, .3);
  cursor: grabbing;
}

/* La poignée : trois points, la convention de « ceci se déplace ». Elle est
   décorative — tout le groupe est saisissable, pas seulement elle. */
#pf-groupe .pf-poignee {
  width: 22px; height: 4px; border-radius: 99px;
  background: rgba(100, 116, 139, .55);
  flex: 0 0 auto;
}

/* Les deux boutons adoptés. Leurs feuilles d'origine les ancrent en bas de
   l'écran (`position: fixed`) : on neutralise ici, avec une spécificité
   suffisante pour gagner sans `!important`. */
/* `relative` ET NON `static` — corrigé le 21/09/2026 le jour même. `static`
   sortait bien le bouton de son ancrage en bas d'écran, mais il cessait aussi
   d'être un ancêtre positionné : sa pastille ✦ et son anneau de pulsation,
   tous deux en `position: absolute`, allaient alors se caler sur le GROUPE.
   `relative` neutralise l'ancrage d'origine sans emporter cette fonction. */
#pf-groupe #ai-fab,
#pf-groupe .tuto-reopen {
  position: relative;
  left: auto; right: auto; bottom: auto; top: auto;
  margin: 0;
  width: 52px; height: 52px;    /* même gabarit : une pile alignée se lit */
  flex: 0 0 auto;
}
#pf-groupe #ai-fab { font-size: 24px; }
#pf-groupe .tuto-reopen { font-size: 20px; }

/* ── REPLIÉ ──────────────────────────────────────────────────────────────
   Poussé contre le bord, le groupe devient une languette : il ne disparaît
   jamais tout à fait. Un bouton qui s'efface pour de bon se cherche, et on
   finit par croire qu'on l'a cassé. */
#pf-groupe.pf-replie {
  padding: 0;
  gap: 0;
  width: 22px;
  border-radius: 12px;
  background: rgba(99, 102, 241, .92);
  border-color: rgba(99, 102, 241, .92);
}
#pf-groupe.pf-replie #ai-fab,
#pf-groupe.pf-replie .tuto-reopen,
#pf-groupe.pf-replie .pf-poignee { display: none; }

#pf-groupe .pf-languette {
  display: none;
  width: 22px; height: 54px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; margin: 0;
  color: #ffffff; font-size: 13px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
#pf-groupe.pf-replie .pf-languette { display: flex; }
#pf-groupe .pf-languette:focus-visible,
#pf-groupe #ai-fab:focus-visible,
#pf-groupe .tuto-reopen:focus-visible {
  outline: 2px solid #4f46e5; outline-offset: 2px;
}

/* Le panneau de l'IA est ancré à droite dans sa propre feuille. Quand le
   groupe est rangé à gauche, un panneau qui s'ouvre à l'opposé du bouton
   qu'on vient de toucher donne l'impression d'avoir touché autre chose. */
body.pf-gauche #ai-panel { right: auto; left: 28px; }

@media (prefers-reduced-motion: reduce) {
  #pf-groupe { transition: none; }
}
@media print {
  #pf-groupe { display: none !important; }
}