/* ══════════════════════════════════════════════════════════════════════════════
   MODE PLEIN ÉCRAN ÉLÈVE — 21/09/2026

   Sur téléphone, l'en-tête, la barre d'outils et le pied de page mangent une
   grande part d'un écran déjà petit. Ce mode les retire pour laisser la place
   au travail, et se quitte d'un seul toucher.

   Le point de rupture est 768 px : celui que le projet utilise déjà
   (apps/student/core/mobile-header.js). Aucun nouveau seuil n'est inventé.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── La bascule, dans l'en-tête : discrète, mais pas invisible ────────────── */
.pe-bascule {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, transform .18s ease;
}
.pe-bascule:active { transform: scale(.94); }
.pe-bascule:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── La sortie : seule chose qui reste à l'écran en plein écran ───────────── */
.pe-sortie {
  display: none;
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(17, 24, 39, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  /* Sous la modale de jeu (9999) : une partie en cours n'est jamais recouverte. */
  z-index: 9998;
  -webkit-tap-highlight-color: transparent;
}
.pe-sortie:active { transform: scale(.96); }
.pe-sortie:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── L'état plein écran ───────────────────────────────────────────────────── */
body.plein-ecran .header,
body.plein-ecran .sidebar,
body.plein-ecran #pied-legal-2i2d,
body.plein-ecran [data-pied-legal] {
  display: none !important;
}

body.plein-ecran .app-layout { padding-top: 0; gap: 0; }
body.plein-ecran main.content { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }

/* ── Seulement sur téléphone ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pe-bascule { display: inline-flex; }
  body.plein-ecran .pe-sortie { display: inline-flex; }
}

/* Au-delà de 768 px, rien n'apparaît et rien ne se masque : le mode n'existe
   pas sur ordinateur, où la place ne manque pas. */
@media (min-width: 769px) {
  .pe-bascule, .pe-sortie { display: none !important; }
  body.plein-ecran .header,
  body.plein-ecran .sidebar,
  body.plein-ecran #pied-legal-2i2d,
  body.plein-ecran [data-pied-legal] { display: revert !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-bascule, .pe-sortie { transition: none; }
}