/* ============================================================================
   LE LABORATOIRE · interface B, « le pupitre du professeur »
   LE CHAT DU SALON (SPECS 2.11), EN ÉMOTES SEULES DEPUIS LE 2026-10-15
   ----------------------------------------------------------------------------
   Feuille de public/pupitre.html, chargée APRÈS pupitre/socle.css, après les
   sept feuilles d'étape et après celle du classement général. Le programme est
   public/chat.js : cette feuille n'habille que ce qu'il fabrique.

   SUR ORDINATEUR SEULEMENT. Sur téléphone, chat.js ne fabrique rien : aucune
   règle d'ici ne s'applique à rien (ni bouton, ni panneau, ni émote qui vole).
   Tant que les émotes ne sont pas allumées pour cette page, #chat garde son
   attribut hidden et reste vide : la page est celle d'avant, au pixel près.

   Ce que cette feuille habille, ET RIEN D'AUTRE (test/pupitre-feuilles.test.js) :
     #chat            le point d'ancrage : le panneau que chat.js y construit
                      (classes .emotes-…), posé dans la colonne de droite du
                      pupitre, sous les quatre boutons (la place vient du
                      décor, TeleScene.zoneChat()) ; il ne touche ni la scène,
                      ni les boutons, ni la bulle, ni les liens légaux
     body.emotes-present  la page pendant que le panneau est montré

   LE PANNEAU, de haut en bas :
     - le titre gravé (« En lice », « Au salon », « Vainqueur ») et le nombre ;
     - la LISTE des joueurs : de l'information, donc du verre à plat, rien qui
       ressemble à un bouton ; elle défile en elle-même (deux cents joueurs),
       dans un ordre stable (alphabétique, donné par le serveur) ;
     - la bande « Dans le public » : là naissent les émotes de ceux qui ne sont
       pas dans la liste (éliminés) ;
     - la PALETTE : des touches de verre sur un pied de laiton, qui se
       soulèvent sous la souris, s'enfoncent au clic, portent l'anneau au
       clavier. Pendant une question, elle disparaît sans libérer sa place
       (rien ne bouge) et la phrase dit pourquoi ;
     - la couche des ENVOLS, par-dessus tout le panneau, qui ne prend aucun
       clic et ne laisse rien dépasser : une émote ne passe jamais sur la
       question ni sur les réponses.

   ANIMATIONS RÉDUITES : pas d'envol ; une pastille brève, sur place.

   Règles d'écriture : celles du socle (couleurs du thème, ni color-mix(), ni
   :has(), ni « inset: », ni dvh hors de @supports).
   ========================================================================== */


/* ============================================================================
   1. LES RÉGLAGES, ET LE PIED DES TOUCHES
   ========================================================================== */
#chat {
  --emotes-verre: linear-gradient(180deg, rgba(var(--verre-haut), 0.94), rgba(var(--verre-bas), 0.96));
  --emotes-touche: clamp(30px, calc(28 * var(--u)), 40px);  /* une touche de la palette */
  --emotes-dessin: calc(var(--emotes-touche) * 0.74);
  --emotes-envol: clamp(26px, calc(26 * var(--u)), 36px);    /* une émote qui monte */
  --emotes-ecart: 4px;
  --emotes-police: max(12.5px, calc(10.5 * var(--u)));
  --emotes-police-titre: max(11px, calc(9 * var(--u)));
  /* une ligne de la liste des joueurs (2026-10-16, Gautier : « trop petite et pas assez élaborée […] peut-être
     grossir quitte à afficher moins de joueurs avant de défiler ») */
  --emotes-ligne: clamp(34px, calc(34 * var(--u)), 46px);
  --emotes-police-ligne: clamp(14.5px, calc(15 * var(--u)), 19px);
  --emotes-coeur: clamp(13px, calc(13 * var(--u)), 17px);
  --emotes-police-note: max(12px, calc(9.5 * var(--u)));
  font-family: var(--police-texte); font-size: var(--emotes-police); line-height: 1.3; color: var(--texte);
}
/* le pied : les réglages du socle (section 5 bis), redits pour les touches des émotes */
#chat button {
  --pied: calc(3 * var(--u));
  --course: calc(2 * var(--u));
  --socle-teinte: var(--metal-sombre);
  --socle-laiton: 0 var(--pied) 0 0 var(--metal-pied), 0 var(--pied) 0 max(1px, calc(1.5 * var(--u))) rgba(14, 8, 2, 0.92);
  --socle-verre: 0 var(--pied) 0 0 var(--socle-teinte), 0 var(--pied) 0 1px rgba(0, 0, 0, 0.85);
  margin: 0; font: inherit; color: inherit; border: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#chat button:focus-visible { outline: var(--anneau-clavier); outline-offset: 2px; }


