/* ============================================================
   Motif de mascottes — La Bringue

   Le panneau bleu de la marque, rempli d'allumettes. BRAND.md
   impose que la mascotte soit toujours posée sur ce panneau :
   le fond vient donc du token de la marque, pas d'un noir choisi.

   Le conteneur appartient au héros : on n'y pose que le fond et
   un contexte d'empilement. Sa taille, sa position et son rôle
   dans le carrousel restent l'affaire de index.html et style.css.
   ============================================================ */

.motif-mascottes {
  background-color: var(--lb-bleu, #1C2B8F);
  /* Le motif passe sous tout contenu que le héros poserait par-dessus,
     sans jamais passer sous le fond du conteneur lui-même. */
  isolation: isolate;
}

/* Deux calques superposés au même endroit : les têtes, peintes une
   fois, et les regards, seuls à se repeindre à chaque image. */
.motif-mascottes__toile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  pointer-events: none;
}

/* Le calque des regards reçoit sa propre couche de composition : ses
   repeints ne touchent pas celui des têtes. */
.motif-mascottes__regards {
  will-change: transform;
}