/* Salle : bandeau, scène et zone de dialogue (tâche 3.3), aux couleurs de la
   maquette visuels/interface/explication_pc_v02.png : ivoire chaud, vert des boutons.

   Disposition (décision de Xavier du 11 octobre 2026) : sous un bandeau fin, la
   salle prend toute la place disponible en gardant son format 16:9 ; le dialogue
   se pose, semi-transparent, sur le bas de la scène (sol et jambes du chien),
   sans jamais couvrir le tableau, qui occupe le haut de la scène (fractions
   `tableau` : de 0,9 % à 68 % de la hauteur). Sur téléphone en paysage, le
   bandeau garde sa propre rangée au-dessus de la scène avec les commandes de
   pages ; le champ se replie derrière « Écrire ». La scène occupe la hauteur
   restante sans recouvrir ces commandes. Sur téléphone en
   portrait, la salle est remplacée par l'invitation à tourner le téléphone. */

.ecran-salle {
  --ivoire: #fbf6ee;
  --ivoire-fonce: #efe6d8;
  --encre: #2f2a24;
  --encre-douce: #6b6258;
  --vert: #4f7a52;
  --vert-clair: #e7efe3;
  --rouge-doux: #b5523f;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--fond);
  color: var(--encre);
}

/* --- Bandeau ----------------------------------------------------------------- */

.salle-bandeau {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--ivoire);
  border-bottom: 1px solid var(--ivoire-fonce);
}