/* ============================================================================
   2. LE PANNEAU
   ========================================================================== */
#chat .emotes-panneau {
  position: fixed; z-index: 5; display: flex; flex-direction: column; gap: 6px;
  box-sizing: border-box; padding: 8px 8px 10px; overflow: hidden;
  border-radius: calc(14 * var(--u));
  background: var(--emotes-verre);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-anneau), 0 0 0 1px rgba(0, 0, 0, 0.75), 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.55);
}

/* le titre : gravé en creux, comme les titres de section (socle, plaque) */
#chat .emotes-titre {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0; padding: 7px 10px; border-radius: calc(9 * var(--u));
  font: 900 clamp(12px, calc(12.5 * var(--u)), 16px)/1.2 var(--police-plateau);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--metal-vif);
  background: var(--plaque-fond); box-shadow: var(--plaque-ombre);
}
/* le nombre en lice : une pastille gravée, à l'accent (une information, pas une touche) */
#chat .emotes-nombre {
  min-width: 2.2em; padding: 2px 8px; border-radius: 999px; text-align: center;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em; color: var(--accent-vif);
  background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(var(--accent-rvb), 0.45);
}
#chat .emotes-nombre:empty { display: none; }


/* ============================================================================
   3. LA LISTE DES JOUEURS (de l'information : du verre à plat)
   ========================================================================== */
#chat .emotes-liste {
  flex: 1 1 auto; min-height: 0; margin: 0; padding: 2px 2px 4px; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: rgba(var(--metal-clair-rvb), 0.4) transparent;
}
/* UNE LIGNE : une plaquette de verre à plat (une information : ni pied, ni relief, ni main), le pseudo en
   lettres courantes bien lisibles, les vies en cœurs au bout */
#chat .emotes-joueur {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: var(--emotes-ligne); padding: 0 10px 0 12px;
  border-radius: calc(9 * var(--u));
  font-size: var(--emotes-police-ligne); font-weight: 600; line-height: 1.2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(var(--metal-clair-rvb), 0.16);
  cursor: default;
}
#chat .emotes-pseudo { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
/* LA LIGNE DU JOUEUR LUI-MÊME : au bleu « moi » du jeu, un filet à gauche, son pseudo en gras */
#chat .emotes-moi {
  background: linear-gradient(90deg, rgba(var(--moi-rvb), 0.3), rgba(var(--moi-rvb), 0.08));
  box-shadow: inset 3px 0 0 var(--moi), inset 0 0 0 1px rgba(var(--moi-rvb), 0.55);
}
#chat .emotes-moi .emotes-pseudo { color: var(--moi-vif); font-weight: 800; }
/* les vies : un, deux ou trois cœurs dessinés ; au-delà, un cœur et le nombre (qui lit la page sans la voir
   entend le nombre : chat.js le pose en aria-label) */
#chat .emotes-vies { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--texte); font-weight: 700; font-variant-numeric: tabular-nums; }
#chat .emotes-vies[hidden] { display: none; }
#chat .emotes-coeur { width: var(--emotes-coeur); height: var(--emotes-coeur); fill: var(--vie); filter: drop-shadow(0 0 3px rgba(var(--vie-rvb), 0.6)); }
#chat .emotes-vies[data-coeurs="1"] .emotes-coeur:nth-of-type(n+2),
#chat .emotes-vies[data-coeurs="2"] .emotes-coeur:nth-of-type(n+3),
#chat .emotes-vies[data-coeurs="plus"] .emotes-coeur:nth-of-type(n+2) { display: none; }
#chat .emotes-vies:not([data-coeurs="plus"]) .emotes-vies-nombre { display: none; }

/* la bande « Dans le public » : là naissent les émotes de ceux qui ne sont pas dans la liste */
#chat .emotes-public {
  flex: none; display: flex; align-items: center; justify-content: center; height: 24px;
  border-radius: calc(8 * var(--u)); border: 1px dashed rgba(var(--metal-clair-rvb), 0.28);
  font-size: var(--emotes-police-note); color: var(--texte-doux);
}


/* ============================================================================
   4. LA PALETTE, ET LA PHRASE QUI LA REMPLACE
   ========================================================================== */
