.anima-whiteboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: #14141c;
  display: flex;
  flex-direction: column;
}

/* CETTE BARRE NE TENAIT PAS SUR UN TÉLÉPHONE, malgré ce qu'affirmait le commentaire du
   tiroir « Fond » dans whiteboard/overlay.hbs — corrigé lui aussi.
   Mesuré avant ce correctif, avec le nom de rencontre le plus COURT de nos pages-témoins
   (« L'embuscade du col ») : la barre débordait de 27 px à 360 px, et de 265 px avec un
   nom long. Et le débordement n'était pas cosmétique : le bouton « Fond » finissait
   35,2 px HORS ÉCRAN, sur une page dont le `scrollWidth` restait à 360 — l'enveloppe
   `.anima-whiteboard-overlay` est en `position: fixed`, donc rien ne devient défilable et
   le bouton était tout bonnement inatteignable. C'est le même angle mort que celui
   documenté par le harnais des modales : `document.scrollWidth` ne voit rien de ce qui
   déborde sous un ancêtre `fixed`.
   Elle débordait DÉJÀ avant que le plancher de police du projet ne lui ajoute 8 px : ce
   plancher a creusé le défaut, il ne l'a pas créé. */
.anima-whiteboard-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #1e1e2a;
  border-bottom: 1px solid #33334a;
}

/* `flex: 1 1 0` — et le `0` est tout le correctif. Le titre porte le nom de la rencontre,
   écrit par le MJ : c'est le seul élément de la barre dont la largeur n'a pas de plafond,
   c'est donc lui qui doit céder.
   `flex: 0 1 auto` ne suffit PAS, mesuré : l'enroulement se décide sur les tailles
   max-content, si bien que le titre repoussait « Fond » à la ligne suivante AVANT d'avoir
   eu à rétrécir — la barre ne débordait plus mais montait à 2 ou 3 rangs (97,7 à 138,2 px
   de haut selon le nom et la largeur). Avec une base à `0`, le titre ne compte plus dans
   la répartition en lignes : il occupe ce qui reste et s'abrège.
   Résultat mesuré, aux trois noms et aux deux largeurs : UN rang, 51,6 px de haut, aucun
   débordement. `min-width: 0` reste indispensable — sans lui un élément flex ne descend
   pas sous sa largeur de contenu et l'ellipsis n'aurait jamais de quoi se déclencher.
   `flex-wrap: wrap` reste au-dessus comme filet : si les seuls boutons venaient un jour à
   ne plus tenir sur une ligne (traduction plus longue, contrôle ajouté), ils passeront à
   la ligne au lieu de sortir de l'écran. */
.anima-whiteboard-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #f5f5f5;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anima-whiteboard-tools {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.anima-whiteboard-body {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.anima-whiteboard-stage {
  position: absolute;
  inset: 0;
  background: #0e0e15;
  /* Le geste appartient au tableau, pas au navigateur. Sans ça le navigateur
     requalifie le glissement en défilement de page : la carte suit le doigt ET la
     page défile dessous, et le glissement vers le bas finit en tirer-pour-rafraîchir.
     Même remède que .anima-floating-window-header / -resize (components.css), pour
     la même cause.
     Posé sur le conteneur du stage SEUL, délibérément, et pas sur l'overlay : la
     rangée d'outils (.anima-whiteboard-toolrow) défile horizontalement au doigt et
     le tiroir « Fond » doit rester manipulable — `touch-action: none` sur un ancêtre
     commun leur retirerait leur propre geste. */
  touch-action: none;
}

.anima-whiteboard-tray {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 12rem;
  max-height: 80%;
  overflow-y: auto;
  background: rgba(30, 30, 42, 0.92);
  border: 1px solid #33334a;
  border-radius: 0.4rem;
  padding: 0.5rem;
}

.anima-whiteboard-tray-title {
  font-size: 0.8rem;
  color: #c9a227;
  margin-bottom: 0.4rem;
}

