/* Mode classe : la machine a l'echelle d'une salle.
 *
 * Chargee uniquement quand le corps porte data-affichage="classe". Tout est
 * cadre par cet attribut : aucune de ces regles ne peut fuir sur une autre page.
 *
 * Le mode est ORTHOGONAL AU REGISTRE. Rien ici ne touche au texte, seulement a
 * son echelle : un enseignant projette du contenu de registre « petit » devant
 * une salle, et ces deux choix n'ont pas a se contraindre l'un l'autre.
 */

/* La navigation et le pied disparaissent : on projette un calcul, pas un site.
   Ils restent dans le document — un visiteur au clavier ou au lecteur d'ecran
   les atteint toujours — mais ils ne prennent plus l'ecran. */
[data-affichage="classe"] .nav,
[data-affichage="classe"] .pied {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La barre etant masquee, la compensation de defilement n'a plus d'objet : la
   garder laisserait un vide de 4 a 7rem en haut de la projection. */
[data-affichage="classe"] {
  --barre: 0rem;
}

[data-affichage="classe"] .wrap {
  max-width: none;
  padding: calc(var(--pas) * 4) calc(var(--pas) * 6);
}

/* Echelle en viewport width et non en rem : ce qui compte ici est la taille
   APPARENTE depuis le fond de la salle, donc la part de l'ecran occupee, pas la
   preference de corps du systeme. Les bornes evitent qu'un tableau numerique de
   quatre metres ne rende le nombre illisible de trop pres.
   Volontairement modeste sur le conteneur : le gros de l'echelle est porte par
   les cases de la bande, plus bas. */
[data-affichage="classe"] .classe {
  font-size: clamp(1.0625rem, 1.4vw, 1.5rem);
}

[data-affichage="classe"] .classe-titre {
  font-size: clamp(1.75rem, 3.5vw, 4rem);
  margin: 0 0 calc(var(--pas) * 4);
}

/* Ce sont les CHIFFRES qu'on doit lire du fond de la salle, pas la consigne.
   Une premiere version mettait l'echelle sur le conteneur : la phrase
   d'explication, qui herite de la taille, devenait enorme, tandis que les cases
   gardaient leur taille propre, declaree en clamp dans bande.css. L'ecran
   projetait une consigne geante au-dessus d'un calcul minuscule — exactement
   l'inverse de ce que la salle doit voir. */
[data-affichage="classe"] .case-haut,
[data-affichage="classe"] .case-bas {
  font-size: clamp(2rem, 5vw, 6rem);
}

[data-affichage="classe"] .case-marque,
[data-affichage="classe"] .case[data-etat="traitee"]::after {
  font-size: clamp(0.875rem, 1.4vw, 1.5rem);
}

[data-affichage="classe"] .case[data-retenue]::before {
  font-size: clamp(0.75rem, 1.2vw, 1.25rem);
}

/* L'explication accompagne le calcul, elle ne le remplace pas : lisible depuis
   le fond, mais nettement en dessous des chiffres. */
[data-affichage="classe"] .bande-explication .step-calc {
  font-size: clamp(1.125rem, 1.8vw, 2rem);
}

[data-affichage="classe"] .bande-explication .step-h {
  font-size: clamp(0.875rem, 1.2vw, 1.25rem);
}

/* Les reglages restent atteignables mais cessent d'etre le sujet : c'est la
   bande qu'on regarde, pas le formulaire qui l'a produite. */
[data-affichage="classe"] .classe-saisie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--pas) * 4);
  font-size: var(--t-corps);
  margin-bottom: calc(var(--pas) * 6);
}

[data-affichage="classe"] .classe-clavier,
[data-affichage="classe"] .classe-sortie {
  font-size: var(--t-corps);
  margin-top: calc(var(--pas) * 6);
}

[data-affichage="classe"] .classe-clavier {
  font-family: var(--mono);
  color: var(--ink2);
}

@media print {
  /* Une projection ne s'imprime pas. */
  [data-affichage="classe"] .classe-saisie,
  [data-affichage="classe"] .classe-clavier,
  [data-affichage="classe"] .classe-sortie {
    display: none;
  }
}