#chat .emotes-pied { position: relative; flex: none; }
#chat .emotes-palette {
  display: grid; grid-template-columns: repeat(auto-fill, var(--emotes-touche));
  justify-content: center; gap: calc(var(--emotes-ecart) + var(--pied, 3px)) var(--emotes-ecart);
  padding-bottom: calc(3 * var(--u));
}
/* une touche : du verre sur son pied de laiton, le dessin de l'émote dedans */
#chat .emotes-bouton {
  display: grid; place-items: center; width: var(--emotes-touche); height: var(--emotes-touche); padding: 0;
  border-radius: calc(var(--emotes-touche) * 0.25);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, rgba(var(--verre-haut), 0.9), rgba(var(--verre-bas), 0.95));
  box-shadow: inset 0 0 0 max(1px, calc(1.2 * var(--u))) var(--metal-clair), 0 0 0 1px rgba(0, 0, 0, 0.8), var(--socle-verre);
  transition: transform 0.1s ease, filter 0.15s ease;
}
#chat .emotes-bouton:hover { filter: brightness(1.25); transform: translateY(calc(-1 * var(--u))); }
#chat .emotes-bouton:active { --pied: calc(1 * var(--u)); transform: translateY(var(--course)); }
#chat .emotes-dessin { width: var(--emotes-dessin); height: var(--emotes-dessin); object-fit: contain; pointer-events: none; }
/* le temps du rythme : la touche perd son pied de laiton, son dessin pâlit */
#chat .emotes-bouton[aria-disabled="true"] {
  cursor: default; --socle-teinte: rgba(3, 4, 7, 0.95); transform: none; filter: none;
  box-shadow: inset 0 0 0 max(1px, calc(1.2 * var(--u))) rgba(var(--metal-clair-rvb), 0.3), 0 0 0 1px rgba(0, 0, 0, 0.8), var(--socle-verre);
}
#chat .emotes-bouton[aria-disabled="true"] .emotes-dessin { opacity: 0.4; }
/* fermée (question ouverte, compte muet, spectateur, case du gagnant) : les
   touches disparaissent et leur place reste ; rien ne bouge dans la page */
#chat .emotes-palette[data-ferme="oui"] { visibility: hidden; }
/* la phrase : posée SUR la place de la palette quand elle est fermée, sous
   elle sinon (un refus bref) ; elle n'ajoute aucune hauteur */
#chat .emotes-note {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 4px;
  font-size: var(--emotes-police-note); line-height: 1.3; text-align: center; color: var(--texte-doux);
  pointer-events: none;
}
#chat .emotes-note:empty { display: none; }
/* palette fermée : la phrase prend sa place, au milieu */
#chat .emotes-palette[data-ferme="oui"] + .emotes-note { top: 0; display: flex; align-items: center; justify-content: center; }
/* palette ouverte (un refus bref) : la phrase se pose au pied, sur du verre, lisible sur les touches */
#chat .emotes-palette[data-ferme="non"] + .emotes-note {
  padding: 4px 6px; border-radius: calc(8 * var(--u)); color: var(--texte);
  background: rgba(var(--verre-bas), 0.96); box-shadow: 0 0 0 1px rgba(var(--metal-clair-rvb), 0.3);
}


/* ============================================================================
   5. LES ENVOLS
   ========================================================================== */
#chat .emotes-envols { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
#chat .emotes-envol {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 1px;
  will-change: transform, opacity;
}
#chat .emotes-envol-dessin { width: var(--emotes-envol); height: var(--emotes-envol); object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
#chat .emotes-envol-pseudo {
  max-width: 90px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; line-height: 1.2; color: var(--texte); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
/* il naît près du nom, monte en dérivant un peu, et s'efface */
#chat .emotes-monte { animation: chat-emote-monte 1.6s ease-out forwards; }
@keyframes chat-emote-monte {
  0% { opacity: 0; transform: translate(0, 6px) scale(0.6); }
  12% { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--derive, 0px), calc(-70 * var(--u))) scale(0.9); }
}
/* animations réduites : une pastille brève, sur place */
#chat .emotes-pastille { animation: chat-emote-pastille 1s linear forwards; }
@keyframes chat-emote-pastille {
  0% { opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #chat .emotes-monte { animation: chat-emote-pastille 1s linear forwards; }
  #chat .emotes-bouton, #chat .emotes-bouton:hover { transition: none; transform: none; }
}