/* Bouton d'allumage. Le bouton ne change de peau que si le shader a demarre :
   la classe .ign est posee par le script, jamais dans le HTML. */
.btn.ign{
  position:relative;
  background:linear-gradient(180deg,#2b2620 0%,#14110D 55%,#221D17 100%);
  border-color:#453a2c;
  color:var(--bone,#F4F1EC);
  overflow:hidden;
  padding:.85rem 1.6rem;
  box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10);
  transition:box-shadow .25s ease,border-color .25s ease,transform .12s ease;
}
.btn.ign:hover,.btn.ign:focus-visible{
  background:linear-gradient(180deg,#2b2620 0%,#14110D 55%,#221D17 100%);
  border-color:var(--acid,#7CF03D);
  box-shadow:0 14px 34px rgba(124,240,61,.20),inset 0 1px 0 rgba(255,255,255,.14);
}
.btn.ign:active{transform:translateY(1px)}
.btn.ign .ign-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none;
}
/* le libelle passe devant le shader et reste lisible dessus */
.btn.ign{isolation:isolate}
.btn.ign > :not(.ign-canvas){position:relative;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.85)}