/* ============================================================
   MISE EN PAGE GÉNÉRALE
   Les couleurs sont définies dans theme.css.
   ============================================================ */

/* Inclut les bordures et les marges internes dans les dimensions. */
* {
  box-sizing: border-box;
}

/* La scène occupe la fenêtre, sans défilement de la page. */
body {
  margin: 0;
  overflow: hidden;
  background: var(--couleur-page);
  color: var(--couleur-encre);
}

/* Supprime l'espace sous le canvas et facilite les interactions tactiles. */
canvas {
  display: block;
  touch-action: manipulation;
}

/* Masque complètement les éléments portant l'attribut HTML hidden. */
[hidden] {
  display: none !important;
}

/* ============================================================
   BOUTON POUR FRAPPER AU CLAVIER
   Tab pour afficher le bouton, puis Entrée ou Espace pour frapper.
   ============================================================ */

#frapper {
  position: fixed;
  z-index: 3;
  top: 12px;
  left: 68px;

  /* Cache le bouton au-dessus de la fenêtre tant qu'il n'a pas le focus. */
  transform: translateY(-200%);

  background: var(--couleur-page);
  color: var(--couleur-encre);
}

/* Rend le bouton visible lorsqu'il reçoit le focus clavier. */
#frapper:focus {
  transform: none;
}

/* ============================================================
   CONTENEUR DE LA BULLE
   Le JavaScript calcule sa position et sa largeur.
   ============================================================ */

.bulle {
  position: fixed;
  z-index: 2;

  /* Réserve de l'espace entre le texte et les pointes du contour. */
  padding: 30px 38px;

  display: flex;

  /* Garde le SVG placé derrière le texte à l'intérieur de la bulle. */
  isolation: isolate;

  /* Les clics hors du texte traversent la bulle vers la scène. */
  pointer-events: none;
}

/* ============================================================
   DESSIN SVG : CONTOUR ET QUEUE DE LA BULLE
   ============================================================ */

.bulle svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  /* Place le dessin derrière le texte. */
  z-index: -1;

  /* Autorise les pointes à dépasser légèrement du cadre du SVG. */
  overflow: visible;
}

.bulle polygon {
  fill: var(--couleur-page);
  stroke: var(--couleur-encre);
  stroke-width: 3px;

  /* Adoucit les angles des pointes. */
  stroke-linejoin: round;

  /* Conserve l'épaisseur du trait lorsque le SVG change de dimensions. */
  vector-effect: non-scaling-stroke;
}

/* ============================================================
   TEXTE DE LA BULLE — SANS ASCENSEUR
   La hauteur du texte reste libre : la bulle grandit avec son contenu.
   Un texte très long peut néanmoins dépasser la hauteur de l'écran.
   ============================================================ */

.bulle-texte {
  width: 100%;

  /* Aucune hauteur maximale ni zone de défilement. */
  overflow: visible;

  /* Conserve les retours à la ligne saisis dans la réplique. */
  white-space: pre-wrap;

  /* Coupe les mots très longs si nécessaire pour éviter un débordement horizontal. */
  overflow-wrap: anywhere;

  text-align: center;

  /* Taille adaptable à la fenêtre, comprise entre 18 et 26 pixels. */
  font-family: system-ui, sans-serif;
  font-size: clamp(18px, 3.5vw, 26px);
  font-weight: bold;
  line-height: 1.3;

  /* Permet notamment de sélectionner le texte avec la souris. */
  pointer-events: auto;
}

/* Répliques courtes : caractères plus grands et style BD plus marqué. */
.bulle-courte .bulle-texte {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(28px, 7vw, 46px);
  font-weight: bold;
  line-height: 1.15;
}

/* ============================================================
   FENÊTRES DE FAIBLE HAUTEUR
   Réduit les marges internes sans ajouter de défilement au texte.
   ============================================================ */

@media (max-height: 250px) {
  .bulle {
    padding: 12px 30px;
  }
}

/* Commande discrète du son, indépendante de la scène. */
#son {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 4;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--couleur-bouton-son);
  color: var(--couleur-icone-son);
  cursor: pointer;
  touch-action: manipulation;
}
#son:focus-visible {
  outline: 2px solid var(--couleur-focus-son);
  outline-offset: 3px;
}
#son svg { width: 100%; height: 100%; }
#son path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#son .son-coupe, #son[aria-pressed="false"] .son-ondes { display: none; }
#son[aria-pressed="false"] .son-coupe { display: block; }