.anima-whiteboard-tray-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.85rem;
  color: #f5f5f5;
  background: #2b2b3a;
  border: 1px solid #44445c;
  border-radius: 0.3rem;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
}

.anima-whiteboard-tray-item:hover {
  background: #3a3a50;
}

.anima-wb-token-colors {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.4rem 0.6rem;
  background: var(--surface-2, rgba(30, 30, 42, 0.92));
  border: 1px solid var(--border, #33334a);
  border-radius: 0.4rem;
  font-size: 0.8rem;
}
.anima-wb-token-colors-title {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #c9a227;
}
.anima-wb-token-color {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #f5f5f5;
}
.anima-wb-token-color input[type='color'] {
  width: 2rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.anima-wb-token-color input[type='range'] {
  width: 6rem;
}
.anima-wb-token-color select {
  width: auto;
  font-size: 0.8rem;
}

.anima-whiteboard-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  width: 100%;
  padding: 0.3rem 0;
  /* La rangée d'outils défile ; c'est elle qui doit être bornée en largeur, pas
     déborder de son parent. `min-width: 0` est ce qui autorise un enfant flex à
     rétrécir sous sa taille de contenu — sans lui, overflow-x n'a rien à couper. */
  min-width: 0;
}

/* Rangée d'outils : les 10 outils + le séparateur + les 4 boutons de droite ne
   tiennent pas sur un téléphone. Même traitement que .anima-tab-bar-inner —
   on défile horizontalement plutôt que de déborder la page, barre masquée. */
.anima-whiteboard-toolrow {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.anima-whiteboard-toolrow::-webkit-scrollbar {
  display: none;
}

.anima-whiteboard-toolrow > * {
  flex-shrink: 0;
}

/* Bandeau de style : rendu seulement quand un outil de tracé est actif (cf.
   `showsStyleControls`). 11 contrôles retirés de l'écran le reste du temps. */
.anima-whiteboard-stylebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}
.anima-wb-tool,
.anima-wb-width {
  min-width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
  background: #2b2b3a;
  color: #f5f5f5;
  border: 1px solid #44445c;
  border-radius: 0.3rem;
  cursor: pointer;
}
.anima-wb-tool.is-active,
.anima-wb-width.is-active {
  border-color: #c9a227;
  background: #3a3a50;
}
.anima-wb-tool.is-combat-live {
  background: #b11e2f;
  border-color: #ff6b7a;
  color: #fff;
  animation: anima-combat-pulse 1.1s ease-in-out infinite;
}
@keyframes anima-combat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 80, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(255, 60, 80, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .anima-wb-tool.is-combat-live { animation: none; }
}
.anima-wb-color {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.anima-wb-color.is-active {
  border-color: #fff;
}
.anima-wb-sep {
  width: 1px;
  height: 1.6rem;
  background: #44445c;
  margin: 0 0.3rem;
}
.anima-wb-width-bar {
  display: inline-block;
  width: 22px;
  background: #f5f5f5;
  border-radius: 2px;
  vertical-align: middle;
}
.anima-wb-measure {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(0, 229, 255, 0.15);
  border: 1px solid #00e5ff;
  color: #00e5ff;
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
  font-size: 0.85rem;
}
.anima-wb-gif-panel {
  position: absolute;
  top: 4rem;
  right: 0.75rem;
  width: 20rem;
  max-height: 70%;
  display: flex;
  flex-direction: column;
  background: #1e1e2a;
  border: 1px solid #44445c;
  border-radius: 0.4rem;
  padding: 0.5rem;
  z-index: 1060;
}
.anima-wb-gif-head {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.anima-wb-gif-search {
  flex: 1;
  background: #14141c;
  color: #f5f5f5;
  border: 1px solid #44445c;
  border-radius: 0.3rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}
.anima-wb-gif-loading {
  color: #c9a227;
  padding: 0.3rem;
}
.anima-wb-gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
  overflow-y: auto;
}
.anima-wb-gif-item {
  padding: 0;
  border: 1px solid #44445c;
  border-radius: 0.3rem;
  background: #14141c;
  cursor: pointer;
  overflow: hidden;
}
.anima-wb-gif-item img {
  width: 100%;
  display: block;
}
.anima-whiteboard-grid-group {
  display: inline-flex;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

/* Tiroir « Fond » : rendu seulement quand le MJ l'ouvre (cf. `bgDrawerOpen`), et
   seulement chez le MJ. Il enveloppe les huit contrôles de fond qui occupaient la
   barre du haut. `flex-wrap` plutôt qu'un défilement horizontal : le tiroir est
   déjà un geste explicite, on ne demande pas un second geste pour atteindre les
   derniers boutons — ils passent à la ligne. */
.anima-whiteboard-bg-drawer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: #1e1e2a;
  border-bottom: 1px solid #33334a;
}

/* Tirer-pour-rafraîchir : `touch-action: none` sur le conteneur du stage suffit à
   priver le navigateur des gestes qui COMMENCENT sur la carte — c'est le cas
   signalé (glisser vers le bas pour faire remonter la carte rechargeait la page).
   Cette règle-ci couvre le reste de l'overlay, où le geste peut naître ailleurs
   (barre du haut, tiroir « Fond ») et où la page derrière est toujours défilable :
   un tableau blanc ouvert n'est jamais un endroit où recharger est un service.
   Elle partage la dépendance implicite du bloc immersif ci-dessous : `body:has()`
   ne voit l'overlay que tant qu'il est un descendant du body de la page.
   Non vérifiée en headless — Chromium sans châssis mobile n'implémente pas le
   tirer-pour-rafraîchir, il n'y a donc rien à mesurer ici. Elle est posée sur la
   foi de la spécification (overscroll-behavior), pas d'un relevé, et c'est le
   téléphone qui tranchera. */
body:has(.anima-whiteboard-overlay) {
  overscroll-behavior: none;
}

/* Mode immersif : tant que le tableau blanc est monté, la barre de navigation du
   bas s'efface — le tableau prend l'écran, et « ← Retour » est la sortie. Sans
   ça, la barre mange 50 px (--bottomnav-h) sous une vue déjà à l'étroit, en
   proposant une navigation qui abandonnerait la partie en cours.

   La règle est en CSS pur, donc elle suit le montage et le démontage du composant
   sans qu'aucun code n'ait à penser à la défaire. Sa dépendance implicite est la
   PLACE du nœud : `body:has(...)` ne voit l'overlay que s'il est un descendant du
   body de la page. Il l'est aujourd'hui (rendu en ligne dans
   adventure/encounters.hbs, aucun `in-element` dans le front). Si le tableau
   venait à être déplacé dans un portail hors de ce body, la règle cesserait de
   s'appliquer EN SILENCE : la barre du bas réapparaîtrait par-dessus le tableau.
   Dégradation bénigne — on perd 50 px et rien d'autre, aucune casse — mais elle
   ne se signalerait pas.

   Le `padding-bottom` de .anima-main-content, qui réserve la place de cette même
   barre, n'a PAS à être neutralisé — mesuré, pas supposé. L'overlay est
   `position: fixed; inset: 0` : il est hors flux et recouvre entièrement le
   contenu, qui ne se remet donc pas en page. Relevé sur la page-témoin du harnais
   à 360 et 422 px, overlay monté puis démonté : padding-bottom 98px dans les deux
   cas (--bottomnav-h 50 + 48 de confort), hauteur de contenu 1336 px, bas du
   dernier bloc à 1398,53 px — chiffres identiques au pixel près. Rien ne bouge, et
   ces 98 px sont de toute façon derrière un fond opaque. */
@media (max-width: 767.98px) {
  body:has(.anima-whiteboard-overlay) .anima-tab-bar {
    display: none;
  }
}