.salle-bandeau-gauche, .salle-bandeau-droite { display: flex; align-items: center; gap: 8px; min-width: 0; }
.salle-bandeau-gauche { flex-wrap: wrap; }
.salle-bandeau-droite { justify-content: flex-end; flex-wrap: wrap; }
.salle-bandeau-lecture { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.salle-navigation-tableau { display: flex; align-items: center; min-width: 0; }
.salle-navigation-tableau:empty { display: none; }

.salle-bandeau-bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  white-space: nowrap;
}
.salle-bandeau-bouton:hover, .salle-bandeau-bouton:focus-visible { background: var(--ivoire-fonce); }
.dialogue-relire { border: 1px solid var(--ivoire-fonce); background: #fff; }
.dialogue-documents-acces[hidden] { display: none; }
.reglage-voix { white-space: normal; line-height: 1.2; }
.reglage-voix[aria-pressed="true"] { background: var(--vert-clair); color: var(--vert); }
.reglage-voix:disabled { opacity: 0.6; cursor: wait; }

.salle-matiere { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1.15rem; font-weight: 700; color: var(--vert); text-align: center; white-space: nowrap; }
.dialogue-activite { color: var(--encre-douce); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mission 7 (V1, offre unique) : l'offre et la langue ne sont plus affichées. */
.salle-abonnement, .salle-langue { display: none !important; }
.salle-abonnement-ancien { font-size: 0.8rem; color: var(--encre-douce); border: 1px solid var(--ivoire-fonce); border-radius: 999px; padding: 2px 10px; }
.salle-langue { font-weight: 600; padding: 3px 9px; border: 1px solid var(--ivoire-fonce); border-radius: var(--rayon); }
.salle-son { font-size: 1.15rem; }

/* Dans une fenêtre étroite hors téléphone en paysage, les trois parties du
   bandeau prennent chacune leur ligne : aucun texte ni bouton ne se superpose.
   Le bandeau compact du paysage court reste défini plus bas. */
@media (max-width: 1024px) {
  .salle-bandeau { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .salle-bandeau-gauche, .salle-bandeau-droite { justify-content: center; flex-wrap: wrap; }
  .salle-matiere { white-space: normal; }
}

/* --- Scène ------------------------------------------------------------------- */

.salle-cadre {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.salle-cadre .salle-scene {
  width: min(100cqw, calc(100cqh * 16 / 9));
  container-type: inline-size;   /* tailles du dialogue proportionnelles à la scène */
}

/* --- Dialogue posé sur le bas de la scène -------------------------------------- */

.dialogue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0.5em 0.8em 0.6em;
  font-size: clamp(13px, 1.45cqw, 18px);
  background: linear-gradient(to bottom, rgb(251 246 238 / 0.82), rgb(251 246 238 / 0.94));
  border-top: 1px solid rgb(239 230 216 / 0.9);
  color: var(--encre);
}

.dialogue-ligne { display: flex; align-items: center; gap: 0.6em; }

/* Une panne de voix reste lisible au-dessus de la bulle, dans le flux : elle
   ne recouvre ni les mots du professeur, ni la saisie et le micro en paysage. */
.dialogue-voix, .dialogue-tableau, .dialogue-entree, .dialogue-preparation {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.2em 0.6em;
  border-radius: var(--rayon);
  background: var(--ivoire-fonce);
  color: var(--encre-douce);
  font-size: 0.8em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dialogue-avatar {
  flex: 0 0 auto;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background-color: var(--ivoire-fonce);
  background-position: center 18%;
  background-size: 260%;
  background-repeat: no-repeat;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
}

/* Bulle unique de hauteur fixe : son contenu ne la fait jamais grandir ; si le
   texte la dépasse, elle défile en suivant le mot en cours (panneau.js). */
.dialogue-bulle {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 4.3em;
  overflow-y: auto;
  padding: 0.35em 0.9em;
  background: rgb(231 239 227 / 0.95);
  border-radius: 14px;
  /* Hauteur d'une ligne du texte et socle (marges, nom du professeur) : la
     poignée règle la bulle en nombre de lignes (panneau.js). */
  --ligne-bulle: 1.3em;
  --socle-bulle: calc(0.8em + 1.4 * max(12px, 0.8em));
}
.dialogue-bulle-attente { background: var(--ivoire-fonce); font-style: italic; }
.dialogue-bulle-erreur { background: #f7e1dc; color: #6e2a22; }

.dialogue-nom { display: block; font-weight: 700; font-size: 0.8em; color: var(--vert); }
.dialogue-texte { margin: 0.1em 0 0; line-height: 1.3; }

/* Les mots non encore dits gardent leur place (la bulle ne bouge pas). */
.dialogue-mot { visibility: hidden; }
.dialogue-mot-visible { visibility: visible; }

.dialogue-suite, .dialogue-envoyer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.6em;
  padding: 0.3em 1.1em;
  border: 0;
  border-radius: 12px;
  background: var(--vert);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.dialogue-suite[hidden] { display: none; }
.dialogue-suite:hover, .dialogue-envoyer:hover { filter: brightness(1.08); }
.dialogue-envoyer:disabled { opacity: 0.5; cursor: default; }

.dialogue-dictee, .dialogue-joindre {
  flex: 0 0 auto;
  width: 2.6em;
  height: 2.6em;
  border: 1px solid #4e7853;
  border-radius: 12px;
  background: #fffdf5;
  color: #315939;
  font-size: 1.15em;
  cursor: pointer;
}
.dialogue-dictee[aria-pressed="true"] { background: #f7d4ca; }
.dialogue-dictee:disabled, .dialogue-joindre:disabled { opacity: 0.5; cursor: default; }
.dialogue-joindre { font-size: 1.15em; }
.dialogue-joindre[aria-expanded="true"] { background: var(--vert-clair); }
.dialogue-envoyer { justify-content: center; width: 2.6em; padding: 0.3em; font-size: 1.15em; }

/* Les propositions restent près de la réponse. Les commandes du champ
   occupent leur propre rangée, même lorsqu'il reste de la place à côté. */
.dialogue-bas { display: flex; align-items: center; padding-left: 3.8em; }

.dialogue-reponses { display: flex; flex-wrap: wrap; gap: 0.4em; min-width: 0;
  margin-left: 3.8em; max-height: 5.5em; overflow: auto; }
.dialogue-reponses:empty { display: none; }

.dialogue-reponse, .dialogue-choix {
  min-height: 2.4em;
  padding: 0.2em 0.9em;
  border: 2px solid var(--vert);
  border-radius: 999px;
  background: #fff;
  color: var(--vert);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.dialogue-reponse:disabled, .dialogue-choix:disabled { opacity: 0.55; cursor: default; }

.dialogue-choix { display: inline-flex; align-items: center; gap: 0.5em; border-radius: 12px; }
.dialogue-lettre {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  font-size: 0.85em;
}
.dialogue-choix-correct { border-color: var(--vert); background: var(--vert-clair); opacity: 1 !important; }
.dialogue-choix-faux { border-color: var(--rouge-doux); color: var(--rouge-doux); opacity: 1 !important; }
.dialogue-choix-faux .dialogue-lettre { background: var(--rouge-doux); }

/* Énoncé d'une question de QCM, sur toute la largeur, au-dessus des quatre choix. */
.dialogue-enonce { flex: 1 0 100%; margin: 0; line-height: 1.25; }

.dialogue-formulaire { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.35em; min-width: 0; }
.dialogue-saisie-ligne { display: flex; align-items: center; gap: 0.5em; min-width: 0; }
.dialogue-commandes-saisie { flex: 0 0 auto; display: flex; align-items: center; gap: 0.35em; }
.dialogue-piece-jointe { position: relative; display: flex; align-items: center; }
.documents-choix-joint { position: absolute; right: 0; bottom: calc(100% + 6px);
  display: flex; flex-direction: column; gap: 0.4em; width: max-content; max-width: min(24em, 80vw);
  padding: 0.4em; border: 1px solid var(--ivoire-fonce); border-radius: 10px; background: var(--ivoire);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.2); }
.documents-choix-joint .document-bouton { text-align: left; }
.documents-choix-joint[hidden] { display: none; }
/* Le menu explicitement ouvert passe au-dessus de la consultation sans
   changer sa hauteur ni fermer la copie. */
.dialogue:has(.documents-choix-joint:not([hidden])) { z-index: 10; }
/* Le QCM conserve son énoncé et ses quatre choix sur leurs propres rangées ;
   son champ de saisie se trouve désormais dans un conteneur distinct. */
.dialogue-reponses:has(.dialogue-choix) { max-height: none; }

.dialogue-champ {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.6em;
  padding: 0.3em 0.9em;
  border: 1px solid var(--ivoire-fonce);
  border-radius: 12px;
  background: #fff;
  color: var(--encre);
}
.dialogue-champ:disabled { background: var(--ivoire); }

/* Bouton « Écrire » : seulement sur téléphone en paysage, où le champ se replie. */
.dialogue-ecrire { display: none; }

/* Mode d'essai (réponses enregistrées), signalé au-dessus du dialogue. */
.dialogue-essai {
  position: absolute;
  right: 0.6em;
  bottom: calc(100% + 0.3em);
  margin: 0;
  padding: 0.1em 0.6em;
  border-radius: var(--rayon);
  background: rgb(251 246 238 / 0.85);
  color: #8a5a00;
  font-size: 0.75em;
}

/* --- Invitation à tourner le téléphone ---------------------------------------- */

.salle-tourner { display: none; }

/* Mission 7 : seuls les téléphones (largeur ≤ 600 px en portrait) sont invités à
   tourner ; une tablette tenue en portrait entre dans la salle. */
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
  .ecran-salle { background: var(--ivoire); }
  .ecran-salle > :not(.salle-tourner) { display: none; }
  .salle-tourner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 24px;
    text-align: center;
    font-size: 1.2rem;
  }
  .salle-tourner-icone { font-size: 3rem; }
  .salle-tourner-detail { color: var(--encre-douce); font-size: 1rem; }
}

/* --- Téléphone en paysage ------------------------------------------------------ */

@media (orientation: landscape) and (max-height: 500px) {
  /* Les pages restent à côté de Relire dans leur propre rangée au-dessus de
     la scène. Réserver cette hauteur empêche les commandes de couvrir le
     schéma, même avec le dialogue ouvert et une ancienne page consultée. */
  .salle-bandeau {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 6px;
    padding: 2px 4px;
  }
  .salle-matiere, .salle-langue, .salle-abonnement, .dialogue-activite, .dialogue-relire-texte,
  .documents-consulter-texte, .dialogue-sources-texte { display: none; }
  .salle-bandeau-bouton { min-height: 34px; padding: 2px 8px; }
  .salle-bandeau-gauche { flex-wrap: wrap; gap: 3px; justify-content: flex-start; }
  .salle-bandeau-lecture { gap: 3px; }
  .tableau-navigation-bandeau { gap: 3px; }
  .tableau-navigation-bandeau .tableau-fleche-page { min-width: 32px; min-height: 34px; padding: 2px 6px; }
  .tableau-navigation-bandeau .tableau-numero { max-width: 10em; padding: 4px 6px; white-space: normal; }
  .dialogue-relire { border: 0; background: transparent; }

  .dialogue { font-size: 13px; gap: 3px; padding: 4px 8px 5px; }
  .dialogue-avatar { width: 34px; height: 34px; }
  .dialogue-nom { display: none; }
  .dialogue-bulle { height: 3.1em; padding: 3px 10px; --socle-bulle: calc(6px + 0.1em); }
  .dialogue-bas { padding-left: 42px; gap: 4px; }
  .dialogue-reponses { margin-left: 42px; flex-wrap: nowrap; max-height: none; overflow-x: auto; }
  .dialogue-reponses > .dialogue-reponse { flex: 0 0 auto; }
  .dialogue-reponses:has(.dialogue-choix) { flex-wrap: wrap; max-height: 8em; }
  /* Écrire ouvre la rangée du formulaire sans déplacer les propositions ni
     mélanger les commandes de saisie aux quatre choix de QCM. */
  .dialogue-suite, .dialogue-envoyer, .dialogue-champ { min-height: 36px; }
  .dialogue-envoyer, .dialogue-dictee, .dialogue-joindre { width: 36px; height: 36px; }
  .dialogue-reponse, .dialogue-choix { min-height: 32px; padding: 1px 9px; }

  .dialogue-ecrire {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 2px 10px;
    border: 2px solid var(--vert);
    border-radius: 12px;
    background: #fff;
    color: var(--vert);
    font-weight: 600;
    cursor: pointer;
  }
  .dialogue-formulaire { display: none; }
  .dialogue-saisie-ouverte .dialogue-formulaire { display: flex; flex: 1 1 auto; }
  .dialogue-saisie-ouverte .dialogue-ecrire { display: none; }
}

/* --- Poignée : régler la hauteur du dialogue ou le masquer ----------------------
   Décision de Xavier du 19 octobre 2026 (mission 8), à la place de la flèche de
   repli : glisser vers le haut ou le bas règle le nombre de lignes de la bulle,
   jusqu'en bas masque le dialogue, un toucher le masque ou le réaffiche. Le
   glissement est réservé à la poignée : la page ne défile pas sous le doigt. */

.dialogue-replier {
  position: absolute;
  right: 0.6em;
  bottom: calc(100% + 0.3em);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  line-height: 1;
  min-height: 2em;
  padding: 0.1em 0.8em;
  border: 1px solid var(--ivoire-fonce);
  border-radius: 999px;
  background: rgb(251 246 238 / 0.85);
  color: var(--encre-douce);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Trois traits dessinés, signe habituel d'une poignée à faire glisser ; leur
   forme ne dépend d'aucune police du téléphone. */
.dialogue-replier-icone {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 10px;
  background:
    linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.dialogue-replier-texte { display: none; }
.dialogue-essai { right: 3.4em; }

.dialogue.dialogue-repliee {
  left: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.dialogue-repliee > :not(.dialogue-replier) { display: none !important; }
.dialogue-repliee .dialogue-replier { position: static; margin: 0 0.6em 0.6em 0; min-height: 2.4em; }
.dialogue-repliee .dialogue-replier-texte { display: inline; }

/* --- Points et niveau (objectif 6) ---------------------------------------------- */

.salle-points { position: relative; font-weight: 700; color: #8a5a00; white-space: nowrap; font-size: 0.9rem; }

.points-envol {
  position: absolute;
  margin-left: -4em;
  margin-top: 1.4em;
  color: var(--vert);
  font-weight: 800;
  pointer-events: none;
  animation: points-envol 1.2s ease-out forwards;
}
@keyframes points-envol {
  from { opacity: 0; transform: translateY(6px) scale(0.8); }
  20% { opacity: 1; transform: translateY(0) scale(1.15); }
  to { opacity: 0; transform: translateY(-18px) scale(1); }
}

/* Passage de niveau : étoile et texte qui rebondissent au centre de la scène. */
.niveau-fete {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 1em;
  border-radius: 999px;
  background: rgb(251 246 238 / 0.95);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
  color: #8a5a00;
  font-size: clamp(18px, 3cqw, 36px);
  font-weight: 800;
  pointer-events: none;
  animation: niveau-fete 2.2s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
@keyframes niveau-fete {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(0.5); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  30% { transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -16px) scale(0.95); }
}
.niveau-etoile { display: inline-block; animation: niveau-etoile 0.9s ease-in-out 2; }
@keyframes niveau-etoile { 50% { transform: rotate(18deg) scale(1.25); } }

@media (prefers-reduced-motion: reduce) {
  .points-envol, .niveau-fete, .niveau-etoile { animation-duration: 0.01s; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .salle-points { display: none; }
}

/* --- Relecture des échanges et sources (tâche 3.7) -------------------------------- */

.relecture {
  position: absolute;
  inset: 4% 6%;
  z-index: 7;
  display: flex;
  flex-direction: column;
  padding: 0.8em 1em;
  border-radius: 16px;
  background: rgb(251 246 238 / 0.97);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.3);
  color: var(--encre);
  font-size: clamp(13px, 1.4cqw, 17px);
}
.relecture-entete { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.relecture-entete h2 { margin: 0; font-size: 1.15em; color: var(--vert); }
.relecture-fermer {
  min-height: 2.4em;
  padding: 0.2em 1em;
  border: 0;
  border-radius: 12px;
  background: var(--vert);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.relecture-liste { flex: 1 1 auto; overflow-y: auto; margin: 0.6em 0 0; padding: 0 0.3em 0 0; list-style: none; }
.relecture-liste li { margin: 0 0 0.6em; }
.relecture-qui { display: block; font-size: 0.8em; font-weight: 700; color: var(--encre-douce); }
.relecture-professeur .relecture-qui { color: var(--vert); }
.relecture-texte { margin: 0.1em 0 0; line-height: 1.35; }
.relecture-eleve { padding-left: 2em; }
.relecture-eleve .relecture-texte { background: #fff; border-radius: 10px; padding: 0.2em 0.6em; display: inline-block; }
.relecture-vide { color: var(--encre-douce); font-style: italic; }
.source-detail { color: var(--encre-douce); font-size: 0.9em; }

.dialogue-sources {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 2.4em;
  padding: 0.2em 0.8em;
  border: 1px solid var(--ivoire-fonce);
  border-radius: 12px;
  background: #fff;
  color: var(--encre);
  cursor: pointer;
}

/* Documents d'élève et activité scolaire : commandes indépendantes des
   ressources du Tableau enrichi et des quatre réponses de QCM. */
.dialogue-dictee-scolaire, .documents-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
}
.dialogue-dictee-scolaire { margin-left: 3.8em; padding: 0.3em 0.5em;
  border: 1px solid var(--ivoire-fonce); border-radius: 10px; background: var(--ivoire-fonce); }
.dialogue-dictee-scolaire[hidden], .documents-selection[hidden] { display: none; }
.dictee-etape { flex: 0 0 auto; font-size: 0.85em; font-weight: 600; }
.dictee-actions { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 0.4em; min-width: 0; }
.dialogue-document-etat { margin: 0; font-size: 0.85em; color: var(--encre-douce); }
.documents-selection { max-height: 4.5em; overflow: auto; }
.document-selection { display: flex; flex-wrap: wrap; gap: 0.3em; align-items: center; font-size: 0.85em;
  padding: 0.25em 0.5em; border: 1px solid var(--ivoire-fonce); border-radius: 9px; background: #fff; }
.document-selection > span { flex: 1 1 15em; min-width: 0; overflow-wrap: anywhere; }
.document-bouton {
  flex: 0 0 auto;
  min-height: 2.4em;
  padding: 0.25em 0.7em;
  border: 1px solid var(--vert);
  border-radius: 9px;
  background: #fff;
  color: var(--vert);
  cursor: pointer;
}
.document-bouton:disabled { opacity: 0.5; cursor: default; }
.documents-panneau {
  position: absolute;
  top: 6px;
  left: 30%;
  right: 6px;
  /* Le navigateur mesure ensuite la bulle, les choix et la saisie réellement
     affichés. Le document reste dans la scène, sans recouvrir cette parole. */
  bottom: 34%;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-height: 0;
  padding: 0.5em;
  border-radius: 14px;
  background: var(--ivoire);
  box-shadow: 0 6px 30px rgb(0 0 0 / 0.3);
  color: var(--encre);
  font-size: clamp(14px, 1.4cqw, 18px);
  box-sizing: border-box;
  overflow: hidden;
}
.documents-entete { display: flex; justify-content: space-between; align-items: center; gap: 0.5em; }
.documents-entete h2 { font-size: 1.1em; margin: 0; color: var(--vert); }
.documents-vues { display: none; }
.documents-vues .document-bouton[aria-pressed="true"] { color: #fff; background: var(--vert); }
.documents-outils { flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; min-height: 0; padding-bottom: 2px; }
.documents-outils > * { flex-shrink: 0; }
.document-choix { max-width: 12em; min-height: 2.4em; }
.documents-contenu { min-height: 0; overflow: hidden; flex: 1 1 auto; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: 0.5em; }
.documents-contenu:has(.document-detail:empty) { grid-template-columns: minmax(0, 1fr); }
.documents-correction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1em; }
.document-copie, .document-detail { min-width: 0; min-height: 0; }
.document-copie { display: flex; flex-direction: column; }
.document-copie h3 { flex: 0 0 auto; margin: 0 0 0.3em; font-size: 0.95em; overflow-wrap: anywhere; }
.document-detail { overflow: auto; }
.document-image-vue { overflow: auto; flex: 1 1 auto; min-height: 0; }
.document-image-cadre { position: relative; width: calc(100% * var(--document-zoom, 1)); background: #fff; }
.document-image { width: 100%; height: auto; display: block; }
.document-zone { position: absolute; border: 3px solid #d58b27; background: rgb(255 213 103 / 0.15); pointer-events: none; }
.document-reference, .document-passage { white-space: pre-wrap; line-height: 1.5; }
.document-doute, .document-erreur { margin: 0.65em 0; padding: 0.6em; background: #fff; border-radius: 9px; }
.document-doute-courant { border: 2px solid #d58b27; }
.document-selection-choix { display: flex; gap: 0.5em; align-items: center; margin: 0.4em 0; min-height: 2em; }
.document-selection-choix input { flex: 0 0 auto; }
.document-selection-copie fieldset { min-width: 0; border: 1px solid var(--ivoire-fonce); }
.document-doute h3, .document-erreur h4 { margin: 0 0 0.4em; }
.document-clarification { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.5em; }
.document-precision-champ { flex: 1 1 12em; min-width: 0; padding: 0.4em; border: 1px solid var(--ivoire-fonce); border-radius: 8px; }
@media (max-width: 900px), (max-height: 500px) {
  /* La copie garde son propre défilement et son zoom pendant la lecture du
     corrigé. Les outils défilent sur une seule rangée, sans manger l'image. */
  .documents-panneau { font-size: 14px; gap: 4px; padding: 5px; border-radius: 9px; }
  .documents-correction { gap: 0.5em; }
  .documents-entete { gap: 4px; }
  /* Chaque vue prend toute la largeur disponible. Elles alternent sans
     reconstruire les pixels ou perdre le zoom et les précisions en cours. */
  .documents-entete h2 { display: none; }
  .documents-vues { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
  .documents-contenu, .documents-contenu.documents-correction { grid-template-columns: minmax(0, 1fr); }
  .documents-panneau[data-vue="copie"] .document-detail,
  .documents-panneau[data-vue="detail"] .document-copie { display: none; }
  .document-copie h3 { display: none; } /* Le nom reste dans le choix de document. */
  .document-detail > h3:first-child { margin-top: 0; }
  /* Une copie de grande résolution ne devient pas une miniature de quelques
     pixels par lettre : partir d'une demi-échelle de pixels, puis laisser le
     lecteur zoomer et faire défiler, sans découper une région présumée. */
  .document-image-cadre { width: calc(max(100%, calc(var(--document-pixels) / 2)) * var(--document-zoom, 1)); }
  .documents-entete .document-bouton { min-height: 30px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .dialogue-dictee-scolaire { margin-left: 42px; flex-wrap: nowrap; padding: 2px 4px; gap: 6px; }
  .dictee-actions { flex-wrap: nowrap; overflow-x: auto; }
  .document-bouton { min-height: 32px; }
  .documents-selection { max-height: 3em; }
  .dictee-etape { font-size: 0.8em; }
  /* Le menu photo/import appartient au formulaire déplié par Écrire ; son
     ancrage au bouton ne réduit plus la hauteur de la copie. */
  .documents-choix-joint { gap: 4px; padding: 3px; }
}

/* --- Mission 7 (V1) : dialogue, téléphone, iPhone ------------------------------- */

/* Dialogue « en mélange » (décision de Xavier) : il reste posé sur la scène, dans
   l'espace sous les pieds du professeur. Quand l'écran est plus haut que la
   scène 16:9, la scène se cale en haut et le dialogue descend dans la place
   libre en dessous : il déborde hors de la scène et dégage le professeur. Sans
   place libre (écran large), rien ne change : il recouvre le bas de la scène.
   Dans le dialogue, 100cqh est la hauteur du cadre et 56.25cqw la hauteur de la
   scène (16:9) : leur différence est la place libre sous la scène. */
@media not ((orientation: landscape) and (max-height: 500px)) {
  .salle-cadre { align-items: flex-start; }
  .salle-cadre .salle-scene { overflow: visible; }
  .salle-cadre .salle-scene .dialogue { bottom: calc(-1 * max(0px, 100cqh - 56.25cqw)); }
}

/* Textes utiles jamais sous 12 px (mesures du 18 octobre). */
.dialogue-voix, .dialogue-tableau, .dialogue-entree, .dialogue-preparation { font-size: max(12px, 0.8em); }
.dialogue-nom { font-size: max(12px, 0.8em); }
.dialogue-lettre { font-size: max(12px, 1em); }

/* Téléphone en paysage : cibles tactiles d'au moins 44 px (décision de Xavier). */
@media (orientation: landscape) and (max-height: 500px) {
  .salle-bandeau-bouton { min-height: 44px; min-width: 44px; }
  .tableau-navigation-bandeau .tableau-fleche-page { min-width: 44px; min-height: 44px; }
  .dialogue-reponse, .dialogue-choix, .dialogue-suite, .dialogue-champ, .dialogue-ecrire { min-height: 44px; }
  .dialogue-envoyer, .dialogue-dictee, .dialogue-joindre { width: 44px; height: 44px; }
  .dialogue-replier, .dialogue-repliee .dialogue-replier { min-height: 44px; min-width: 44px; }
}

/* iPhone : encoche et barre d'accueil (zones sûres) prises en compte dans la salle,
   et hauteur réellement visible quand le clavier est ouvert (app.js règle
   --hauteur-visible depuis visualViewport, que Safari applique sans redimensionner). */
.ecran-salle {
  height: var(--hauteur-visible, 100dvh);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
.salle-bandeau { padding-top: max(2px, env(safe-area-inset-top)); }

/* --- Téléphone en paysage : colonne de commandes à droite ------------------------
   Décision de Xavier du 18 octobre 2026 (mission 8). Sur téléphone seulement, le
   bandeau quitte le haut de l'écran pour une colonne crème à droite, du fond du
   bandeau : la scène gagne toute la hauteur. En haut, la navigation (Menu,
   Relire, pages du tableau, documents, sources) ; plus bas, la voix et le son ;
   en bas, Écrire, Parler et Joindre. Chaque bouton aligne une icône et, à sa
   droite, un libellé qui dit à quoi il sert. Continuer, les propositions et le
   bouton de repli restent dans le dialogue ; la saisie s'ouvre toujours en bas,
   dans le dialogue. La marge gauche éventuelle reste sombre. Sur PC et tablette,
   rien ne change. Les icônes sont des masques dessinés à la couleur du texte,
   indépendants des polices d'emoji du téléphone. */
.salle-telephone {
  height: var(--hauteur-salle, 100dvh);
  --colonne-telephone: 10rem;
  --icone-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
  --icone-relire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 2.6-6.4L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
  --icone-documents: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --icone-sources: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E");
  --icone-voix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.2 7.5L3 21l2-5.6A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E");
  --icone-son: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
  --icone-son-coupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M22 9l-6 6M16 9l6 6'/%3E%3C/svg%3E");
  --icone-ecrire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
  --icone-parler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M8 22h8'/%3E%3C/svg%3E");
  --icone-arreter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
  --icone-joindre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1l-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E");
  --icone-precedent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  --icone-suivant: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}
.dialogue-outils-telephone { display: none; }
.salle-paysage { min-height: 44px; padding: 8px 16px; background: var(--vert); color: #fff; border: 0; border-radius: 10px; }

@media (orientation: landscape) {
  .ecran-salle.salle-telephone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--colonne-telephone) + env(safe-area-inset-right));
    grid-template-rows: minmax(0, 1fr) auto;
    padding-right: 0;
    background: var(--fond);
  }
  .salle-telephone > .salle-cadre { grid-column: 1; grid-row: 1 / span 2; }

  /* Bandeau devenu haut de colonne : une seule liste verticale, la voix et le
     son poussés vers le bas de cette partie. */
  .salle-telephone > .salle-bandeau {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;   /* défilement au doigt ; aucune largeur prise aux libellés */
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 4px 6px;
    border-bottom: 0;
    border-left: 1px solid var(--ivoire-fonce);
  }
  .salle-telephone .salle-bandeau-gauche,
  .salle-telephone .salle-bandeau-droite,
  .salle-telephone .salle-bandeau-lecture { display: contents; }
  .salle-telephone .salle-matiere, .salle-telephone .dialogue-activite,
  .salle-telephone .salle-points, .salle-telephone .salle-langue,
  .salle-telephone .salle-abonnement { display: none; }

  /* Bas de colonne : Écrire, Parler et Joindre, au-dessus du clavier s'il est ouvert. */
  .salle-telephone > .dialogue-outils-telephone {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px max(6px, env(safe-area-inset-right)) calc(var(--retrait-clavier, 0px) + max(8px, env(safe-area-inset-bottom))) 6px;
    border-top: 1px solid var(--ivoire-fonce);
    border-left: 1px solid var(--ivoire-fonce);
    background: var(--ivoire);
  }
  .salle-telephone .dialogue-outils-telephone .dialogue-piece-jointe { display: block; }

  /* Rangée commune : icône alignée, puis le libellé à sa droite. */
  .salle-telephone .salle-bandeau .salle-bandeau-bouton,
  .salle-telephone .salle-bandeau .dialogue-sources,
  .salle-telephone .dialogue-outils-telephone .dialogue-ecrire,
  .salle-telephone .dialogue-outils-telephone .dialogue-dictee,
  .salle-telephone .dialogue-outils-telephone .dialogue-joindre {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 44px;   /* cible tactile d'au moins 44 px (décision de Xavier) */
    margin: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--encre);
    font: 600 14px/1.15 system-ui, sans-serif;
    text-align: left;
    white-space: normal;
  }
  .salle-telephone .salle-bandeau .salle-bandeau-bouton::before,
  .salle-telephone .salle-bandeau .dialogue-sources::before,
  .salle-telephone .dialogue-outils-telephone button.dialogue-ecrire::before,
  .salle-telephone .dialogue-outils-telephone .dialogue-dictee::before,
  .salle-telephone .dialogue-outils-telephone .dialogue-joindre::before {
    content: '';
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background-color: var(--vert);
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
  }
  .salle-telephone .salle-bandeau .salle-bandeau-bouton:not(:disabled):hover,
  .salle-telephone .salle-bandeau .salle-bandeau-bouton:focus-visible,
  .salle-telephone .salle-bandeau .dialogue-sources:hover,
  .salle-telephone .dialogue-outils-telephone button:not(:disabled):hover,
  .salle-telephone .dialogue-outils-telephone button:focus-visible { background: var(--ivoire-fonce); }
  .salle-telephone .salle-bandeau button:disabled,
  .salle-telephone .dialogue-outils-telephone button:disabled { opacity: 0.45; }

  .salle-telephone .salle-retour { --icone: var(--icone-menu); }
  .salle-telephone .salle-retour .salle-fleche { display: none; }
  .salle-telephone .dialogue-relire { --icone: var(--icone-relire); }
  .salle-telephone .dialogue-relire > span:first-child { display: none; }
  .salle-telephone .dialogue-relire .dialogue-relire-texte { display: inline; }
  .salle-telephone .dialogue-documents-acces { --icone: var(--icone-documents); }
  .salle-telephone .dialogue-documents-acces > span:first-child { display: none; }
  .salle-telephone .dialogue-documents-acces .documents-consulter-texte { display: inline; }
  .salle-telephone .dialogue-documents-acces[hidden] { display: none; }
  .salle-telephone .dialogue-sources { --icone: var(--icone-sources); }
  .salle-telephone .dialogue-sources > span:first-child { display: none; }
  .salle-telephone .dialogue-sources .dialogue-sources-texte { display: inline; }
  .salle-telephone .reglage-voix { --icone: var(--icone-voix); }
  .salle-telephone .salle-bandeau .reglage-voix { margin-top: auto; }
  .salle-telephone .dialogue-outils-telephone .dialogue-ecrire { --icone: var(--icone-ecrire); }
  .salle-telephone .dialogue-outils-telephone .dialogue-ecrire > span:first-child { display: none; }
  .salle-telephone:has(.dialogue-saisie-ouverte) .dialogue-outils-telephone .dialogue-ecrire { background: var(--vert-clair); }

  /* Symboles réécrits par leur propre logique (son, micro, pièce jointe) : le
     symbole est masqué et le libellé de l'état courant s'affiche à sa place. */
  .salle-telephone .salle-bandeau .salle-son,
  .salle-telephone .dialogue-outils-telephone .dialogue-dictee,
  .salle-telephone .dialogue-outils-telephone .dialogue-joindre { font-size: 0; gap: 0; }
  /* Le symbole masqué reste un élément de la rangée : l'écart est porté par le
     libellé lui-même, pour l'aligner exactement sur les autres. */
  .salle-telephone .salle-bandeau .salle-son::after,
  .salle-telephone .dialogue-outils-telephone .dialogue-dictee::after,
  .salle-telephone .dialogue-outils-telephone .dialogue-joindre::after {
    content: attr(data-legende);
    margin-left: 10px;
    font-size: 14px;
  }
  .salle-telephone .salle-bandeau .salle-son[aria-pressed="true"]::after,
  .salle-telephone .dialogue-outils-telephone .dialogue-dictee[aria-pressed="true"]::after { content: attr(data-legende-active); }
  .salle-telephone .salle-son { --icone: var(--icone-son); }
  .salle-telephone .salle-son[aria-pressed="true"] { --icone: var(--icone-son-coupe); }
  .salle-telephone .dialogue-outils-telephone .dialogue-dictee { --icone: var(--icone-parler); }
  .salle-telephone .dialogue-outils-telephone .dialogue-dictee[aria-pressed="true"] { --icone: var(--icone-arreter); background: #f7d4ca; }
  .salle-telephone .dialogue-outils-telephone .dialogue-joindre { --icone: var(--icone-joindre); }
  .salle-telephone .dialogue-outils-telephone .dialogue-joindre[aria-expanded="true"] { background: var(--vert-clair); }
  /* Le choix photo ou fichier s'ouvre vers la scène, à gauche de la colonne. */
  .salle-telephone .dialogue-outils-telephone .documents-choix-joint {
    position: absolute;
    right: calc(100% + 8px);
    left: auto;
    bottom: 0;
    max-height: calc(var(--hauteur-visible, 100dvh) - 64px);
    overflow-y: auto;
  }

  /* Bulle du professeur (demande de Xavier du 19 octobre 2026) : les commandes
     étant passées dans la colonne, la bulle montre quatre lignes de texte. Elle
     en garde trois quand une rangée de propositions ou le formulaire s'ajoute
     dessous, pour ne pas recouvrir le tableau, et sa hauteur ordinaire pendant
     un QCM, dont l'énoncé et les quatre choix occupent déjà le bas de la scène. */
  .salle-telephone .dialogue .dialogue-bulle { height: calc(5.2em + 6px); }
  .salle-telephone .dialogue:has(.dialogue-reponses[data-genre="propositions"]:not(:empty)) .dialogue-bulle,
  .salle-telephone .dialogue.dialogue-saisie-ouverte .dialogue-bulle { height: calc(3.9em + 6px); }
  .salle-telephone .dialogue:has(.dialogue-reponses[data-genre="qcm"]) .dialogue-bulle { height: 3.1em; }

  /* Pages du tableau : une rangée centrée, chevrons de part et d'autre. */
  .salle-telephone .salle-navigation-tableau { display: block; }
  .salle-telephone .salle-navigation-tableau:empty { display: none; }
  .salle-telephone .tableau-navigation-bandeau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 2px 0;
  }
  .salle-telephone .tableau-navigation-bandeau .tableau-numero {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 4px 0;
    background: transparent;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .salle-telephone .tableau-navigation-bandeau .tableau-fleche-page {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--ivoire-fonce);
    border-radius: 10px;
    background: #fff;
    font-size: 0;
  }
  .salle-telephone .tableau-navigation-bandeau .tableau-fleche-page::before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: var(--vert);
    -webkit-mask: var(--icone-suivant) center / contain no-repeat;
    mask: var(--icone-suivant) center / contain no-repeat;
  }
  .salle-telephone .tableau-navigation-bandeau .tableau-fleche-page:first-child::before {
    -webkit-mask-image: var(--icone-precedent);
    mask-image: var(--icone-precedent);
  }

  /* Petite hauteur (barre d'adresse visible) : les cibles gardent 44 px ;
     le haut de la colonne défile, le bas (Écrire, Parler, Joindre) reste visible. */
}
.clavier-salle .salle-telephone .dialogue-formulaire {
  position: fixed;
  left: 4px;
  right: 4px;
  bottom: calc(var(--retrait-clavier) + 6px);
  z-index: 9;
  padding: 6px;
  border-radius: 10px;
  background: var(--ivoire);
}

/* Bandeau de salle (mission 7) : la matière garde une largeur minimale et le
   bandeau reste sur une seule rangée sur ordinateur et tablette en paysage
   (la matière se raccourcit sans chevaucher) ; il s'empile sous 960 px. */
@media (min-width: 1025px) {
  .salle-bandeau { grid-template-columns: max-content minmax(0, 1fr) max-content; }
}
@media (min-width: 960px) and (max-width: 1024px) and (min-height: 501px) {
  .salle-bandeau { grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 6px; }
  .salle-bandeau-gauche, .salle-bandeau-droite { flex-wrap: nowrap; }
  .salle-matiere { white-space: nowrap; }
  .reglage-voix { white-space: normal; max-width: 9em; }
  /* Place pour la matière et le son : l'étape de la leçon n'est pas affichée à cette taille. */
  .dialogue-activite { display: none; }
}