/* Module « troupe » de l'accueil festif : les figurines 3D qui vivent par-dessus la page (ordinateur seulement).
   Une couche fixe plein écran, transparente, qui laisse passer tous les clics ; seule la toile, pendant le survol
   d'un personnage, en prend (classe .troupe-survol posée par troupe-scene.js). */
.fete-troupe {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  transition: opacity .4s ease;
}
.fete-troupe.troupe-cachee { opacity: 0; }
.fete-troupe:empty { display: none; }

.troupe-toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.troupe-toile.troupe-survol { pointer-events: auto; cursor: pointer; }
.troupe-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.troupe-bulles { position: absolute; inset: 0; pointer-events: none; }

/* Corde du lasso : chanvre clair sur un trait d'encre, comme une affiche de rodéo */
.troupe-lasso path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.troupe-lasso .corde-ombre { stroke: var(--encre, #231B14); stroke-width: 6.5; }
.troupe-lasso .corde { stroke: #C4924F; stroke-width: 3.6; }
.troupe-lasso .corde-fil { stroke: #F1D29A; stroke-width: 1.4; stroke-dasharray: 5 4; }
.troupe-lasso .corde-noeud { fill: #C4924F; stroke: var(--encre, #231B14); stroke-width: 2.5; }

/* Bulles de dialogue : papier crème, bordure d'encre, Archivo grasse (comme les bulles des scénettes) */
.troupe-bulle {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 230px;
  padding: 7px 12px 9px;
  border: 3px solid var(--encre, #231B14);
  border-radius: 16px;
  background: var(--papier, #FFF8EC);
  color: var(--encre, #231B14);
  font: 800 15px/1.25 var(--texte, Archivo, system-ui, sans-serif);
  box-shadow: 4px 4px 0 var(--encre, #231B14);
  opacity: 0;
  scale: .7;
  transform-origin: var(--queue, 50%) 100%;
  /* sans dépassement : en grandissant depuis sa queue, la bulle reste dans la place vérifiée (jamais sur le contenu) */
  transition: opacity .18s ease, scale .2s cubic-bezier(.2, .8, .3, 1);
  will-change: translate, scale;
}
.troupe-bulle.on { opacity: 1; scale: 1; }
.troupe-bulle b {
  display: block;
  margin-bottom: 1px;
  font: 400 12px/1.2 var(--display, Rye, Georgia, serif);
  letter-spacing: .4px;
  color: var(--brique, #A12A21);
}
.troupe-bulle::after {
  content: '';
  position: absolute;
  left: var(--queue, 50%);
  bottom: -10px;
  width: 14px;
  height: 14px;
  background: var(--papier, #FFF8EC);
  border-right: 3px solid var(--encre, #231B14);
  border-bottom: 3px solid var(--encre, #231B14);
  transform: translateX(-50%) rotate(45deg);
}

/* Tailles de repli (le texte passe à la ligne) et queue de côté : la bulle se place là où elle ne couvre rien */
/* coupure des mots longs en français (« télé-gramme ») : le texte ne déborde jamais du cadre */
.troupe-bulle.etroite, .troupe-bulle.compacte { -webkit-hyphens: auto; hyphens: auto; }
.troupe-bulle.etroite { max-width: var(--bulle-max, 140px); }
.troupe-bulle.compacte { max-width: var(--bulle-max, 124px); padding: 4px 8px 5px; border-width: 2px; font-size: 12.5px; line-height: 1.2; box-shadow: 3px 3px 0 var(--encre, #231B14); }
.troupe-bulle.compacte b { font-size: 10px; }
.troupe-bulle.queue-droite::after { left: auto; right: -10px; bottom: auto; top: var(--queue-y, 50%); transform: translateY(-50%) rotate(-45deg); }
.troupe-bulle.queue-gauche::after { left: -10px; bottom: auto; top: var(--queue-y, 50%); transform: translateY(-50%) rotate(135deg); }
.troupe-bulle.queue-droite, .troupe-bulle.queue-gauche { transform-origin: 50% 50%; }

/* Le duel du pied de page : onomatopée de bande dessinée (« BANG! ») dans un éclat jaune cerné d'encre */
.troupe-bang {
  position: absolute;
  left: 0;
  top: 0;
  width: 108px;
  height: 72px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform-origin: 50% 60%;
  animation: troupe-bang .85s cubic-bezier(.2, .9, .3, 1) forwards;
}
.troupe-bang.petit { width: 72px; height: 48px; }
.troupe-bang svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.troupe-bang polygon { fill: #FFC857; stroke: var(--encre, #231B14); stroke-width: 3.5; stroke-linejoin: round; }
.troupe-bang span {
  position: relative;
  font: 400 23px/1 var(--display, Rye, Georgia, serif);
  letter-spacing: .5px;
  color: var(--brique, #A12A21);
  text-shadow: 1.5px 1.5px 0 var(--papier, #FFF8EC);
}
.troupe-bang.petit span { font-size: 15px; }
@keyframes troupe-bang {
  0% { opacity: 0; scale: .35; }
  14% { opacity: 1; scale: 1.08; }
  28% { scale: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; scale: 1.04; }
}

/* Jamais sur téléphone ou tablette, ni en mouvement réduit (le module ne démarre pas non plus). Le mouvement réduit
   suit la règle du site (ui.js) : la case de la page l'emporte sur le réglage du système, d'où la classe sur <html>. */
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .fete-troupe { display: none; }
}
html.mouvement-reduit .fete-troupe { display: none; }
@media print { .fete-troupe { display: none; } }